{{define "content"}}
<div class="mb-5">
  <div class="flex items-center justify-between mb-1">
    <span class="text-xs font-medium text-gray-500">Question {{.N}} of {{.Total}}</span>
    <span class="text-xs text-gray-400">{{.ProgressPct}}% done</span>
  </div>
  <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
    <div class="h-full bg-blue-500 rounded-full transition-all"
         style="width: {{.ProgressPct}}%"></div>
  </div>
</div>

<div class="bg-white border border-gray-200 rounded-lg p-5 mb-5 shadow-sm">
  <p class="text-gray-800 leading-relaxed text-base">{{.Question.Text}}</p>
  {{if .Question.Source}}
  <p class="text-xs text-gray-400 mt-3">{{.Question.Source}}</p>
  {{end}}
</div>

<form method="post" action="/test/{{.TestID}}/q/{{.N}}">
  <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">

  <div class="space-y-3 mb-6">
    {{range .Answers}}
    <label class="flex items-start gap-4 p-4 bg-white border-2 border-gray-200 rounded-xl
                  cursor-pointer hover:border-blue-400 hover:bg-blue-50 transition-all
                  has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50">
      <input type="radio" name="answer_id" value="{{.ID}}"
             class="mt-0.5 text-blue-600 focus:ring-blue-500 flex-shrink-0 w-4 h-4">
      <span class="text-sm text-gray-800 leading-relaxed">{{.Text}}</span>
    </label>
    {{end}}
  </div>

  <button type="submit"
          class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-xl
                 text-sm font-semibold shadow-sm">
    {{if lt .N .Total}}Next question{{else}}Finish test{{end}}
  </button>
</form>
{{end}}