{% extends "global/Page.html" %}
{{ block title }}
<p class="d-none">Codice personale</p>
{{ endblock }}

{% block content %}
{{ include C.form_css }}
<style>
    .code-input {
        font-size: 1.8rem;
        font-weight: 600;
        letter-spacing: .3em;
        text-align: center;
        text-transform: uppercase;
        font-family: "Consolas", "Menlo", monospace;
        max-width: 12rem;
    }
</style>

<div class="container">
    <h2>Il suo codice personale</h2>

    <div class="card mb-4 bg-light">
        <div class="card-body">
            <p class="fs-5">
                Inserisca il <strong>codice personale</strong> che le è stato assegnato nel primo questionario
                (lo trova nel PDF che ha scaricato). Il codice è formato da <strong>due lettere seguite da due
                numeri</strong>, ad esempio KT48.
            </p>

            <label for="id_codice" class="form-label fw-medium">Codice personale</label>
            <input type="text" class="form-control code-input {{ if form.codice.errors }}is-invalid{{ endif }}"
                   id="id_codice" name="codice" autocomplete="off"
                   autocapitalize="characters" spellcheck="false">
            {{ formfield_errors 'codice' }}

            <div class="mt-4">
                {{ formfield 'codice_perso' }}
            </div>
        </div>
    </div>
</div>

{{ include C.next_progress }}

<script>
document.addEventListener('DOMContentLoaded', function () {
    const input = document.getElementById('id_codice');
    const lost = document.getElementById('id_codice_perso');
    input.addEventListener('input', function () {
        input.value = input.value.replace(/[^A-Za-z0-9]/g, '').toUpperCase().slice(0, 4);
        input.classList.remove('is-invalid');
    });
    function toggle() {
        input.disabled = lost.checked;
        if (lost.checked) input.value = '';
    }
    lost.addEventListener('change', toggle);
    toggle();
});
</script>
{% endblock %}