{% load otree %}

{#{{ block title }}Survey{{ endblock }}#}


{{ block content }}
<style>
    .question-block {
        margin-top: 12px;
    }
    .question-block p {
        margin-bottom: 4px;
    }
    .question-block .form-group {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .question-block .mb-3,
    .question-block .otree-form-group {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .question-block .form-control {
        margin-top: -10px !important;
        margin-bottom: 0 !important;
    }
</style>

{#<p>We are interested in your opinions and experiences about certain aspects of young adult life.</p>#}
<p>Please answer the following questions before the task.</p>

{% if player.treatment == 'ethnicity' or player.treatment == 'race' %}
    {{ formfield 'ethnic_generations' }}
    {{ formfield 'ethnic_identify_strength' }}
{#    {{ formfield 'ethnicity' }}#}
{#    <div id="ethnicGroupOtherWrap">#}
{#      {{ formfield 'ethnic_group_other' }}#}
{#    </div>#}
    {{ formfield 'ethnic_roommate_pref' }}
    <div class="question-block">
        <p>List two advantages of having a roommate of your own race/ethnicity. (Max 5 words each).</p>
        {{ formfield 'ethnic_adv_same_1' label='' }}
        {{ formfield 'ethnic_adv_same_2' label='' }}
    </div>
    <br>

    <div class="question-block">
        <p>List two advantages of having a roommate of a different race/ethnicity. (Max 5 words each).</p>
        {{ formfield 'ethnic_adv_diff_1' label='' }}
        {{ formfield 'ethnic_adv_diff_2' label='' }}
    </div>
{% elif player.treatment == 'gender' %}
{#    {{ formfield 'gender' }}#}
    {{ formfield 'gender_identify_strength' }}
    {{ formfield 'gender_importance' }}
    {{ formfield 'gender_living_pref' }}
    <div class="question-block">
      <p>List two advantages of living in a mixed-sex setting. (Max 5 words each).</p>
      {{ formfield 'gender_adv_coed_1' label='' }}
      {{ formfield 'gender_adv_coed_2' label='' }}
    </div>
    <div class="question-block">
      <p>List two advantages of living in a single-sex setting. (Max 5 words each).</p>
      {{ formfield 'gender_adv_single_1' label='' }}
      {{ formfield 'gender_adv_single_2' label='' }}
    </div>
{% else %}
{#    {{ formfield 'control_age' }}#}
    {{ formfield 'control_cable_tv' }}
    {{ formfield 'control_roommate' }}
    {{ formfield 'control_roommate_pref' }}
    <div class="question-block">
        <p>List two advantages of living with a quiet roommate. (Max 5 words each).</p>
        {{ formfield 'control_adv_quiet_1' label='' }}
        {{ formfield 'control_adv_quiet_2' label='' }}
    </div>
   <br>
    <div class="question-block">
        <p>List two advantages of living with a social roommate. (Max 5 words each).</p>
        {{ formfield 'control_adv_social_1' label='' }}
        {{ formfield 'control_adv_social_2' label='' }}
    </div>
{% endif %}

<br>
<div style="text-align:center">
    {{ next_button }}
</div>
{% if player.treatment == 'ethnicity' or player.treatment == 'race' %}
<script>
  (function () {
    const wrap = document.getElementById('ethnicGroupOtherWrap');
    if (!wrap) return;
    const inputs = document.querySelectorAll('input[name="ethnicity"]');
    function toggle() {
      const selected = document.querySelector('input[name="ethnicity"]:checked');
      const show = selected && selected.value === 'Other';
      wrap.style.display = show ? '' : 'none';
    }
    inputs.forEach(el => el.addEventListener('change', toggle));
    toggle();
  })();
</script>
{% endif %}
{% if debug_autofill %}
<script>
  (function () {
    function pick(arr) { return arr[Math.floor(Math.random() * arr.length)]; }

    const groups = {};
    document.querySelectorAll('input[type="radio"]').forEach(el => {
      if (!el.name) return;
      groups[el.name] = groups[el.name] || [];
      groups[el.name].push(el);
    });
    Object.values(groups).forEach(group => {
      if (!group.length) return;
      pick(group).click();
    });

    document.querySelectorAll('input[type="text"], textarea').forEach(el => {
      if (!el.value) el.value = 'debug_' + Math.random().toString(36).slice(2, 8);
      el.dispatchEvent(new Event('input', { bubbles: true }));
      el.dispatchEvent(new Event('change', { bubbles: true }));
    });

    {% if debug_auto_submit %}
    setTimeout(() => {
      const btn = document.querySelector('button.otree-btn-next, button.btn-primary, button[type="submit"]');
      if (btn) btn.click();
    }, 500);
    {% endif %}

  })();
</script>
{% endif %}
{{ endblock }}