{% extends "global/Page.html" %}
{% load static %}

{% block content %}

<style>
/* 7 equal columns for the options row */
.likert .controls {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr);
  justify-items: center;    /* <-- center each radio inside its column */
  align-items: start;
  gap: 0;
  padding: 0;
  margin: 0;
}

/* Each option: stack bubble over (empty) label content */
.likert .controls label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  line-height: 1.2;
}

.likert .controls input[type="radio"] {
  width: 22px;
  height: 22px;
  margin: 0 0 6px 0;
}

/* Anchors row under same 7 columns */
.likert-anchors {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-top: 8px;
}

.likert-anchors span {
  font-size: .85rem;
  color: #6c757d;
  line-height: 1.2;
}

.likert-anchors .left   { grid-column: 1; }
.likert-anchors .middle { grid-column: 4; }
.likert-anchors .right  { grid-column: 7; }
</style>

 <h2 class="section-title">On a scale from 1 to 7, please rate the degree to which you agree or disagree with the following statements.</h2>

<div class="card">
  <div class="card-header">
    On a scale of very easy to very difficult, how difficult were your assigned puzzles?
  </div>
  <div class="card-body likert">
    {{ formfield 'own_difficulty' }}

    <div class="likert-anchors">
      <span class="left">1<br>Very<br>easy</span>
      <span>2</span>
      <span>3</span>
      <span class="middle">4<br>Moderate</span>
      <span>5</span>
      <span>6</span>
      <span class="right">7<br>Very<br>Difficult</span>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    On the following scale, rate whether you think your peers had more or less difficult puzzles.
  </div>
  <div class="card-body likert">
    {{ formfield 'peer_difficulty' }}

    <div class="likert-anchors">
      <span class="left">1<br>Much<br>easier</span>
      <span>2</span>
      <span>3</span>
      <span class="middle">4<br>Same</span>
      <span>5</span>
      <span>6</span>
      <span class="right">7<br>Much<br>Harder</span>
    </div>
  </div>
</div>

  <div class="actions">
    {{ next_button }}
  </div>

</div>
{% endblock %}