{{ block title }}
COVID and Flu
{{ 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">Were you eligible to get the flu vaccine in the LAST FLU SEASON?</div>
  {{ formfield 'flu_eligible' }}
</div>
<br>

<div class="q">
  <div class="q-title">Did you get the flu vaccine in the LAST FLU SEASON?</div>
  {{ formfield 'flu_vac' }}
</div>
<br>

<div class="q">
  <div class="q-title">What is your COVID-19 vaccine status?</div>
  {{ formfield 'covid_vaxx_status' }}
</div>
<br>

<div class="q">
  <div class="q-title">How many shots of COVID-19 vaccine did you get?</div>
  {{ formfield 'covid_shots' }}
</div>
<br>

<div class="q">
  <div class="q-title">Have you, your immediate family, and/or your friends been tested for coronavirus (COVID-19)?</div>
  {{ formfield 'contracted_covid' }}
</div>
<br>

<div class="q">
  <div class="q-title">
    How well or badly do you think the Government handled the issue of the Coronavirus?
  </div>
  <div class="followups">
    <div class="q">
      {{ form.gov_handling }}
      {% if form.gov_handling.errors %}
        <div class="otree-form-errors">{{ form.gov_handling.errors }}</div>
      {% endif %}
    </div>
      <br>
  <br>
<div class="q">
  <div class="q-title">
    How much confidence did you have in the NHS to respond to the Coronavirus outbreak in the UK?
  </div>
    <div class="q">
      {{ form.nhs_confidence }}
      {% if form.nhs_confidence.errors %}
        <div class="otree-form-errors">{{ form.nhs_confidence.errors }}</div>
      {% endif %}
    </div>
      <br>
  <br>
<div class="q">
  <div class="q-title">
    How much do you trust COVID-19 vaccines?
    </div>
    <div class="q">
      {{ form.vaccine_trust }}
      {% if form.vaccine_trust.errors %}
        <div class="otree-form-errors">{{ form.vaccine_trust.errors }}</div>
      {% endif %}
    </div>
  </div>
</div>
    <br>


    <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>

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