<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">
    {% if css_link %}
        <link href="{{css_link}}" rel="stylesheet">
    {% endif %}
    <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">
<section class="w-auto  text-gray-800 dark:text-gray-200">
    <div 
        class="flex flex-col space-y-2 items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 "
    >
       <div class="my-2 text-4xl">{{email_subject | default (value="")}}</div>
       <div class="my-4">{{email_body | default (value="")}}</div>

       {% if reset_key and reset_key != "" %}
        <div class="my-2">Use this link:</di>
        <div class="my-2"><a class="text-gray-800 dark:text-gray-200" href="{{reset_url | default (value="/reset")}}/{{reset_key | urlencode_strict}}">{{reset_url | default (value="/reset")}}/{{reset_key | urlencode_strict}}</a></div>
        {% if reset_expiration %}
            <div class="my-2"><small> Available for {{reset_expiration}}</small></div>
        {% endif %}
       {% endif %}
    </div>
</section>
</body>
</html>
