{% extends "layout.html.twig" %}

{% trans_default_domain 'Settings' %}

{% block title %}{{ '2fa.page_title'|trans }}{% endblock title %}

{% block stylesheets %}
    {{ parent() }}
    <style>
    .twofa-container {
        max-width: 440px;
        margin: 60px auto;
        padding: 0 16px;
    }
    .twofa-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 16px rgba(0,0,0,0.08);
        padding: 36px 32px;
        text-align: center;
    }
    .twofa-icon {
        width: 64px;
        height: 64px;
        background: #f0faf4;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        font-size: 28px;
        color: #00A550;
    }
    .twofa-card h2 {
        font-size: 22px;
        font-weight: 700;
        color: #1a1a1a;
        margin: 0 0 8px;
    }
    .twofa-card p {
        font-size: 14px;
        color: #6b7280;
        margin: 0 0 24px;
    }
    .twofa-input {
        width: 100%;
        padding: 14px 16px;
        border: 2px solid #e5e7eb;
        border-radius: 10px;
        font-size: 22px;
        text-align: center;
        letter-spacing: 8px;
        font-weight: 600;
        color: #1a1a1a;
        outline: none;
        transition: border-color 0.2s;
        box-sizing: border-box;
        font-family: monospace;
    }
    .twofa-input:focus {
        border-color: #00A550;
        box-shadow: 0 0 0 3px rgba(0,165,80,0.1);
    }
    .twofa-btn {
        width: 100%;
        padding: 14px;
        background: #00A550;
        color: #fff;
        border: none;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 16px;
        transition: background 0.2s;
    }
    .twofa-btn:hover { background: #008a42; }
    .twofa-error {
        background: #fef2f2;
        color: #dc2626;
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 13px;
        margin-bottom: 16px;
        border: 1px solid #fecaca;
    }
    .twofa-alt {
        margin-top: 20px;
        font-size: 13px;
    }
    .twofa-alt a {
        color: #00A550;
        text-decoration: none;
        font-weight: 500;
    }
    .twofa-alt a:hover { text-decoration: underline; }
    </style>
{% endblock %}

{% block body %}
<div class="twofa-container">
    <div class="twofa-card">
        <div class="twofa-icon">
            <i class="fa fa-shield"></i>
        </div>
        <h2>{{ '2fa.challenge_title'|trans }}</h2>
        <p>{{ '2fa.challenge_desc'|trans }}</p>

        {% if authenticationError is not null %}
            <div class="twofa-error">
                {{ '2fa.invalid_code'|trans }}
            </div>
        {% endif %}

        <form method="post" action="{{ checkPathUrl ?: path(checkPathRoute) }}">
            <input type="text"
                   name="{{ authCodeParameterName }}"
                   class="twofa-input"
                   autocomplete="one-time-code"
                   inputmode="numeric"
                   maxlength="8"
                   pattern="[A-Za-z0-9]{6,8}"
                   placeholder="000000"
                   autofocus
                   required>

            {% if isCsrfProtectionEnabled %}
                <input type="hidden" name="{{ csrfParameterName }}" value="{{ csrf_token(csrfTokenId) }}">
            {% endif %}

            <button type="submit" class="twofa-btn">
                {{ '2fa.verify_btn'|trans }}
            </button>
        </form>

        <div class="twofa-alt">
            {{ '2fa.backup_hint'|trans }}
        </div>

        <div class="twofa-alt">
            <a href="{{ logoutPath }}">{{ '2fa.cancel_login'|trans }}</a>
        </div>
    </div>
</div>
{% endblock %}