{{define "content"}}
{{$n := .NCorrect}}
{{$total := .Test.NQuestions}}

<!-- Score summary -->
<div class="bg-white border border-gray-200 rounded-xl p-6 mb-6 shadow-sm text-center">
  <p class="text-4xl font-bold text-gray-900 mb-1">{{$n}} / {{$total}}</p>
  <p class="text-lg text-gray-500 mb-1">{{pct $n $total}}%</p>
  {{if .TimeTaken}}
  <p class="text-sm text-gray-400">Time: {{.TimeTaken}}</p>
  {{end}}
</div>

<!-- Cat reaction -->
{{if .CatURL}}
<div class="flex justify-center mb-6">
  <img src="{{.CatURL}}"
       alt=""
       class="rounded-2xl shadow-md max-h-64 w-auto object-cover">
</div>
{{end}}

<!-- Per-question review -->
<div class="space-y-5 mb-8">
  {{range $i, $item := .Items}}
  <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">

    <!-- Question header -->
    <div class="px-5 pt-5 pb-3 border-b border-gray-100">
      <div class="flex items-start gap-3">
        <span class="mt-0.5 flex-shrink-0 text-lg leading-none">
          {{if $item.Unanswered}}⬜{{else if $item.UserRight}}✅{{else}}❌{{end}}
        </span>
        <p class="text-gray-800 text-sm leading-relaxed font-medium">{{$item.Question.Text}}</p>
      </div>
      {{if $item.Question.Source}}
      <p class="text-xs text-gray-400 mt-2 pl-8">{{$item.Question.Source}}</p>
      {{end}}
    </div>

    <!-- Answers -->
    <ul class="divide-y divide-gray-100">
      {{range $item.Answers}}
      <li class="px-5 py-3 flex items-start gap-3
        {{if and .IsCorrect .UserPicked}}bg-green-50
        {{else if .IsCorrect}}bg-green-50
        {{else if .UserPicked}}bg-red-50
        {{end}}">
        <span class="flex-shrink-0 w-5 text-base leading-none mt-0.5">
          {{if and .IsCorrect .UserPicked}}✅
          {{else if .IsCorrect}}✅
          {{else if .UserPicked}}❌
          {{else}}&nbsp;{{end}}
        </span>
        <span class="text-sm leading-relaxed
          {{if .IsCorrect}}text-green-800 font-medium
          {{else if .UserPicked}}text-red-700
          {{else}}text-gray-600{{end}}">
          {{.Text}}
        </span>
      </li>
      {{end}}
    </ul>

  </div>
  {{end}}
</div>

<!-- Actions -->
<div class="flex gap-3">
  <a href="/test/new"
     class="flex-1 text-center bg-blue-600 hover:bg-blue-700 text-white py-3 px-4
            rounded-xl text-sm font-semibold shadow-sm">
    Take another test
  </a>
  <a href="/"
     class="flex-1 text-center border border-gray-300 text-gray-700 hover:bg-gray-50
            py-3 px-4 rounded-xl text-sm font-medium">
    Library
  </a>
</div>
{{end}}