{% extends "base.html" %}

{% block title %}{{ t(key="login-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="nav-admin", lang=lang | default(value='sk')) }}
      </span>
      <span
        class="rounded-radius border border-danger/40 px-2 py-0.5 text-xs font-medium text-danger">
        {{ t(key="auth", lang=lang | default(value='sk')) }}
      </span>
    </div>

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

      {% if error %}
      <div
        class="mt-3 rounded-radius border border-danger/40 bg-danger/10 px-3 py-2 text-sm text-danger"
        role="alert">
        ✗ {{ t(key="login-error", lang=lang | default(value='sk')) }}
      </div>
      {% endif %}

      <form method="post" action="/admin/login" 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>
          <input type="email" id="email" name="email" required autofocus
            autocomplete="email"
            class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark dark:focus:ring-primary-dark">
        </div>

        <div class="flex flex-col gap-1">
          <label for="password"
            class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
            {{ t(key="login-password", lang=lang | default(value='sk')) }}
          </label>
          <input type="password" id="password" name="password" required
            autocomplete="current-password"
            class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark dark:focus:ring-primary-dark">
        </div>

        <button type="submit"
          class="mt-1 w-full rounded-radius bg-primary px-4 py-2 text-sm font-semibold text-on-primary transition hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-surface-alt dark:bg-primary-dark dark:text-on-primary-dark dark:focus:ring-primary-dark dark:focus:ring-offset-surface-dark-alt">
          {{ t(key="login-auth", lang=lang | default(value='sk')) }}
        </button>
      </form>
    </div>
  </div>
</div>
{% endblock content %}