{block content}

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-10 col-lg-7">
            <div class="content-card my-3">
                <h2 class="h4 mb-3" style="color: var(--header-bg);">
                    <i class="bi bi-gear-fill me-2"></i>Nastavení
                </h2>

                <form n:name="nastaveniForm" class="login-form">
                    <div n:if="$form->errors" class="alert alert-danger mb-3">
                        <ul class="mb-0 ps-3">
                            <li n:foreach="$form->errors as $error">{$error}</li>
                        </ul>
                    </div>

                    <fieldset class="border rounded p-3">
                        <legend class="float-none w-auto px-2 fs-6 fw-bold mb-0">Faktury</legend>

                        <div class="row align-items-center mb-3">
                            <label n:name="maska" class="col-sm-5 col-form-label">Číslování faktur (maska):</label>
                            <div class="col-sm-7">
                                <input n:name="maska" class="form-control">
                            </div>
                        </div>

                        <div class="row align-items-center mb-3">
                            <label n:name="obdobi" class="col-sm-5 col-form-label">Číslovat po:</label>
                            <div class="col-sm-7">
                                <select n:name="obdobi" class="form-select"></select>
                            </div>
                        </div>

                        <div class="row align-items-center">
                            <label n:name="splatnost" class="col-sm-5 col-form-label">Splatnost faktury (dny):</label>
                            <div class="col-sm-4">
                                <input n:name="splatnost" class="form-control" style="max-width: 8rem;">
                            </div>
                        </div>

                        <p class="text-muted small mt-3 mb-0">
                            Značky v masce: <code>{='{ROK}'}</code> rok, <code>{='{RR}'}</code> rok na dvě číslice,
                            <code>{='{MESIC}'}</code> měsíc, <code>{='{CISLO4}'}</code> pořadové číslo na čtyři místa.
                            Číselná řada se nuluje podle volby „Číslovat po“.
                            Příští faktura: <strong>{$prikladCisla}</strong>.
                        </p>
                    </fieldset>

                    <div class="d-flex justify-content-end mt-4">
                        <button n:name="save" class="btn btn-success">
                            <i class="bi bi-check-lg me-1"></i> Uložit nastavení
                        </button>
                    </div>
                </form>

                <form n:name="jmenoForm" class="login-form mt-4">
                    <div n:if="$form->errors" class="alert alert-danger mb-3">
                        <ul class="mb-0 ps-3">
                            <li n:foreach="$form->errors as $error">{$error}</li>
                        </ul>
                    </div>

                    <fieldset class="border rounded p-3">
                        <legend class="float-none w-auto px-2 fs-6 fw-bold mb-0">Přihlášení</legend>

                        <div class="row align-items-center mb-3">
                            <label n:name="email" class="col-sm-5 col-form-label">Uživatelské jméno:</label>
                            <div class="col-sm-7">
                                <div class="input-group">
                                    <input n:name="email" class="form-control">
                                    <button n:name="save" class="btn btn-outline-primary">Uložit</button>
                                </div>
                            </div>
                        </div>

                        <div class="row align-items-center">
                            <div class="col-sm-5 col-form-label">Heslo:</div>
                            <div class="col-sm-7">
                                <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#hesloModal">
                                    <i class="bi bi-key me-1"></i> Změnit heslo
                                </button>
                            </div>
                        </div>

                        <p class="text-muted small mt-3 mb-0">
                            Uživatelské jméno je e-mail, kterým se přihlašujete.
                        </p>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="hesloModal" tabindex="-1" aria-hidden="true" aria-labelledby="hesloModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <form n:name="hesloForm">
                <div class="modal-header">
                    <h5 class="modal-title" id="hesloModalLabel">
                        <i class="bi bi-key me-1"></i>Změna hesla
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zavřít"></button>
                </div>
                <div class="modal-body">
                    <div n:if="$form->errors" class="alert alert-danger mb-3">
                        <ul class="mb-0 ps-3">
                            <li n:foreach="$form->errors as $error">{$error}</li>
                        </ul>
                    </div>

                    <div class="mb-3">
                        <label n:name="current" class="form-label">Původní heslo</label>
                        <input n:name="current" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label n:name="password" class="form-label">Nové heslo</label>
                        <input n:name="password" class="form-control">
                    </div>
                    <div class="mb-0">
                        <label n:name="passwordVerify" class="form-label">Nové heslo znovu</label>
                        <input n:name="passwordVerify" class="form-control">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Zrušit</button>
                    <button n:name="save" class="btn btn-primary">Uložit heslo</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var el = document.getElementById('hesloModal');
    if (!el || typeof bootstrap === 'undefined') {
        return;
    }
    el.addEventListener('shown.bs.modal', function () {
        var input = el.querySelector('input[name="current"]');
        if (input) {
            input.focus();
        }
    });
    {if $otevritHesloModal}
    bootstrap.Modal.getOrCreateInstance(el).show();
    {/if}
});
</script>