{{ block title }}
Sociodemographic Information
{{ endblock }}
{{ block content }}
<style>
  .q { margin: 18px 0; }
  .q-title { font-weight: 600; margin-bottom: 8px; }
  .inline-input { max-width: 320px; }

  .slider-wrap { margin-top: 8px; }
  .slider-labels { display: flex; justify-content: space-between; font-size: 0.95em; margin-top: 6px; }
  .ticks { display: flex; justify-content: space-between; font-size: 0.85em; margin-top: 4px; }
  input[type="range"] { width: 100%; }

  .help { color: #444; font-size: 0.95em; margin-top: 6px; }

  .other-wrap { display: none; margin-top: 10px; }
  .selected-wrap { text-align: center; margin-top: 10px; }
  .selected-val {
    font-weight: 700;
    font-size: 1.25em;
    display: inline-block;
    min-width: 40px;
    visibility: hidden; /* hidden until moved */
  }
</style>

<div class="q">
  <div class="q-title">What is the first part of your postcode? (Eg: HD6, WF12)</div>
  <div class="inline-input">{{ formfield 'postcode_first_part' }}</div>
</div>
<br>
<div class="q">
  <div class="q-title">What is your sex?</div>
  {{ formfield 'gender' }}
</div>
<br>
<div class="q">
  <div class="q-title">What is your year of birth?</div>

  <div class="d-flex align-items-start" style="gap: 10px;"> <!-- control spacing here -->
    <div style="width: 220px;">
      {{ formfield 'birth_year' }}
    </div>
  </div>
</div>


<div class="q">
  <div class="q-title">Which category best describes you in terms of ethnicity?</div>
  {{ formfield 'ethnicity' }}
</div>
<br>
<div class="q">
  <div class="q-title">What is the highest school leaving certificate or school degree that you have obtained?</div>
  {{ formfield 'education' }}
</div>
<br>
<div class="q">
  <div class="q-title">Which of the following best describes your current marital status?</div>
  {{ formfield 'marital_status' }}

  <div id="marital_other_wrap" class="other-wrap">
    <div class="help"></div>
    <div class="inline-input">{{ formfield 'marital_other' }}</div>
  </div>
</div>
<br>

<div class="q">
  <div class="q-title">Which of the following best describes your current employment situation?</div>
  {{ formfield 'employment_status' }}

  <div id="employment_other_wrap" class="other-wrap">
    <div class="help"></div>
    <div class="inline-input">{{ formfield 'employment_other' }}</div>
  </div>
</div>
<br>

<div class="q">
  <div class="q-title">In which industry are you currently employed?</div>
           <p><i>If you are not currently working (including retired), select the industry you last worked in.
           If you are currently studying and have not worked before, select the industry that best matches your main field of study.</i></p>
  {{ formfield 'industry_sic_section' }}
</div>
<br>
<div class="q">
  <div class="q-title">
    Do you belong to any of the following groups? (Select all appropriate responses)
  </div>

  <div class="circle-checklist" style="margin-top: 12px;">

    <label class="circle-opt">
      <input type="checkbox" name="vuln_65plus" id="id_vuln_65plus">
      <span>You are 65 years old or over</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="vuln_live_with_65plus" id="id_vuln_live_with_65plus">
      <span>You live with one or more people who are 65 years old or over</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="vuln_health_condition" id="id_vuln_health_condition">
      <span>You have a chronic health condition (chronic long-term respiratory disease, chronic kidney disease, chronic liver disease, chronic neurological condition, spleen issues, a condition which causes a weakened immune system, cancer, being severely overweight, diabetes, high or low blood pressure, etc.)</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="vuln_children" id="id_vuln_children">
      <span>You have children</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="vuln_pregnant_now" id="id_vuln_pregnant_now">
      <span>You are/your partner is currently pregnant</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="vuln_pregnant_last_autumn_winter" id="id_vuln_pregnant_last_autumn_winter">
      <span>You were/your partner was pregnant last autumn/winter</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="vuln_informal_carer" id="id_vuln_informal_carer">
      <span>You informally (i.e. not for pay) care for someone with an illness or disability</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="vuln_care_facility" id="id_vuln_care_facility">
      <span>You are living in a long stay care facility</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="vuln_none" id="id_vuln_none">
      <span>I do not belong to any of these groups</span>
    </label>

  </div>
</div>
<br>

<div class="q">
  <div class="q-title">How many children do you have?</div>
  {{ formfield 'children' }}
</div>
<br>

<div class="q">
  <div class="q-title">How old are your children? Please fill in their ages from oldest to youngest. If you have more than 10 children, please choose your 10 youngest children.</div>
 <table class="table" style="max-width: 900px;">
    <thead>
    </thead>
    <tbody>
      <tr><td>Child #1</td><td>{{ formfield 'child_age_1' }}</td></tr>
      <tr><td>Child #2</td><td>{{ formfield 'child_age_2' }}</td></tr>
      <tr><td>Child #3</td><td>{{ formfield 'child_age_3' }}</td></tr>
      <tr><td>Child #4</td><td>{{ formfield 'child_age_4' }}</td></tr>
      <tr><td>Child #5</td><td>{{ formfield 'child_age_5' }}</td></tr>
      <tr><td>Child #6</td><td>{{ formfield 'child_age_6' }}</td></tr>
      <tr><td>Child #7</td><td>{{ formfield 'child_age_7' }}</td></tr>
      <tr><td>Child #8</td><td>{{ formfield 'child_age_8' }}</td></tr>
      <tr><td>Child #9</td><td>{{ formfield 'child_age_9' }}</td></tr>
      <tr><td>Child #10</td><td>{{ formfield 'child_age_10' }}</td></tr>
    </tbody>
  </table>
</div>
<br>

<div class="q">
  <div class="q-title">
    Which of the following applies to your children? (Select all appropriate responses)
  </div>

  <div class="circle-checklist" style="margin-top: 12px;">

    <label class="circle-opt">
      <input type="checkbox" name="child_underlying" id="id_child_underlying">
      <span>Has an underlying health condition</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="child_vax" id="id_child_vax">
      <span>Got the flu vaccine last flu season</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="child_flu" id="id_child_flu">
      <span>Caught the flu last flu season</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="child_none" id="id_child_none">
      <span>None of these apply to my child</span>
    </label>

  </div>
</div>
<br>
<style>
.circle-checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.circle-opt {
    display: flex;
    align-items: flex-start;   /* key fix */
    gap: 12px;
    line-height: 1.35;
    cursor: pointer;
}

.circle-opt input[type="checkbox"] {
    margin: 0;
    margin-top: 4px;           /* nudges circle to first line */
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    accent-color: #666;
}

.circle-opt span {
    display: block;
}
</style>
<script>
(function () {
  const none = document.getElementById('id_child_none');
  const others = [
    document.getElementById('id_child_underlying'),
    document.getElementById('id_child_vax'),
    document.getElementById('id_child_flu'),
  ];

  // If "none" checked -> uncheck others
  none.addEventListener('change', function () {
    if (none.checked) {
      others.forEach(el => el.checked = false);
    }
  });

  // If any other checked -> uncheck "none"
  others.forEach(el => {
    el.addEventListener('change', function () {
      if (el.checked) none.checked = false;
    });
  });
})();
</script>

<div class="q">
  <div class="q-title">
    How many people, including yourself, within each of the following age categories usually live in your household? Please enter the number "0" if no one in a category lives in your household.
  </div>

  <table class="household-age-table">
    <tr>

      <td class="age-input">{{ formfield 'age18' }}</td>
    </tr>
    <tr>
      <td class="age-input">{{ formfield 'age1864' }}</td>
    </tr>
    <tr>
      <td class="age-input">{{ formfield 'age65' }}</td>
    </tr>
  </table>
</div>
<br>

<style>
.household-age-table {
  width: 100%;
  max-width: 820px;
  border-collapse: separate;
  border-spacing: 0 10px;
  margin-top: 14px;
}

.household-age-table td {
  vertical-align: middle;
}

.age-label {
  width: 68%;
  padding-right: 18px;
  font-size: 16px;
  line-height: 1.35;
}

.age-input {
  width: 32%;
}

.age-input .form-control,
.age-input input[type="number"],
.age-input input[type="text"] {
  max-width: 180px;
}
</style>

<div class="q">
  <div class="q-title">
    What is your total annual gross income? (If you live with a partner, please indicate your combined gross income)
  </div>
  {{ formfield 'income_band' }}
</div>
<br>

<div class="q">
  <div class="q-title">Which of the following descriptions comes closest to how you feel about your household's income nowadays?</div>
  {{ formfield 'income_welfare' }}

  <div id="income_other_wrap" class="other-wrap">
    <div class="help"></div>
    <div class="inline-input">{{ formfield 'income_other' }}</div>
  </div>
</div>
<br>

<div class="q">
  <div class="q-title">
    In politics people sometimes talk of “left” and “right”.
Where would you place yourself on this scale,
where 0 means the left and 10 means the right?
  </div>
  {{ formfield 'political' }}
</div>
<br>

<div class="q">
    <div class="q-title">
        How much do you like or dislike each of the following parties?
    </div>

    <table class="party-like-table">
        <thead>
            <tr>
                <th style="text-align:left; padding-right:16px;">Party</th>
                <th>0<br><span style="font-weight:normal;">Strongly dislike</span></th>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
                <th>7</th>
                <th>8</th>
                <th>9</th>
                <th>10<br><span style="font-weight:normal;">Strongly like</span></th>
                <th>Don't know</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="text-align:left;">Conservatives</td>
                <td><input type="radio" name="party_like_conservative" value="0" required></td>
                <td><input type="radio" name="party_like_conservative" value="1"></td>
                <td><input type="radio" name="party_like_conservative" value="2"></td>
                <td><input type="radio" name="party_like_conservative" value="3"></td>
                <td><input type="radio" name="party_like_conservative" value="4"></td>
                <td><input type="radio" name="party_like_conservative" value="5"></td>
                <td><input type="radio" name="party_like_conservative" value="6"></td>
                <td><input type="radio" name="party_like_conservative" value="7"></td>
                <td><input type="radio" name="party_like_conservative" value="8"></td>
                <td><input type="radio" name="party_like_conservative" value="9"></td>
                <td><input type="radio" name="party_like_conservative" value="10"></td>
                <td><input type="radio" name="party_like_conservative" value="9999"></td>
            </tr>

            <tr>
                <td style="text-align:left;">Labour</td>
                <td><input type="radio" name="party_like_labour" value="0" required></td>
                <td><input type="radio" name="party_like_labour" value="1"></td>
                <td><input type="radio" name="party_like_labour" value="2"></td>
                <td><input type="radio" name="party_like_labour" value="3"></td>
                <td><input type="radio" name="party_like_labour" value="4"></td>
                <td><input type="radio" name="party_like_labour" value="5"></td>
                <td><input type="radio" name="party_like_labour" value="6"></td>
                <td><input type="radio" name="party_like_labour" value="7"></td>
                <td><input type="radio" name="party_like_labour" value="8"></td>
                <td><input type="radio" name="party_like_labour" value="9"></td>
                <td><input type="radio" name="party_like_labour" value="10"></td>
                <td><input type="radio" name="party_like_labour" value="9999"></td>
            </tr>

            <tr>
                <td style="text-align:left;">Liberal Democrats</td>
                <td><input type="radio" name="party_like_libdem" value="0" required></td>
                <td><input type="radio" name="party_like_libdem" value="1"></td>
                <td><input type="radio" name="party_like_libdem" value="2"></td>
                <td><input type="radio" name="party_like_libdem" value="3"></td>
                <td><input type="radio" name="party_like_libdem" value="4"></td>
                <td><input type="radio" name="party_like_libdem" value="5"></td>
                <td><input type="radio" name="party_like_libdem" value="6"></td>
                <td><input type="radio" name="party_like_libdem" value="7"></td>
                <td><input type="radio" name="party_like_libdem" value="8"></td>
                <td><input type="radio" name="party_like_libdem" value="9"></td>
                <td><input type="radio" name="party_like_libdem" value="10"></td>
                <td><input type="radio" name="party_like_libdem" value="9999"></td>
            </tr>
        </tbody>
    </table>
</div>

<br>
<style>
.party-like-table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 10px;
    font-size: 15px;
}

