{% extends "global/Page.html" %}
{{ block title }}
<p class="d-none">Le opinioni delle altre persone</p>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
{{ endblock }}

{% block content %}

<style>
    .otree-body { max-width: 800px; }
    ._formfield > label.col-form-label { display: none !important; }
    input[type="number"].form-control { max-width: 150px; }
    
    .question-block {
        padding: 1rem 0;
    }
    .question-block:not(:last-child) {
        border-bottom: 1px dashed #dee2e6;
    }
</style>

<div class="container">
    
    <!-- Info Alert Box -->
    <div class="alert alert-secondary border p-3 mb-4" role="alert">
        <h5 class="mb-2 text-dark">Percezioni sulle opinioni altrui</h5>
        <p class="mb-0 text-dark">
            Un campione rappresentativo di oltre 3000 persone in Italia sta partecipando a questo studio. 
            Secondo lei, in ciascuno dei seguenti gruppi, quante persone su 100 pensano che sarebbe più appropriato che una donna usasse il titolo professionale declinato al maschile (es. avvocato, ingegnere)?
        </p>
    </div>

    <!-- CARD 1: ITALIA -->
    <div class="card mb-3 bg-light">
        <div class="card-body">
            <h6 class="fw-bold mb-3 text-secondary">Contesto Nazionale</h6>
            
            <div class="question-block pt-0" data-group="uomini in Italia">
                <p class="mb-2">Secondo Lei, su 100 <strong>uomini</strong> in Italia, quanti pensano che sarebbe più appropriato che una donna usasse il titolo professionale declinato al maschile (es. avvocato, ingegnere)?</p>
                <div>{{ formfield player.so_naz_uomini }}</div>
            </div>
            
            <div class="question-block pb-0" data-group="donne in Italia">
                <p class="mb-2">Secondo Lei, su 100 <strong>donne</strong> in Italia, quante pensano che sarebbe più appropriato che una donna usasse il titolo professionale declinato al maschile (es. avvocato, ingegnere)?</p>
                <div>{{ formfield player.so_naz_donne }}</div>
            </div>
        </div>
    </div>

    <!-- CARD 2: REGIONE -->
    <div class="card mb-3 bg-light">
        <div class="card-body">
            <h6 class="fw-bold mb-3 text-secondary">Contesto Regionale</h6>
            
            <div class="question-block pt-0" data-group="uomini {{ reg_label }}">
                <p class="mb-2">Su 100 <strong>uomini</strong> {{ reg_label }}, quanti pensano che sarebbe più appropriato che una donna usasse il titolo professionale declinato al maschile (es. avvocato, ingegnere)?</p>
                <div>{{ formfield player.so_reg_uomini }}</div>
            </div>
            
            <div class="question-block pb-0" data-group="donne {{ reg_label }}">
                <p class="mb-2">Su 100 <strong>donne</strong> {{ reg_label }}, quante pensano che sarebbe più appropriato che una donna usasse il titolo professionale declinato al maschile (es. avvocato, ingegnere)?</p>
                <div>{{ formfield player.so_reg_donne }}</div>
            </div>
        </div>
    </div>

</div>

{{ include C.next_progress }}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll('.card .card-body .question-block').forEach(function (body) {
        const input = body.querySelector('input[type="number"]');
        if (!input) return;

        // Recupera la stringa specifica del gruppo definita nel data-group del blocco
        const groupInfo = body.getAttribute('data-group') || '';

        const box = document.createElement('div');
        box.className = 'py-1 px-2 small mt-2 d-none fw-semibold text-muted';
        const controls = body.querySelector('.controls') || input.parentElement;
        controls.appendChild(box);

        input.addEventListener('input', function () {
            const val = input.value.trim();
            if (val === '' || isNaN(val) || val < 0 || val > 100) {
                box.classList.add('d-none');
                return;
            }
            // Output dinamico basato sul valore inserito e sulle info del gruppo
            box.innerHTML = 'Ha risposto: <span class="fw-bold text-dark">' + val + ' su 100 ' + groupInfo + '</span>, lo ritengono più appropriato.';
            box.classList.remove('d-none');
        });
    });
});
</script>
{% endblock %}