{% extends "base.html" %}

{% block title %}{{ t('authorization', current_lang) }}{% endblock %}

{% block content %}
<div style="max-width: 400px; margin: 60px auto;" class="card">
    <div style="text-align: center; margin-bottom: 24px;">
        <h1 style="font-size: 1.5rem; font-weight: 700; margin-top: 12px;">{{ t('authorization', current_lang) }}</h1>
        <p style="color: var(--text-secondary); font-size: 0.85rem;">{{ t('login_subtitle', current_lang) }}</p>
    </div>

    {% if error %}
    <div style="background: rgba(239, 68, 68, 0.15); border: 1px solid var(--danger); color: #fca5a5; padding: 10px; border-radius: 6px; font-size: 0.9rem; margin-bottom: 16px; text-align: center;">
        {{ error }}
    </div>
    {% endif %}

    <form action="/login" method="POST" style="display: flex; flex-direction: column; gap: 16px;">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div>

            <label for="pwd" style="display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px;">{{ t('admin_password', current_lang) }}</label>
            <input type="password" id="pwd" name="password" required autofocus autocomplete="current-password" style="width: 100%; padding: 10px; background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; font-size: 1rem;">
        </div>

        <button type="submit" class="btn btn-primary" style="width: 100%; padding: 10px; font-size: 1rem;">{{ t('sign_in', current_lang) }}</button>
    </form>

</div>
{% endblock %}