{% extends "base.html" %}
{% import "macros/ui.html" as ui %}

{% block title %}{{ t(key="resend-verification-title", lang=lang | default(value='sk')) }}{% endblock title %}

{% block content %}
<div class="mx-auto mt-8 max-w-sm">
  <div class="rounded-radius border border-outline bg-surface-alt shadow-sm dark:border-outline-dark dark:bg-surface-dark-alt">
    <div class="flex items-center justify-between border-b border-outline px-5 py-3 dark:border-outline-dark">
      <span class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="brand", lang=lang | default(value='sk')) }}</span>
      {{ ui::badge(label=t(key="auth", lang=lang | default(value='sk')), variant="primary") }}
    </div>

    <div class="p-5">
      <h1 class="text-xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="resend-verification-title", lang=lang | default(value='sk')) }}</h1>

      {% if done %}
      <div class="mt-3 rounded-radius border border-success bg-success/10 px-4 py-3 text-sm text-success" role="status">
        {{ t(key="resend-verification-done", lang=lang | default(value='sk')) }}
      </div>
      <p class="mt-4 text-sm text-on-surface dark:text-on-surface-dark">
        <a href="/login" class="font-medium text-primary underline-offset-2 hover:underline dark:text-primary-dark">{{ t(key="nav-login", lang=lang | default(value='sk')) }}</a>
      </p>
      {% else %}
      <p class="mt-1 text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="resend-verification-intro", lang=lang | default(value='sk')) }}</p>
      <form method="post" action="/resend-verification" hx-boost="false" class="mt-4 flex flex-col gap-4">
        <div class="flex flex-col gap-1">
          <label for="email" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="login-email", lang=lang | default(value='sk')) }}</label>
          {{ ui::input(name="email", id="email", type="email", required=true, autocomplete="email", attrs="autofocus") }}
        </div>
        {{ ui::button(label=t(key="resend-verification-submit", lang=lang | default(value='sk')), type="submit", extra="mt-1 w-full") }}
      </form>
      {% endif %}
    </div>
  </div>
</div>
{% endblock content %}