{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
{% endblock %}

{% block content %}
<style>
.big-options label {
    font-size:16pt !important;
}



label.otree-choice-label,
.form-check {
    display: flex;
    align-items: center;
    gap: 12px;          /* 👈 smaller gap = closer text */
    margin-bottom: 12px;
}

/* Remove default Bootstrap vertical offsets */
.form-check-input,
input[type="radio"] {
    margin-top: 0 !important;
}

/* Scale radio without shifting it */
input[type="radio"] {
    transform: scale(1.1);
    flex-shrink: 0;           /* prevents shrinking */
}

/* Text alignment */
label.otree-choice-label span,
.form-check-label {
    font-size: 24pt !important;
    line-height: 1.2;
}
</style>

<style>
    /* Global font and color settings */
    #otree-content, p, li, div, h2, h4, span, b, strong, label, select, input {
        font-size: 16pt !important;
        color: black !important;
    }

    /* Tighten all paragraph gaps */
    p {
        margin-bottom: 2px !important;
    }

    /* Title box matching your requested style */
    .custom-title-box {
        background-color: #d1e7dd;
        border: 1px solid #badbcc;
        color: #0f5132 !important;
        text-align: center;
        padding: 1rem;
        border-radius: 0.25rem;
        margin-bottom: 1.5rem;
    }

    .custom-title-box h2 {
        font-size: 22pt !important;
        font-weight: bold;
        color: #0f5132 !important;
        margin: 0.5;
    }

    hr {
        border-top: 1px solid #ccc;
        margin: 1rem 0; /* Reduced from 2rem to make sections closer */
    }

    /* EXTREME GAP REDUCTION */
    .content-container .mb-4,
    .content-container .mb-3,
    .form-group,
    .controls {
        margin-bottom: 0rem !important;
        padding-bottom: 0rem !important;
    }

    /* Pulls the input fields/options up to the bold text */
    .controls select,
    .controls input,
    .controls .form-check {
        margin-top: 0px !important;
    }

    /* Specific fix for "If Other" section */
    .mt-2 {
        margin-top: 0px !important;
    }

    .content-container input.form-control {
        margin-top: 0px !important;
    }

    /* Hide the conditional question by default */
    #chain_number_row {
        display: none;
        margin-left: 2rem;
        border-left: 2px solid #b0b0b0;
        padding-left: 1rem;
    }

    hr {
    border: none;                     /* remove default border */
    border-top: 1px solid #808080;    /* very light gray line */
    margin: 1.5rem 0;                 /* spacing above and below */
    background-color: transparent;    /* ensures no extra color */
}
</style>


<div class="custom-title-box">
        <h2>QUESTIONS ABOUT YOU</h2>
</div>

<div class="content-container">
    <div class="mb-4">
        <p>
            In order to help us understand why your responses might be different from those of other participants in this study, please answer the following questions.
        </p>
    </div>

    <hr>

    <div class="question-block">


        <p><strong>Please indicate your gender </strong></p>
        {{ formfield 'Gender' label="" }}


            {{ formfield 'Gender_self' label="Please specify your gender when selecting 'I prefer to self-define'" }}
            </div>
    </div>

    <hr>

    <div class="question-block">
        <p><strong>Please indicate your age (in years) </strong></p>
        {{ formfield 'Age' label="" }}
    </div>

    <hr>

    <div class="question-block">
        <p><strong>Please indicate the number of years of your full-time work experience </strong></p>
        {{ formfield 'WorkExperience' label="" }}
    </div>

    <hr>

    <div class="question-block">
        <p><strong>Please indicate the number of years you have worked (either part-time or full-time) in the food industry </strong></p>
        {{ formfield 'FoodIndustry' label="" }}
    </div>

</div>

<p class="mt-5">Please click <strong>‘Next’</strong> to finish.</p>

<div class="text-start">
    {{ next_button }}
</div>


<script>
    document.addEventListener("DOMContentLoaded", function() {
        // 1. Identify the 'Gender_self' input and its container
        // Note: names in querySelector are case-sensitive to match your models.py
        const selfInput = document.querySelector('input[name="Gender_self"]');

        if (selfInput) {
            const wrapper = selfInput.closest('.form-group') || selfInput.closest('.mb-3');
            if (wrapper) wrapper.id = "gender_self_wrapper";

            function toggleGenderSelf() {
                const radios = document.getElementsByName('Gender');
                let shouldShow = false;

                radios.forEach(radio => {
                    if (radio.checked) {
                        // Check if the internal value is exactly the string you used in choices
                        if (radio.value === "I prefer to self-define") {
                            shouldShow = true;
                        }
                    }
                });

                if (wrapper) {
                    wrapper.style.display = shouldShow ? 'block' : 'none';
                }
            }

            // Listen for any changes on the form
            document.querySelector('form').addEventListener('change', toggleGenderSelf);

            // Run once on load to start in the correct state
            toggleGenderSelf();
        }
    });
</script>

{% endblock %}