.party-like-table th,
.party-like-table td {
    border: 1px solid #ccc;
    padding: 8px 6px;
    text-align: center;
    vertical-align: middle;
}

.party-like-table th:first-child,
.party-like-table td:first-child {
    min-width: 180px;
}

.party-like-table thead th {
    background: #f7f7f7;
    font-weight: 600;
}

.party-like-table input[type="radio"] {
    transform: scale(1.05);
}
</style>

<div class="q">
  <div class="q-title">Do you generally think of yourself as a little closer to one of the parties than the others? If yes, which party?</div>
  {{ formfield 'party_closeness' }}

  <div id="party_other_wrap" class="other-wrap">
    <div class="help"></div>
    <div class="inline-input">{{ formfield 'party_closeness_other' }}</div>
  </div>
</div>
<br>

<div class="q">
  <div class="q-title">
    How is your health in general?
  </div>
  {{ formfield 'health_general' }}
</div>
<br>


<div class="q">
  <div class="q-title">Do you regularly take any prescription medication?</div>
  {{ formfield 'prescription_medication' }}
</div>
<br>
<script>
  function toggleOther(fieldName, otherValue, wrapId) {
    const radios = document.querySelectorAll(`input[name="${fieldName}"]`);
    const wrap = document.getElementById(wrapId);

    function update() {
      const checked = document.querySelector(`input[name="${fieldName}"]:checked`);
      wrap.style.display = (checked && checked.value === otherValue) ? 'block' : 'none';
    }

    radios.forEach(r => r.addEventListener('change', update));
    update();
  }

  // Assumes the "Other" choice value is exactly 'Other' in your models.py
  toggleOther('marital_status', 'Other', 'marital_other_wrap');
  toggleOther('employment_status', 'Other', 'employment_other_wrap');
  toggleOther('income_welfare', 'Other', 'income_other_wrap');
  toggleOther('party_closeness', 'Other', 'party_other_wrap');

</script>


<center><button class="btn btn-primary">Continue</button></center>

{{ endblock }}