{% 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">
    The rankings between myself and my peers were very fair.
  </div>
  <div class="card-body likert">
    {{ formfield 'fairness' }}

    <div class="likert-anchors">
      <span class="left">1<br>Strongly<br>Disagree</span>
      <span>2</span>
      <span>3</span>
      <span class="middle">4<br>Neither agree<br>nor disagree</span>
      <span>5</span>
      <span>6</span>
      <span class="right">7<br>Strongly<br>Agree</span>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    My performance was due to my effort/abilities.
  </div>
  <div class="card-body likert">
    {{ formfield 'effort' }}

    <div class="likert-anchors">
      <span class="left">1<br>Strongly<br>Disagree</span>
      <span>2</span>
      <span>3</span>
      <span class="middle">4<br>Neither agree<br>nor disagree</span>
      <span>5</span>
      <span>6</span>
      <span class="right">7<br>Strongly<br>Agree</span>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
     My performance was due to the set of puzzles I received.
  </div>
  <div class="card-body likert">
    {{ formfield 'puzzle_set' }}

    <div class="likert-anchors">
      <span class="left">1<br>Strongly<br>Disagree</span>
      <span>2</span>
      <span>3</span>
      <span class="middle">4<br>Neither agree<br>nor disagree</span>
      <span>5</span>
      <span>6</span>
      <span class="right">7<br>Strongly<br>Agree</span>
    </div>
  </div>
</div>


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

</div>
{% endblock %}