{block content}

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h2 class="h5 mb-0">Nastavení dvoufázového ověření (2FA)</h2>
                </div>
                
                <div class="card-body">
                    <div class="row g-4">
                        
                        <div class="col-md-6 border-end">
                            <h3 class="h6 fw-bold">1. Přidejte si účet do aplikace</h3>
                            <p class="small text-muted">Použijte Google Authenticator, Authy nebo Microsoft Authenticator.</p>
                            
                            <div class="text-center my-3 p-3 border rounded bg-light">
                                <img src="{$qrCodeUri|noescape}" alt="QR kód" class="img-fluid">
                            </div>

                            <div class="d-grid gap-2 mb-3">
                                <a href="{$otpAuthUri|noescape}" class="btn btn-outline-primary d-md-none">
                                    <i class="bi bi-mobile"></i> Otevřít přímo v aplikaci
                                </a>
                            </div>
                            
                            <div class="alert alert-secondary py-2">
                                <small class="d-block text-uppercase fw-bold text-muted" style="font-size: 0.7rem;">Ruční klíč:</small>
                                <code class="user-select-all">{$secretKey}</code>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <h3 class="h6 fw-bold">2. Ověřte nastavení</h3>
                            <p class="small text-muted">Zadejte 6místný kód z aplikace pro potvrzení.</p>
                            
                            <div n:foreach="$flashes as $flash" class="alert alert-{$flash->type === 'error' ? 'danger' : $flash->type} alert-dismissible fade show" role="alert">
                                {$flash->message}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>

                            <div class="mt-4">
                                {form verifyForm}
                                    <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-3">
                                        {label code class => "form-label" /}
                                        {input code class => "form-control form-control-lg text-center fw-bold", style => "letter-spacing: 0.3rem;", placeholder => "000 000"}
                                    </div>
                                    <div class="d-grid">
                                        {input send class => "btn btn-success btn-lg"}
                                    </div>
                                {/form}
                            </div>
                        </div>

                    </div>
                </div>
                
                <div class="card-footer text-center py-3">
                    <a n:href=":Home:" class="btn btn-link btn-sm">Zrušit a vrátit se zpět</a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Jemné doladění pro lepší čitelnost kódu */
    input[name="code"]::placeholder {
        letter-spacing: normal;
        font-weight: normal;
        opacity: 0.5;
    }
</style>

{/block}