{{ block title }}
{{ 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>

{{ if player.flu_vac == 1 }}
<div class="q">
  <div class="q-title">
    Why did you get the flu vaccine? (Select all appropriate responses)
  </div>

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

    <label class="circle-opt">
      <input type="checkbox" name="flu_reason_trust" id="id_flu_reason_trust">
      <span>I trust vaccines</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="flu_reason_self" id="id_flu_reason_self">
      <span>To protect myself against the flu</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="flu_reason_children" id="id_flu_reason_children">
      <span>To protect my child(ren) against the flu</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="flu_reason_family_friends" id="id_flu_reason_family_friends">
      <span>To protect my family (other than my children) and friends against the flu</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="flu_reason_beyond" id="id_flu_reason_beyond">
      <span>To protect others beyond my family and friends against the flu</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="flu_reason_fear_symptoms" id="id_flu_reason_fear_symptoms">
      <span>I fear how severe the flu symptoms might be if I get the flu (e.g., coughing, sneezing, fever, sore throat)</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="flu_reason_at_risk" id="id_flu_reason_at_risk">
      <span>I have an underlying health condition and/or belong to an at-risk group</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="flu_reason_employer_req" id="id_flu_reason_employer_req">
      <span>It is a requirement from my employer</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="flu_reason_workplace_offered" id="id_flu_reason_workplace_offered">
      <span>It was offered at my workplace</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="flu_reason_hcp" id="id_flu_reason_hcp">
      <span>It was recommended by a healthcare professional (e.g., my doctor, nurse, etc.)</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="flu_reason_family_friend" id="id_flu_reason_family_friend">
      <span>It was recommended by a family member and/or friend</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="flu_reason_social_norm" id="id_flu_reason_social_norm">
      <span>Most of my friends/family typically get the vaccine</span>
    </label>

  <label class="circle-opt">
  <input type="checkbox"
         name="flu_reason_other"
         id="id_flu_reason_other"
         data-other-target="flu_other_wrap">
  <span>Other (please specify):</span>
</label>

<div id="flu_other_wrap" class="other-wrap" style="display:none; margin-left: 30px;">
  <div class="inline-input">
    {{ form.flu_reason_other_text }}
  </div>
</div>

  </div>
</div>
<br>
{{ elif player.flu_vac == 2 }}
<div class="q">
  <div class="q-title">
    Why did you not get the flu vaccine? (Select all appropriate responses)
  </div>

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

    <label class="circle-opt">
      <input type="checkbox" name="novax_reason_distrust" id="id_novax_reason_distrust">
      <span>I don't trust vaccines</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="novax_reason_not_at_risk" id="id_novax_reason_not_at_risk">
      <span>I am not at risk of getting the flu</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="novax_reason_mild_symptoms" id="id_novax_reason_mild_symptoms">
      <span>If I get the flu, the symptoms are mild and bearable</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="novax_reason_didnt_know" id="id_novax_reason_didnt_know">
      <span>I did not know I was supposed to get the vaccine</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="novax_reason_too_expensive" id="id_novax_reason_too_expensive">
      <span>It is too expensive</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="novax_reason_no_time" id="id_novax_reason_no_time">
      <span>I don't have the time to get it</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="novax_reason_forgot" id="id_novax_reason_forgot">
      <span>I wanted to but then forgot to get it</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="novax_reason_not_available" id="id_novax_reason_not_available">
      <span>It was not available when I wanted to get it</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="novax_reason_scared_needles" id="id_novax_reason_scared_needles">
      <span>I am scared of needles</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="novax_reason_underlying_shouldnt" id="id_novax_reason_underlying_shouldnt">
      <span>I have an underlying health condition and therefore should not get the vaccine</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="novax_reason_scared_side_effects" id="id_novax_reason_scared_side_effects">
      <span>I am scared of side effects from the vaccine</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="novax_reason_negative_experience" id="id_novax_reason_negative_experience">
      <span>I (or my family/friends) had a negative experience with a previous flu vaccine</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="novax_reason_not_recommended" id="id_novax_reason_not_recommended">
      <span>It was not recommended by a healthcare professional (e.g., my doctor, nurse, etc.)</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="novax_reason_social_norm_no" id="id_novax_reason_social_norm_no">
      <span>Most of my friends/family do not typically get the vaccine</span>
    </label>

   <label class="circle-opt">
  <input type="checkbox"
         name="novax_reason_other"
         id="id_novax_reason_other"
         data-other-target="novax_other_wrap">
  <span>Other (please specify):</span>
</label>

<div id="novax_other_wrap" class="other-wrap" style="display:none; margin-left: 30px;">
  <div class="inline-input">
    {{ form.novax_reason_other_text }}
  </div>
</div>
  </div>
</div>

<br>
{{ endif }}

{{ if player.covid_shots >= 1 }}
<div class="q">
  <div class="q-title">
    Why did you get the COVID-19 vaccine? (Select all appropriate responses)
  </div>

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

    <label class="circle-opt">
      <input type="checkbox" name="covid_reason_trust" id="id_covid_reason_trust">
      <span>I trust vaccines</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_reason_self" id="id_covid_reason_self">
      <span>To protect myself against COVID-19</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_reason_children" id="id_covid_reason_children">
      <span>To protect my child(ren) against COVID-19</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_reason_family_friends" id="id_covid_reason_family_friends">
      <span>To protect my family (other than my children) and friends against COVID-19</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_reason_beyond" id="id_covid_reason_beyond">
      <span>To protect others beyond my family and friends against COVID-19</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_reason_fear_symptoms" id="id_covid_reason_fear_symptoms">
      <span>I fear how severe the COVID-19 symptoms (e.g. coughing, sneezing, fever, sore throat) might be if I get it</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_reason_at_risk" id="id_covid_reason_at_risk">
      <span>I have an underlying health condition and/or belong to an at-risk group</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_reason_employer_req" id="id_covid_reason_employer_req">
      <span>It was a requirement from my employer</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_reason_workplace_offered" id="id_covid_reason_workplace_offered">
      <span>It was offered at my workplace</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_reason_hcp" id="id_covid_reason_hcp">
      <span>It was recommended by a healthcare professional (e.g. my doctor, nurse, etc.)</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_reason_family_friend" id="id_covid_reason_family_friend">
      <span>It was recommended by a family member and/or friend</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_reason_social_norm" id="id_covid_reason_social_norm">
      <span>Most of my friends/family typically get the vaccine</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox"
             name="covid_reason_other"
             id="id_covid_reason_other"
             data-other-target="covid_other_wrap">
      <span>Other (please specify):</span>
    </label>

    <div id="covid_other_wrap" class="other-wrap" style="display:none; margin-left: 30px;">
      <div class="inline-input">
        {{ form.covid_reason_other_text }}
      </div>
    </div>

  </div>
</div>
<br>

{{ elif player.covid_shots == 0 }}
<div class="q">
  <div class="q-title">
    Why did you not get the COVID-19 vaccine? (Select all appropriate responses)
  </div>

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

    <label class="circle-opt">
      <input type="checkbox" name="covid_novax_reason_distrust" id="id_covid_novax_reason_distrust">
      <span>I don't trust vaccines</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_novax_reason_not_at_risk" id="id_covid_novax_reason_not_at_risk">
      <span>I am/was not at risk of getting COVID-19</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_novax_reason_mild_symptoms" id="id_covid_novax_reason_mild_symptoms">
      <span>If I get COVID-19, the symptoms are mild and bearable</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_novax_reason_didnt_know" id="id_covid_novax_reason_didnt_know">
      <span>I did not know I was supposed to get the vaccine</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_novax_reason_too_expensive" id="id_covid_novax_reason_too_expensive">
      <span>It is too expensive</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_novax_reason_no_time" id="id_covid_novax_reason_no_time">
      <span>I don't have the time to get it</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_novax_reason_forgot" id="id_covid_novax_reason_forgot">
      <span>I wanted to but then forgot to get it</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_novax_reason_not_available" id="id_covid_novax_reason_not_available">
      <span>It was not available when I wanted to get it</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_novax_reason_scared_needles" id="id_covid_novax_reason_scared_needles">
      <span>I fear needles</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_novax_reason_underlying_shouldnt" id="id_covid_novax_reason_underlying_shouldnt">
      <span>I have an underlying health condition and therefore should not get the vaccine</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_novax_reason_scared_side_effects" id="id_covid_novax_reason_scared_side_effects">
      <span>I fear side effects from the vaccine</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_novax_reason_negative_experience" id="id_covid_novax_reason_negative_experience">
      <span>I (or my family/friends) had a negative experience with a previous COVID-19 vaccine</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_novax_reason_not_recommended" id="id_covid_novax_reason_not_recommended">
      <span>It was not recommended by a healthcare professional (e.g. my doctor, nurse, etc.)</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="covid_novax_reason_social_norm_no" id="id_covid_novax_reason_social_norm_no">
      <span>Most of my friends/family do not typically get the vaccine</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox"
             name="covid_novax_reason_other"
             id="id_covid_novax_reason_other"
             data-other-target="covid_novax_other_wrap">
      <span>Other (please specify):</span>
    </label>

    <div id="covid_novax_other_wrap" class="other-wrap" style="display:none; margin-left: 30px;">
      <div class="inline-input">
        {{ form.covid_novax_reason_other_text }}
      </div>
    </div>

  </div>
</div>
<br>
{{ endif }}
    <style>
/* compact, clean layout */
.circle-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 900px;
}

.circle-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

/* hide default checkbox UI and draw radio-like circle */
.circle-opt input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #888;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  margin: 0;
  cursor: pointer;
}

/* filled dot when checked */
.circle-opt input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2b2b2b;
  transform: translate(-50%, -50%);
}

.circle-opt span{
  line-height: 1.25;
}
</style>

<script>
(function () {
  function toggleWrap(checkbox) {
    const targetId = checkbox.getAttribute('data-other-target');
    if (!targetId) return;
    const wrap = document.getElementById(targetId);
    if (!wrap) return;
    wrap.style.display = checkbox.checked ? 'block' : 'none';
  }

  const otherBoxes = document.querySelectorAll('input[type="checkbox"][data-other-target]');

  // initial state (important when coming back / refresh)
  otherBoxes.forEach(cb => toggleWrap(cb));

  // react to changes
  otherBoxes.forEach(cb => {
    cb.addEventListener('change', function () {
      toggleWrap(cb);
    });
  });
})();
</script>

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