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

{% block content %}

<style>
/* === Likert (7-point scale) === */
.likert .controls {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0,1fr));
  justify-items: center;
  align-items: start;
  gap: 0;
  margin: 0;
  padding: 0;
}
.likert .controls label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  margin: 0;
  line-height: 1.2;
}
.likert .controls input[type="radio"] {
  width: 22px;
  height: 22px;
  margin: 0 0 6px 0;
}
.anchors7 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  width: 100%;
  text-align: center;
  margin-top: 8px;
}
.anchors7 span {
  display: block;
  font-size: .85rem;
  color: #6c757d;
  line-height: 1.2;
}

/* === Vertical radios (e.g., gender) === */
.vertical .controls {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}
.vertical .controls label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.vertical .controls input[type="radio"] {
  width: 18px;
  height: 18px;
}

/* === Two-column radios (e.g., grade status) === */
.two-col .controls {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  align-items: center;
  margin: 0;
  padding: 0;
}
.two-col .controls label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0;
}
</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>

<!-- Likert Example -->
<div class="card">
  <div class="card-header">
    Before today’s session, to what extent were you familiar with KenKen puzzles?
  </div>
  <div class="card-body likert">
    {{ formfield 'familiarity' }}
    <div class="anchors7">
      <span>1<br>Never heard<br>of it</span>
      <span>2</span>
      <span>3</span>
      <span>4<br>Heard of it<br>but never solved one</span>
      <span>5</span>
      <span>6</span>
      <span>7<br>Solve them<br>every day</span>
    </div>
  </div>
</div>

<!-- Vertical Example -->
<div class="card">
  <div class="card-header">Please indicate your gender.</div>
  <div class="card-body vertical">
    {{ formfield 'gender' }}
  </div>
</div>

<!-- Two Column Example -->
<div class="card">
  <div class="card-header">Current grade status: Please indicate your current year in school.</div>
  <div class="card-body two-col">
    {{ formfield 'grade_status' }}
  </div>
</div>

<!-- Normal Input Example -->
<div class="card">
  <div class="card-header">What is your current overall GPA?</div>
  <div class="card-body">
    {{ formfield 'gpa' }}
  </div>
</div>

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

{% endblock %}