{{ block title }}Commenti{{ endblock }}
{{ block content }}

<style>
    body {
        font-size: 18px;  /* try 16–20px depending on preference */
    }
</style>

<p>Accogliamo con piacere eventuali Suoi commenti su questo questionario.</p>

{% for field in form %}
    {% if field.name != 'fullscreen_popup_log' %}
    <div class="mb-3">
        {{ field.label }}    
        {{ field }}
    </div>
    {% endif %}
{% endfor %}

<div class="text-center">
    <button class="btn btn-primary" type="submit">Avanti</button>
</div>

    <input type="hidden" name="fullscreen_popup_log" id="fullscreen_popup_log" value="{{ player.field_maybe_none('fullscreen_popup_log') }}">

    {% include "_templates/global/scripts.html" %}

    {% include "_templates/global/styles.html" %}

<script>
        document.addEventListener('DOMContentLoaded', function () {
            const isFullscreen =
                !!document.fullscreenElement ||
                (window.innerHeight >= screen.height - 5 &&
                window.innerWidth >= screen.width - 5);

                const field = document.getElementById('fullscreen_popup_log');

            // clean initial value
            if (field.value === 'None') {
                field.value = '';
            }
            if (!isFullscreen) {
                const field = document.getElementById('fullscreen_popup_log');
                const pageName = 'feedback';

                if (field.value.trim() === '') {
                    field.value = pageName;
                } else if (!field.value.split(',').includes(pageName)) {
                    field.value += ',' + pageName;
                }

                alert("Per favore usa la modalità schermo intero.");
            }
        });
</script>
{{ endblock }}