{% extends "base.html" %}
{% block title %}Вход — Тестирование{% endblock %}

{% block content %}
<section class="mx-auto max-w-md mt-8">
  <div class="rounded-2xl bg-white shadow-sm border border-ink-300/60 p-6">
    <div class="flex items-center gap-2">
      <span class="material-symbols-outlined text-brand-600">login</span>
      <h1 class="text-xl font-semibold">Вход в систему</h1>
    </div>
    <p class="mt-1 text-sm text-ink-500">
      Используйте логин и пароль.
      {% if hr_auth_enabled %}
        Учётка кадровой системы (HR).
      {% endif %}
    </p>

    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        <div class="mt-4 space-y-2">
          {% for category, msg in messages %}
            <div class="px-3 py-2 rounded-lg text-sm
                        {% if category == 'error' %}bg-red-50 text-red-700 border border-red-200
                        {% else %}bg-brand-50 text-brand-700 border border-brand-100{% endif %}">
              {{ msg }}
            </div>
          {% endfor %}
        </div>
      {% endif %}
    {% endwith %}

    <form method="post" action="{{ url_for('auth.login_submit') }}" class="mt-5 space-y-4" novalidate>
      <input type="hidden" name="next" value="{{ next or '/' }}">

      <label class="block">
        <span class="text-sm font-medium text-ink-700">Логин</span>
        <input type="text" name="login" value="{{ login or '' }}" required autofocus autocomplete="username"
               class="mt-1 w-full rounded-lg border border-ink-300 bg-white px-3 py-2 text-ink-900
                      focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20" />
      </label>

      <label class="block">
        <span class="text-sm font-medium text-ink-700">Пароль</span>
        <input type="password" name="password" required autocomplete="current-password"
               class="mt-1 w-full rounded-lg border border-ink-300 bg-white px-3 py-2 text-ink-900
                      focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20" />
      </label>

      <button type="submit"
              class="w-full inline-flex items-center justify-center gap-2 rounded-lg
                     bg-brand-600 hover:bg-brand-700 text-white font-medium px-4 py-2 transition">
        <span class="material-symbols-outlined text-base">login</span>
        Войти
      </button>
    </form>
  </div>
</section>
{% endblock %}