{block content}

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-4">
            <div class="card shadow border-0">
                <div class="card-header bg-dark text-white text-center py-3">
                    <h1 class="h4 mb-0" n:block=title>Dvoufázové ověření</h1>
                </div>
                
                <div class="card-body p-4 text-center">
                    <div class="mb-4">
                        <div class="display-4 text-primary mb-3">
                            <i class="bi bi-shield-lock"></i>
                        </div>
                        <p class="text-muted">
                            Otevřete svou autentifikační aplikaci a zadejte 6místný kód pro potvrzení identity.
                        </p>
                    </div>

                    <div n:foreach="$flashes as $flash" class="alert alert-{$flash->type === 'error' ? 'danger' : $flash->type} small">
                        {$flash->message}
                    </div>

                    {form twoFactorForm}
                        <div n:if="$form->hasErrors()" class="alert alert-danger d-flex align-items-center shadow-sm" role="alert">
                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
                            <div>
                                {foreach $form->getErrors() as $error}{$error}{sep}<br>{/sep}{/foreach}
                            </div>
                        </div>
                        <div class="mb-4">
                            {input code class => "form-control form-control-lg text-center fw-bold", 
                                   style => "letter-spacing: 0.4rem; font-size: 2rem;", 
                                   placeholder => "· · · · · ·",
                                   autofocus => true}
                        </div>
                        
                        <div class="d-grid gap-2">
                            {input verify class => "btn btn-primary btn-lg"}
                        </div>
                    {/form}
                </div>

                <div class="card-footer bg-light text-center py-3">
                    <a n:href="in" class="text-decoration-none small text-secondary">
                        <i class="bi bi-arrow-left"></i> Zpět na přihlášení
                    </a>
                </div>
            </div>
            
            <p class="text-center mt-4 text-muted small">
                Nemáte přístup k zařízení? Kontaktujte podporu.
            </p>
        </div>
    </div>
</div>

<style>
    /* Odstranění šipek u číselného vstupu, pokud byste změnili typ na number */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    
    input[name="code"]::placeholder {
        letter-spacing: normal;
        font-weight: normal;
        opacity: 0.3;
    }
</style>