{{ block title }}

{{ endblock }}
{{ block content }}

<div style="max-width: 980px; margin: 0 auto; line-height: 1.55;">

  <div style="display:flex; justify-content:flex-end; margin-bottom:10px;">
    <button type="button" class="btn btn-secondary" onclick="toggleInfo(event)">Show Information</button>
  </div>

  <div id="infoPanel" style="display:none; border:1px solid #ddd; padding:14px 16px; border-radius:6px; background:#fafafa; margin-bottom:16px;">
    <div><style>
  .info-wrap { max-width: 900px; margin: 0 auto; line-height: 1.55; }
  .info-title { text-align: center; font-weight: 700; margin-bottom: 18px; }
  .info-p { margin: 10px 0; }
  .info-list { margin: 10px 0 18px 22px; }
  .info-list li { margin: 10px 0; }
  .section { margin-top: 18px; }
  .subhead { font-weight: 700; margin: 16px 0 6px; }
</style>

<div class="info-wrap">

  <div class="info-title">Information</div>

  <p class="info-p">
    Please read the following carefully. Imagine a hypothetical future respiratory pandemic.
  </p>
  <p>
    The disease can spread between people and may lead to serious illness for some individuals.
  </p>

  <ul class="info-list">
    <li>
      <strong>Spreads internationally:</strong>
      It emerges in one or more locations and then spreads to multiple countries over a relatively short period,
      leading to widespread outbreaks in many regions.
    </li>

    <li>
      <strong>Can cause serious health impacts:</strong>
      It can result in severe illness for some infected individuals and may lead to hospitalizations and deaths,
      increasing overall mortality.
    </li>

    <li>
      <strong>May prompt public-health measures:</strong>
      Governments and public-health authorities may introduce measures to reduce transmission, such as guidance
      to stay at home when ill, recommendations or requirements to wear face coverings in certain settings, limits
      on the size of gatherings, temporary restrictions on visits to hospitals or care homes, adjustments to school
      or workplace attendance (including temporary remote learning or remote work), and restrictions on travel or
      movement in high-risk areas.
    </li>

    <li>
      <strong>Can disrupt daily life and the economy:</strong>
      These health impacts and policy responses may disrupt normal activities and services (for example, reduced staffing,
      delays in non-essential services, and interruptions to supply chains) and may reduce business activity and employment
      in affected sectors.
    </li>

    <li>
      <strong>Is respiratory and transmitted between people:</strong>
      The disease spreads person-to-person through close contact, especially when individuals sneeze, cough, or touch.
      The disease can be passed from person to person before symptoms appear in the infector.
    </li>
  </ul>

  <p class="info-p">
    At the start there is no pre-existing immunity and no vaccine or treatment. The figures you will see are population
    averages; your personal risk can differ.
  </p>

  <div class="section">
    <p class="info-p">Two characteristics summarize the disease:</p>

    <p class="info-p">
      <strong>Transmissibility:</strong>
      Average number of people one infected person infects.
    </p>

    <p class="info-p">
      <strong>Severity:</strong>
      The number of deaths per 1,000 confirmed cases.
    </p>
  </div>

</div></div>
  </div>

  <div style="font-weight:600; margin-bottom:18px;">
    Please treat the scenario below independently of all others. Answer as if this were the only information you had.
  </div>

  <p>
    The virus is now in widespread community circulation and will affect the entire population,
    with more severe impacts on the <strong>{{ impacted }}</strong>.
  </p>

  <div style="margin-top:22px;">
    <div>
      <strong>Transmissibility</strong>:
      <em>{{ t_sentence }}</em>
    </div>
    <div style="text-align:center; margin:14px 0;">
      <img src="{% static t_fig %}" style="max-width:100%; height:auto;" alt="Transmissibility figure">
    </div>
  </div>

  <div style="margin-top:22px;">
    <div>
      <strong>Severity</strong>:
      <em>{{ s_sentence }}</em>
    </div>
    <div style="text-align:center; margin:14px 0;">
      <img src="{% static s_fig %}" style="max-width:100%; height:auto;" alt="Severity figure">
    </div>

  </div>

  <div style="margin-top:24px; text-align:center;">
    <button class="btn btn-primary">Continue</button>
  </div>
</div>

<script>
  function toggleInfo(e){
    const panel = document.getElementById('infoPanel');
    const open = panel.style.display === 'block';
    panel.style.display = open ? 'none' : 'block';
    e.target.textContent = open ? 'Show information' : 'Hide information';
  }
</script>

{{ endblock }}