{{define "content"}}
<div class="flex items-center justify-between mb-5">
  <h1 class="text-xl font-bold text-gray-800">Test History</h1>
  <a href="/test/new"
     class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold
            px-4 py-2 rounded-lg shadow-sm">
    Take a test
  </a>
</div>

<!-- Aggregate stat -->
{{if gt .TotalAnswered 0}}
<div class="bg-white border border-gray-200 rounded-xl p-5 mb-6 shadow-sm flex items-center gap-4">
  <div class="text-3xl font-bold text-gray-900">{{pct .TotalCorrect .TotalAnswered}}%</div>
  <div>
    <p class="text-sm font-medium text-gray-700">Overall accuracy</p>
    <p class="text-xs text-gray-400">{{.TotalCorrect}} correct out of {{.TotalAnswered}} answered</p>
  </div>
</div>
{{end}}

<!-- Past tests -->
{{if .Items}}
<div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden mb-6">
  <div class="divide-y divide-gray-100">
    {{range .Items}}
    <div class="flex items-center justify-between px-5 py-4 hover:bg-gray-50 transition-colors">
      <div>
        <p class="text-sm font-medium text-gray-800">
          {{.NCorrect}} / {{.NQuestions}}
          <span class="text-gray-400 font-normal">({{pct .NCorrect .NQuestions}}%)</span>
        </p>
        <p class="text-xs text-gray-400 mt-0.5">{{.CreatedAt.Format "2 Jan 2006, 15:04"}}</p>
      </div>
      <a href="/test/{{.ID}}/results"
         class="text-xs text-blue-600 hover:text-blue-800 font-medium">
        Review →
      </a>
    </div>
    {{end}}
  </div>
</div>
{{else}}
<div class="text-center py-12 text-gray-400">
  <p class="text-sm">No completed tests yet.</p>
</div>
{{end}}

<!-- Weak spots -->
{{if .WeakSpots}}
<h2 class="text-base font-semibold text-gray-700 mb-3">Weak spots</h2>
<div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
  <div class="divide-y divide-gray-100">
    {{range .WeakSpots}}
    <a href="/questions/{{.QuestionID}}"
       class="flex items-start justify-between px-5 py-4 hover:bg-gray-50 transition-colors gap-4">
      <p class="text-sm text-gray-800 leading-relaxed line-clamp-2">{{.QuestionText}}</p>
      <span class="flex-shrink-0 text-xs text-red-500 font-medium whitespace-nowrap">
        {{.TimesWrong}}✗ / {{.TimesSeen}}
      </span>
    </a>
    {{end}}
  </div>
</div>
{{end}}
{{end}}