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

{% block content %}
{% if ui_variant == 'legacy' %}
  <div class="login-page">
    <div class="login-shell">
      <div class="login-logo">
        <img src="{{ url_for('static', filename='img/clinic-logo.png') }}"
             alt="Логотип клиники" class="login-logo__img" />
        <h1 class="font-headline">Тестирование</h1>
      </div>

      {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
          <div class="callout callout--error" style="margin-bottom: 1rem;">
            {% for category, msg in messages %}
              {% if category == 'error' %}{{ msg }}{% endif %}
            {% endfor %}
          </div>
        {% endif %}
      {% endwith %}

      <div class="login-card">
        <form method="post" action="{{ url_for('auth.login_submit') }}" novalidate>
          <input type="hidden" name="next" value="{{ next or '/' }}">

          <div class="form-field">
            <label class="form-label" for="login-username">Логин</label>
            <input id="login-username" class="form-input" type="text" name="login"
                   value="{{ login or '' }}" required autofocus autocomplete="username" />
          </div>

          <div class="form-field">
            <label class="form-label" for="login-password">Пароль</label>
            <input id="login-password" class="form-input" type="password" name="password"
                   required autocomplete="current-password" />
          </div>

          <button type="submit" class="btn btn-primary">Войти</button>
        </form>
      </div>
    </div>
  </div>
{% else %}
  <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>
{% endif %}
{% endblock %}