{% 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">Please answer the following questions.</h2>

<div class="card">
  <div class="card-header">
    How often did you think about how your performance ranked relative to the others in your group?
  </div>
  <div class="card-body likert">
    {% formfield player.think_about_ranking %}

    <div class="likert-anchors">
      <span class="left">1<br>Never</span>
      <span>2</span>
      <span>3</span>
      <span class="middle">4<br>Sometimes</span>
      <span>5</span>
      <span>6</span>
      <span class="right">7<br>Very<br>Often</span>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    Were you nervous or concerned about how well you were performing relative to others in your group?
  </div>
  <div class="card-body likert">
    {% formfield player.nervous %}

    <div class="likert-anchors">
      <span class="left">1<br>Not at all<br>nervous</span>
      <span>2</span>
      <span>3</span>
      <span class="middle">4<br>Somewhat<br>nervous</span>
      <span>5</span>
      <span>6</span>
      <span class="right">7<br>Very<br>nervous</span>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
     Did thinking about how your performance ranked compared to other participants interfere with your ability to concentrate on the problems?
  </div>
  <div class="card-body likert">
    {% formfield player.distraction %}

    <div class="likert-anchors">
      <span class="left">1<br>Not at<br>all</span>
      <span>2</span>
      <span>3</span>
      <span class="middle">4<br>Somewhat</span>
      <span>5</span>
      <span>6</span>
      <span class="right">7<br>Very much</span>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
     Did thinking about how your performance ranked compared to other participants motivate you to work harder?
  </div>
  <div class="card-body likert">
    {% formfield player.motivation %}

    <div class="likert-anchors">
      <span class="left">1<br>Not at<br>all</span>
      <span>2</span>
      <span>3</span>
      <span class="middle">4<br>Somewhat</span>
      <span>5</span>
      <span>6</span>
      <span class="right">7<br>Very much</span>
    </div>
  </div>
</div>

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

</div>
{% endblock %}