{block content}

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-5">
            <div class="card shadow border-0 overflow-hidden">
                <div class="card-header bg-danger text-white text-center py-3">
                    <h1 class="h4 mb-0" n:block=title>Vypnutí 2FA</h1>
                </div>
                
                <div class="card-body p-4">
                    <div class="text-center mb-4">
                        <div class="display-1 text-danger mb-3">
                            <i class="bi bi-shield-x"></i>
                        </div>
                        <h2 class="h5 fw-bold">Potvrďte zrušení kódem</h2>
                        <p class="text-muted small">
                            Pro vypnutí zabezpečení zadejte aktuální kód z vaší aplikace. Tím potvrdíte, že máte přístup ke svému autentifikátoru.
                        </p>
                    </div>

                    <div class="p-3 bg-light rounded border shadow-sm">
                        {form disableForm}
                            <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 text-center">
                                {label code class => "form-label fw-bold d-block mb-3" /}
                                {input code class => "form-control form-control-lg text-center fw-bold shadow-sm", 
                                       style => "letter-spacing: 0.5rem; font-size: 2rem;",
                                       autofocus => true}
                            </div>
                            
                            <div class="d-grid gap-3">
                                {input disable}
                                <a n:href=":Home:" class="btn btn-link text-secondary btn-sm">
                                    <i class="bi bi-arrow-left"></i> Ponechat zapnuté
                                </a>
                            </div>
                        {/form}
                    </div>
                </div>

                <div class="card-footer bg-light border-0 text-center py-3">
                    <p class="mb-0 small text-danger fw-bold">
                        <i class="bi bi-exclamation-triangle"></i> Pozor: Váš účet bude chráněn pouze heslem!
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    input[name="code"]::placeholder {
        letter-spacing: normal;
        font-weight: normal;
        opacity: 0.3;
    }
</style>