{% if use_header %}
<html lang="en" class="scroll-smooth dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
        .active { padding: 0 0.5em; border-radius: 0.5rem; }
        .active { background-color: rgba(203,213,225,1); }
        .dark .active { background-color: rgba(71,85,105,1); }
    </style>
</head>
<body class="bg-gray-50 dark:bg-gray-900">
{% include "partials/header.html.j2" %}
{% endif %}
<section class="w-auto text-gray-800 dark:text-gray-200">
    <div 
        class="flex flex-col space-y-2 items-center justify-center bg-gray-100 dark:bg-gray-900 "
    >
       <div class="my-2 text-4xl text-indigo-500">{{email_subject | default (value="")}}</div>
       <div class="my-4">{{email_body | default (value="")}}</div>

       {% if invite_key and invite_key != "" %}
       <div class="my-2">Use this link:</div>
       <div class="my-2"><a class="text-indigo-800 dark:text-indigo-200" href="{{signup_url | default (value="/signup")}}/{{invite_key | urlencode_strict}}">{{signup_url | default (value="/signup")}}/{{invite_key}}</a></div>
            {% if invite_expiration %}
            <div class="my-2"><small> Available for {{invite_expiration}}</small></div>
            {% endif %}
       {% endif %}
       <div class="my-3 text-xl">{{email_result | default (value="")}}</div>
    </div>
</section>
{% if use_footer %}
{#
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
#}
{% include "partials/footer.html.j2" %}
{% endif %}