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

<p>
    {{ formfield player.gender }}
<p>
<br>
<p>
    {{ formfield player.age }}
<p>
<br>
<p>
<!-- radio buttons -->
{{ formfield player.employment }}
</p>

<!-- hidden “Other” text box -->
<div id="other-wrapper" style="display:none; margin-top:1rem;">
    {{ formfield player.employment_other label='Please specify:' }}
</div>
<br>
<script>
    function toggleOther() {
        const otherChecked = document.querySelector(
            'input[name="employment"][value="other"]'
        ).checked;
        document.getElementById('other-wrapper').style.display =
            otherChecked ? 'block' : 'none';
    }

    // run once on load and every time a radio changes
    toggleOther();
    document.querySelectorAll('input[name="employment"]')
            .forEach(el => el.addEventListener('change', toggleOther));
</script>


<p>
    {{ formfield player.education }}
<p>
<br>

<p>
    {{ formfield player.income }}
<p>
<br>


<p>

{{ formfield player.region }}

</p>
<br>

<p>

{{ formfield player.born }}

</p>
<br>

<p>

{{ formfield player.father_born }}

</p>
<br>

<p>

{{ formfield player.mother_born }}

</p>
<br>

<p>
    {{ formfield player.party }}
<p>
<br>


<div id="party-other" style="display:none; margin-top:.5rem;">
    {{ formfield player.party_other label='Please specify:' }}
</div>
<br>

<p>
    {{ formfield player.register }}
<p>
<br>
<p>
    Where would you place yourself?
</p>
<p>
     The scale below represents the ideological spectrum from very liberal (0) to very conservative (100). The most centrist American is exactly at the middle (50).
</p>
<style>
  /* ——————— existing mgslider styles ——————— */
  .mgslider-wrapper   { border-spacing: 10px; }
  .mgslider-limit     {
    width: 10%;
    min-width: 75px;
    height: 40px;
    margin: 100px;          /* leave as-is if you like the spacing */
    text-align: center;
    background: transparent;
    border: none;
    font-variant-numeric: tabular-nums;
  }
  .mgslider-before    { height: 16px; width: 100%; background: #1e5bff; }
  .mgslider-feedback  { -webkit-user-select:none; -ms-user-select:none; user-select:none; }

  /* ——————— NEW: wrapper for labels + slider ——————— */
  .ideology-scale {
    display: flex;
    align-items: center;  /* vertically centers slider with the labels */
    gap: 1rem;            /* space between label ←→ slider ←→ label    */
  }
  .ideology-scale .label {
    min-width: 120px;
    text-align: center;
    font-weight: 600;
    line-height: 1.2;
  }
</style>

<div class="ideology-scale" id="slider_container">
  <span class="label">Very&nbsp;liberal&nbsp;</span>

  <!-- mgslider will print itself right in here -->
  <div id="sliders_here" style="flex:1;"></div>

  <span class="label">Very&nbsp;conservative&nbsp;</span>
</div>
    {{ formfield_errors 'place' }}

    <div id="sliders_here"></div>

    <script src="{{ static 'mgslider.js' }}"></script>

    <script>
        $(document).ready(function (event) {
            slider2 = new mgslider("place", 0 , 100, 1);
            slider2.print(document.getElementById("sliders_here"));
        });
    </script>
<br>

<p>
    {{ formfield player.vote2024 }}
</p>

<div id="vote2024-other" style="display:none; margin-top:.5rem;">
    {{ formfield player.vote2024_other label='Please specify:' }}
</div>
<br>

<p>
    {{ formfield player.vote2020 }}
</p>

<div id="vote2020-other" style="display:none; margin-top:.5rem;">
    {{ formfield player.vote2020_other label='Please specify:' }}
</div>
<br>

<script>
window.addEventListener('DOMContentLoaded', () => {

    const groups = ['party', 'vote2020', 'vote2024'];

    /** show / hide the wrapper that belongs to one field */
    function toggle(name) {
        const picked  = document.querySelector(`input[name="${name}"]:checked`);
        const wrapper = document.getElementById(`${name}-other`);
        if (!wrapper) return;

        /*  Show if a radio is checked and its value  OR its label text
            contains “other” (case-insensitive).                                */
        const show = picked &&
                     (/other/i.test(picked.value) ||
                      /other/i.test(picked.nextSibling?.textContent || ''));

        wrapper.style.display = show ? 'block' : 'none';
    }

    /* hook up each group once */
    groups.forEach(name => {
        const radios = document.querySelectorAll(`input[name="${name}"]`);
        radios.forEach(radio => radio.addEventListener('change', () => toggle(name)));
        toggle(name);                         // initial state on page load
    });
});
</script>
    <center><button class="btn btn-primary">Continue</button></center>

{{ endblock }}