{% extends "base.html" %}
{% load static %}
{% block title %}
  {% if success %}
    Email Verification Complete
  {% elif error %}
    Email Verification Failed
  {% else %}
    Verifying Email...
  {% endif %}
{% endblock title %}
{% block content %}
  <div class="flex justify-center min-h-screen w-100 place-items-center bg-gradient">
    <div class="p-8 mx-4 space-y-3 shadow-lg bg-background rounded-4 w-100" style="max-width:30rem">
      {% if app.app_logo %}
        <div class="mb-5 text-center">
          <img src="{{ app.app_logo }}" alt="{{ app.app_name }} Logo" style="height:3.25rem"/>
        </div>
      {% endif %}
      {% if success %}
        <h1 class="text-3xl font-bold tracking-tight text-center text-black">Email Verified!</h1>
        <p class="font-medium leading-normal text-center text-gray-500 text-md">You may close this window now.</p>
      {% elif error %}
        <h1 class="text-3xl font-bold tracking-tight text-center text-black">Something went wrong!</h1>
        <p class="font-medium leading-normal text-center text-gray-500 text-md">{{ error }}. Please try
          again.</p>
      {% else %}
        <h1 class="text-3xl font-bold tracking-tight text-center text-black">Verifying email...</h1>
        <p class="font-medium leading-normal text-center text-gray-500 text-md">Please wait while we run the checks.</p>
      {% endif %}
      {% if token %}
        <form id="m-form" method="post">
          {% csrf_token %}
          <input type="hidden" name="token" value="{{ token }}">
        </form>
      {% endif %}
    </div>
  </div>
  {% if token %}
    <script>
        // Automatically submit the form when the page loads
        window.onload = function () {
            const form = document.getElementById('m-form');
            if (form) {
                form.submit();
            }
        };
    </script>
  {% endif %}
{% endblock content %}
