{{ block title }}Survey 2/2{{ endblock }}

{% block content %}
<p>Please indicate to what extent you feel each of the following emotions <strong>right now</strong>.</p>

<style>
  /* --- Shared controls --- */
  input[type=radio]{ accent-color:#2b77ff; transform: scale(2.5); cursor:pointer; }

  /* --- Desktop table --- */
  .desktop-table{ display:none; }
  .table-wrap{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    border:1px solid #e5e5e5; border-radius:10px;
  }
  table.likert{
    width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed;
    font-family:Arial, sans-serif;
    min-width: 900px; /* Increased from 720px to accommodate 7 scale options */
  }
  .likert th,.likert td{ border:1px solid #ddd; padding:10px; text-align:center; background:#fff; }
  .likert th:first-child,.likert td:first-child{ text-align:left; min-width:16rem; position:sticky; left:0; background:#fff; }

  /* Optional: subtle highlight for checked cell (no JS required) */
  .likert td:has(> input[type=radio]:checked){ background:#f5faff; box-shadow: inset 0 0 0 2px #2b77ff22; }

  /* --- Mobile accordion --- */
  .mobile-accordion{ display:block; }
  .acc-card{ border:1px solid #e5e5e5; border-radius:12px; margin-bottom:12px; background:#fff; overflow:hidden; }
  .acc-card summary{ list-style:none; padding:14px 16px; font-weight:600; cursor:pointer; }
  .acc-card summary::-webkit-details-marker{ display:none; }
  .acc-body{ padding:10px 14px 14px 14px; border-top:1px solid #eee; }
  .choice{ border:1px solid #ddd; border-radius:10px; padding:12px 14px; margin-bottom:10px; }
  .choice label{ display:flex; gap:12px; align-items:center; cursor:pointer; user-select:none; }
  .choice input[type=radio]:checked + span{
    background:#f5faff; box-shadow: inset 0 0 0 2px #2b77ff22; border-radius:6px; padding:4px 6px;
  }

  /* --- Breakpoint --- */
  @media (min-width: 769px){
    .desktop-table{ display:block; }
    .mobile-accordion{ display:none; }
  }

  .center-next{ text-align:center; margin-top:24px; }
</style>

<div class="desktop-table">
  <div class="table-wrap">
    <table class="likert">
      <thead>
        <tr>
          <th></th>
          <th>Not at all</th>
          <th>Slightly</th>
          <th>Somewhat</th>
          <th>Moderately</th>
          <th>Quite a bit</th>
          <th>Very much</th>
          <th>Extremely</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Upset</td>
          <td><input class="tbl-radio" type="radio" name="upset" value="1" required></td>
          <td><input class="tbl-radio" type="radio" name="upset" value="2"></td>
          <td><input class="tbl-radio" type="radio" name="upset" value="3"></td>
          <td><input class="tbl-radio" type="radio" name="upset" value="4"></td>
          <td><input class="tbl-radio" type="radio" name="upset" value="5"></td>
          <td><input class="tbl-radio" type="radio" name="upset" value="6"></td>
          <td><input class="tbl-radio" type="radio" name="upset" value="7"></td>
        </tr>
        <tr>
          <td>Hostile</td>
          <td><input class="tbl-radio" type="radio" name="hostile" value="1" required></td>
          <td><input class="tbl-radio" type="radio" name="hostile" value="2"></td>
          <td><input class="tbl-radio" type="radio" name="hostile" value="3"></td>
          <td><input class="tbl-radio" type="radio" name="hostile" value="4"></td>
          <td><input class="tbl-radio" type="radio" name="hostile" value="5"></td>
          <td><input class="tbl-radio" type="radio" name="hostile" value="6"></td>
          <td><input class="tbl-radio" type="radio" name="hostile" value="7"></td>
        </tr>
        <tr>
          <td>Alert</td>
          <td><input class="tbl-radio" type="radio" name="alert" value="1" required></td>
          <td><input class="tbl-radio" type="radio" name="alert" value="2"></td>
          <td><input class="tbl-radio" type="radio" name="alert" value="3"></td>
          <td><input class="tbl-radio" type="radio" name="alert" value="4"></td>
          <td><input class="tbl-radio" type="radio" name="alert" value="5"></td>
          <td><input class="tbl-radio" type="radio" name="alert" value="6"></td>
          <td><input class="tbl-radio" type="radio" name="alert" value="7"></td>
        </tr>
        <tr>
          <td>Ashamed</td>
          <td><input class="tbl-radio" type="radio" name="ashamed" value="1" required></td>
          <td><input class="tbl-radio" type="radio" name="ashamed" value="2"></td>
          <td><input class="tbl-radio" type="radio" name="ashamed" value="3"></td>
          <td><input class="tbl-radio" type="radio" name="ashamed" value="4"></td>
          <td><input class="tbl-radio" type="radio" name="ashamed" value="5"></td>
          <td><input class="tbl-radio" type="radio" name="ashamed" value="6"></td>
          <td><input class="tbl-radio" type="radio" name="ashamed" value="7"></td>
        </tr>
        <tr>
          <td>Inspired</td>
          <td><input class="tbl-radio" type="radio" name="inspired" value="1" required></td>
          <td><input class="tbl-radio" type="radio" name="inspired" value="2"></td>
          <td><input class="tbl-radio" type="radio" name="inspired" value="3"></td>
          <td><input class="tbl-radio" type="radio" name="inspired" value="4"></td>
          <td><input class="tbl-radio" type="radio" name="inspired" value="5"></td>
          <td><input class="tbl-radio" type="radio" name="inspired" value="6"></td>
          <td><input class="tbl-radio" type="radio" name="inspired" value="7"></td>
        </tr>
        <tr>
          <td>Nervous</td>
          <td><input class="tbl-radio" type="radio" name="nervous" value="1" required></td>
          <td><input class="tbl-radio" type="radio" name="nervous" value="2"></td>
          <td><input class="tbl-radio" type="radio" name="nervous" value="3"></td>
          <td><input class="tbl-radio" type="radio" name="nervous" value="4"></td>
          <td><input class="tbl-radio" type="radio" name="nervous" value="5"></td>
          <td><input class="tbl-radio" type="radio" name="nervous" value="6"></td>
          <td><input class="tbl-radio" type="radio" name="nervous" value="7"></td>
        </tr>
        <tr>
          <td>Determined</td>
          <td><input class="tbl-radio" type="radio" name="determined" value="1" required></td>
          <td><input class="tbl-radio" type="radio" name="determined" value="2"></td>
          <td><input class="tbl-radio" type="radio" name="determined" value="3"></td>
          <td><input class="tbl-radio" type="radio" name="determined" value="4"></td>
          <td><input class="tbl-radio" type="radio" name="determined" value="5"></td>
          <td><input class="tbl-radio" type="radio" name="determined" value="6"></td>
          <td><input class="tbl-radio" type="radio" name="determined" value="7"></td>
        </tr>
        <tr>
          <td>Attentive</td>
          <td><input class="tbl-radio" type="radio" name="attentive" value="1" required></td>
          <td><input class="tbl-radio" type="radio" name="attentive" value="2"></td>
          <td><input class="tbl-radio" type="radio" name="attentive" value="3"></td>
          <td><input class="tbl-radio" type="radio" name="attentive" value="4"></td>
          <td><input class="tbl-radio" type="radio" name="attentive" value="5"></td>
          <td><input class="tbl-radio" type="radio" name="attentive" value="6"></td>
          <td><input class="tbl-radio" type="radio" name="attentive" value="7"></td>
        </tr>
        <tr>
          <td>Afraid</td>
          <td><input class="tbl-radio" type="radio" name="afraid" value="1" required></td>
          <td><input class="tbl-radio" type="radio" name="afraid" value="2"></td>
          <td><input class="tbl-radio" type="radio" name="afraid" value="3"></td>
          <td><input class="tbl-radio" type="radio" name="afraid" value="4"></td>
          <td><input class="tbl-radio" type="radio" name="afraid" value="5"></td>
          <td><input class="tbl-radio" type="radio" name="afraid" value="6"></td>
          <td><input class="tbl-radio" type="radio" name="afraid" value="7"></td>
        </tr>
        <tr>
          <td>Active</td>
          <td><input class="tbl-radio" type="radio" name="active" value="1" required></td>
          <td><input class="tbl-radio" type="radio" name="active" value="2"></td>
          <td><input class="tbl-radio" type="radio" name="active" value="3"></td>
          <td><input class="tbl-radio" type="radio" name="active" value="4"></td>
          <td><input class="tbl-radio" type="radio" name="active" value="5"></td>
          <td><input class="tbl-radio" type="radio" name="active" value="6"></td>
          <td><input class="tbl-radio" type="radio" name="active" value="7"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div class="mobile-accordion" id="mobile-acc">
  <details class="acc-card" open>
    <summary>Upset</summary>
    <div class="acc-body">
      <div class="choice"><label><input class="acc-radio" type="radio" name="upset" value="1" required><span>Not at all</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="upset" value="2"><span>Slightly</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="upset" value="3"><span>Somewhat</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="upset" value="4"><span>Moderately</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="upset" value="5"><span>Quite a bit</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="upset" value="6"><span>Very much</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="upset" value="7"><span>Extremely</span></label></div>
    </div>
  </details>

  <details class="acc-card">
    <summary>Hostile</summary>
    <div class="acc-body">
      <div class="choice"><label><input class="acc-radio" type="radio" name="hostile" value="1" required><span>Not at all</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="hostile" value="2"><span>Slightly</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="hostile" value="3"><span>Somewhat</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="hostile" value="4"><span>Moderately</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="hostile" value="5"><span>Quite a bit</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="hostile" value="6"><span>Very much</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="hostile" value="7"><span>Extremely</span></label></div>
    </div>
  </details>

  <details class="acc-card">
    <summary>Alert</summary>
    <div class="acc-body">
      <div class="choice"><label><input class="acc-radio" type="radio" name="alert" value="1" required><span>Not at all</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="alert" value="2"><span>Slightly</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="alert" value="3"><span>Somewhat</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="alert" value="4"><span>Moderately</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="alert" value="5"><span>Quite a bit</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="alert" value="6"><span>Very much</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="alert" value="7"><span>Extremely</span></label></div>
    </div>
  </details>

  <details class="acc-card">
    <summary>Ashamed</summary>
    <div class="acc-body">
      <div class="choice"><label><input class="acc-radio" type="radio" name="ashamed" value="1" required><span>Not at all</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="ashamed" value="2"><span>Slightly</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="ashamed" value="3"><span>Somewhat</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="ashamed" value="4"><span>Moderately</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="ashamed" value="5"><span>Quite a bit</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="ashamed" value="6"><span>Very much</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="ashamed" value="7"><span>Extremely</span></label></div>
    </div>
  </details>

  <details class="acc-card">
    <summary>Inspired</summary>
    <div class="acc-body">
      <div class="choice"><label><input class="acc-radio" type="radio" name="inspired" value="1" required><span>Not at all</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="inspired" value="2"><span>Slightly</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="inspired" value="3"><span>Somewhat</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="inspired" value="4"><span>Moderately</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="inspired" value="5"><span>Quite a bit</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="inspired" value="6"><span>Very much</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="inspired" value="7"><span>Extremely</span></label></div>
    </div>
  </details>

  <details class="acc-card">
    <summary>Nervous</summary>
    <div class="acc-body">
      <div class="choice"><label><input class="acc-radio" type="radio" name="nervous" value="1" required><span>Not at all</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="nervous" value="2"><span>Slightly</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="nervous" value="3"><span>Somewhat</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="nervous" value="4"><span>Moderately</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="nervous" value="5"><span>Quite a bit</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="nervous" value="6"><span>Very much</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="nervous" value="7"><span>Extremely</span></label></div>
    </div>
  </details>

  <details class="acc-card">
    <summary>Determined</summary>
    <div class="acc-body">
      <div class="choice"><label><input class="acc-radio" type="radio" name="determined" value="1" required><span>Not at all</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="determined" value="2"><span>Slightly</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="determined" value="3"><span>Somewhat</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="determined" value="4"><span>Moderately</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="determined" value="5"><span>Quite a bit</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="determined" value="6"><span>Very much</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="determined" value="7"><span>Extremely</span></label></div>
    </div>
  </details>

  <details class="acc-card">
    <summary>Attentive</summary>
    <div class="acc-body">
      <div class="choice"><label><input class="acc-radio" type="radio" name="attentive" value="1" required><span>Not at all</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attentive" value="2"><span>Slightly</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attentive" value="3"><span>Somewhat</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attentive" value="4"><span>Moderately</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attentive" value="5"><span>Quite a bit</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attentive" value="6"><span>Very much</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="attentive" value="7"><span>Extremely</span></label></div>
    </div>
  </details>

  <details class="acc-card">
    <summary>Afraid</summary>
    <div class="acc-body">
      <div class="choice"><label><input class="acc-radio" type="radio" name="afraid" value="1" required><span>Not at all</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="afraid" value="2"><span>Slightly</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="afraid" value="3"><span>Somewhat</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="afraid" value="4"><span>Moderately</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="afraid" value="5"><span>Quite a bit</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="afraid" value="6"><span>Very much</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="afraid" value="7"><span>Extremely</span></label></div>
    </div>
  </details>

  <details class="acc-card">
    <summary>Active</summary>
    <div class="acc-body">
      <div class="choice"><label><input class="acc-radio" type="radio" name="active" value="1" required><span>Not at all</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="active" value="2"><span>Slightly</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="active" value="3"><span>Somewhat</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="active" value="4"><span>Moderately</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="active" value="5"><span>Quite a bit</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="active" value="6"><span>Very much</span></label></div>
      <div class="choice"><label><input class="acc-radio" type="radio" name="active" value="7"><span>Extremely</span></label></div>
    </div>
  </details>
</div>

<div class="center-next">
  {% next_button %}
</div>

<script>
  // Disable hidden layout’s radios so only one set submits.
  const mql = window.matchMedia("(min-width: 769px)");

  function applyLayout(){
    const desktopOn = mql.matches;
    document.querySelectorAll(".tbl-radio").forEach(el => el.disabled = !desktopOn);
    document.querySelectorAll(".acc-radio").forEach(el => el.disabled = desktopOn);
  }

  // Initial + on change
  applyLayout();
  if(mql.addEventListener){ mql.addEventListener("change", applyLayout); }
  else if(mql.addListener){ mql.addListener(applyLayout); } // Safari fallback
</script>
{% endblock %}