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

{% block title %}Demographics and Task Feedback{% endblock %}

{% block content %}
<style>
body { font-family: "Segoe UI", Roboto, sans-serif; }

.section {
  margin: 40px auto;
  text-align: center;
  max-width: 800px;
}

/* ---------- Likert Card Layout ---------- */
.likert-scale {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  margin-top: 12px;
}

.likert-option {
  flex: 1;
  min-width: 90px;
  border: 2px solid #444;
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  font-size: 13px;
  user-select: none;
}

.likert-option input[type="radio"] {
  display: none;
}

.likert-option span.num {
  font-weight: 700;
  font-size: 18px;
  display: block;
  margin-bottom: 4px;
}

.likert-option:hover {
  border-color: #007acc;
  transform: scale(1.03);
}

.likert-option input[type="radio"]:checked + span.num,
.likert-option input[type="radio"]:checked ~ span {
  color: #fff;
}

.likert-option input[type="radio"]:checked + span.num {
  background: #99afbd;
  color: #fff;
}

.likert-option input[type="radio"]:checked ~ span {
  background: #99afbd;
  border-color: #99afbd;
}

.likert-option input[type="radio"]:checked + span.num,
.likert-option input[type="radio"]:checked ~ span.label-text {
  color: #fff;
}

.likert-option input[type="radio"]:checked ~ .likert-option {
  background: #99afbd;
}

/* ---------- Gender ---------- */
.gender-options {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 6px;
  font-size: 14px;
  margin-top: 8px;
}

.gender-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* ---------- Age ---------- */
.age input[type="number"],
.age input[type="text"] {
  width: 120px;
  text-align: center;
  padding: 6px 8px;
  margin-top: 8px;
}

/* ---------- Buttons ---------- */
.otree-btn-next {
  margin-top: 30px;
}
</style>

<!-- Familiarity -->
<div class="section">
  <h4>How familiar are you with letter search tasks?</h4>
  <div class="likert-scale">
    <label class="likert-option">
      <input type="radio" name="familiarity" value="1" required>
      <span class="num">1</span>
      <span class="label-text">I have never heard of them</span>
    </label>
    <label class="likert-option">
      <input type="radio" name="familiarity" value="2">
      <span class="num">2</span>
    </label>
    <label class="likert-option">
      <input type="radio" name="familiarity" value="3">
      <span class="num">3</span>
    </label>
    <label class="likert-option">
      <input type="radio" name="familiarity" value="4">
      <span class="num">4</span>
      <span class="label-text">I have done a few before</span>
    </label>
    <label class="likert-option">
      <input type="radio" name="familiarity" value="5">
      <span class="num">5</span>
    </label>
    <label class="likert-option">
      <input type="radio" name="familiarity" value="6">
      <span class="num">6</span>
    </label>
    <label class="likert-option">
      <input type="radio" name="familiarity" value="7">
      <span class="num">7</span>
      <span class="label-text">I do them frequently</span>
    </label>
  </div>
</div>

<!-- Enjoyment -->
<div class="section">
  <h4>To what extent did you enjoy completing the task?</h4>
  <div class="likert-scale">
    <label class="likert-option">
      <input type="radio" name="enjoyment" value="1" required>
      <span class="num">1</span>
      <span class="label-text">Not at all</span>
    </label>
    <label class="likert-option">
      <input type="radio" name="enjoyment" value="2">
      <span class="num">2</span>
    </label>
    <label class="likert-option">
      <input type="radio" name="enjoyment" value="3">
      <span class="num">3</span>
    </label>
    <label class="likert-option">
      <input type="radio" name="enjoyment" value="4">
      <span class="num">4</span>
      <span class="label-text">Somewhat</span>
    </label>
    <label class="likert-option">
      <input type="radio" name="enjoyment" value="5">
      <span class="num">5</span>
    </label>
    <label class="likert-option">
      <input type="radio" name="enjoyment" value="6">
      <span class="num">6</span>
    </label>
    <label class="likert-option">
      <input type="radio" name="enjoyment" value="7">
      <span class="num">7</span>
      <span class="label-text">Very much</span>
    </label>
  </div>
</div>

<!-- Gender -->
<div class="section">
  <h4>Gender</h4>
  <div class="gender-options">
    <label><input type="radio" name="gender" value="Male" required> Male</label>
    <label><input type="radio" name="gender" value="Female"> Female</label>
    <label><input type="radio" name="gender" value="Non-binary / Third gender"> Non-binary / Third Gender</label>
    <label><input type="radio" name="gender" value="Prefer not to say"> Prefer not to say</label>
  </div>
</div>

<!-- Age -->
<div class="section age">
  <h4>Age</h4>
  <input type="number" name="age" min="10" max="100" required>
</div>

{{ next_button }}
{% endblock %}