{{ block title }}
    Questionnaire
{{ endblock }}

{{ block content }}
    <br>
    <p>First, please answer the following questions:</p>
    {{ formfield player.age }}
    {{ formfield player.gender }}
    {{ formfield player.education }}
    <br>
    <label>What is your primary field of study or work?</label>
    <div style="columns: 2;">
        {{ formfield player.field_of_work }}
    </div>
    <div id="other-box" style="display: none; margin-top:10px;">
        {{ formfield player.field_of_work_other }}
    </div>
    <br><br><br>

    <p>Please indicate how much you agree with the following statements from 1 (Strongly Disagree) to 5 (Strongly Agree):</p>
    <style>
    .likert-table {
        width: 100%;
        border-collapse: collapse;
    }
    .likert-table th,
    .likert-table td {
        border-bottom: 1px solid #ccc;
        padding: 12px 25px;
        text-align: center;
    }
    .likert-table th:first-child {
        border: none;
        padding: 0;
        width: 0;
    }
    .likert-table th, .likert-table td {
        padding: 12px 25px;
    }
    .likert-table th:not(:first-child) {
        font-size: 14px;
        font-weight: 520;
    }
    .likert-radio {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    }
    .likert-table td:not(.statement-text) {
        width: 300px;
    }
    .likert-table .statement-text {
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        width: 675px;
        text-align: left;
        white-space: normal;
        font-size: 16px;
        padding-left: 12px;
        padding-right: 10px;
    }
    .likert-table td:not(.statement-text),
    .likert-table th:not(:first-child) {
        width: 70px;
    }
    .likert-table tr:nth-child(n+2):nth-child(odd) {
        background-color: #ffffff;
    }
    .likert-table tr:nth-child(n+2):nth-child(even) {
        background-color: #f7f7f7;
    }
    .likert-table tr:nth-child(2) td {
        border-top: 1px solid #ccc;
    }
    .likert-table tr:first-child th:last-child {
        border-right: none;
    }
    .likert-table tr:not(:first-child) td:last-child {
        border-right: 1px solid #ccc;
    }
    </style>

    <table class="likert-table">
    <tr>
        <th></th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>
    {% for field, text in statements %}
        <tr>
            <td class="statement-text">{{ text }}</td>
            {% for val in options %}
                <td>
                    <input type="radio" class="likert-radio" name="{{ field }}" value="{{ val }}">
                </td>
            {% endfor %}
        </tr>
    {% endfor %}
    </table>
    <script>
    document.addEventListener("change", function() {
        const otherBox = document.getElementById("other-box");
        const selected = document.querySelector("input[name='field_of_work']:checked");
        if (selected && selected.value === "O") {
            otherBox.style.display = "block";
        } else {
            otherBox.style.display = "none";
        }
    });
    </script>

    <br>
    <div class="question-group" style="margin-bottom: 10px;">
    <br><br>
        <div style="color:#333; margin-bottom:8px;">
            What is your overall perception of algorithms (such as Artificial Intelligence)? (1: Strongly Disagree, 5: Strongly Agree)
        </div>
    {{ formfield player.algorithms_3 }}
    {{ formfield player.algorithms_2 }}
    {{ formfield player.algorithms_4 }}
    {{ formfield player.familiarity }}
    {{ formfield player.algorithms_1 }}
    </div>
    <div class="question-group" style="margin-top: 40px;">
        {{ formfield player.text_box }}
        <div class="required-note" style="font-size:14px; color:#666; margin-top:4px;">
            Please note that this is a required field.
        </div>
        <div id="char-count" style="margin-top:6px; font-size:14px; color:#666;">
            0 / 50 (minimum)
        </div>
        <br>
    </div>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const textarea = document.querySelector('textarea[name="text_box"]');
        const counter = document.getElementById('char-count');
        const minChars = 50;

        textarea.addEventListener('input', function () {
            const length = textarea.value.length;
            counter.textContent = `${length} / ${minChars} (minimum)`;
        });
    });
    </script>

    <br><br>
    <button class="btn btn-primary">Submit</button>

{{ endblock }}