<!DOCTYPE html>
<html>

<head>
    <title>{{title}}</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en" />
    {{#if redirect.auto}}
    <meta http-equiv='refresh' content="3; url = '{{redirect.link}}'" />
    {{/if}}
    <link href=“https://use.typekit.net/qwi6aba.css” rel=“stylesheet” />

    <style type="text/css">
        body {
            height: 100vh;
            margin: 0;
            background: url({{{background 'ribbon'}}}) no-repeat right bottom,
            url({{{background 'dotted-bg'}}}) no-repeat right bottom;
            background-size: 35%;
        }

        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100vh;
            width: 80vw;
            align-items: center;
            margin: 0 auto;
        }

        .container>div {
            margin: 3%;
        }

        .title {
            font: 700 32px/20px Futura EF, futura-pt, Futura, Hind, Verdana, Arial Black, sans-serif;
            line-height: 32px;
        }

        .subtitle {
            font: 700 18px/21px Futura EF, futura-pt, Futura, Hind, Verdana, Arial Black, sans-serif;
            color: #9f9f9f;
        }

        .description {
            font: 300 14px/21px Roboto, roboto, Helvetica Neue, sans-serif;
        }

        span {
            font-weight: 500;
        }

        #actions {
            margin-top: 32px;
        }

        .action-button {
            margin-left: 32px;
            background-color: #694ed6;
            color: white;
            border-radius: 18px;
            min-width: 64px;
            line-height: 36px;
            padding: 0 16px;
            border: none;
            cursor: pointer;
        }

        .action-button.secondary {
            background-color: #c137a2;
        }

        .icon-msg,
        .icon-msg svg {
            height: 30vh;
        }

        @media screen and (max-width: 768px) {
            body {
                background: url({{{background 'dotted-bg'}}}) no-repeat right bottom;
                background-size: 60%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        {{#if svg}}
        <div class="icon-msg">{{{inlineSvg svg}}}</div>
        {{/if}}

        <div class="text">
            <h1 class="title">{{title}}</h1>
            <h2 class="subtitle">{{subtitle}}</h2>
            <p class="description">{{description}}</p>
            <br />
            <div id="actions" style="display: flex;flex-direction: row-reverse;">
                {{#if backLabel}}
                <button class='action-button secondary' onclick='back()'>{{backLabel}}</button>
                {{/if}}
                {{#if redirect.label}}
                <button class='action-button' onclick='proceed()'>{{redirect.label}}</button>
                {{/if}}
            </div>
        </div>
    </div>

    {{#if backLabel}}
    <script>
        function back() {
            window.history.go(-1);
            return false;
        }
    </script>
    {{/if}}

    {{#if redirect}}
    <script>
        function proceed() {
            window.location.href = '{{{redirect.encodedLink}}}';
        }
    </script>
    {{/if}}
</body>

</html>
