<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Results — <%= quiz.title %></title>
  <link rel="stylesheet" href="<%= base %>/public/css/style.css">
</head>
<body>

<nav class="nav">
  <div class="nav-brand">&#9632; <span>Quiz</span>Platform</div>
  <div class="nav-links">
    <a href="<%= base %>/">Take Another Quiz</a>
  </div>
</nav>

<section class="result-hero">
  <div class="container">
    <p style="font-size:0.85rem;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.5rem;">Results for <%= guestName %></p>
    <div class="result-score"><%= percentage %>%</div>
    <div class="result-label">
      <%= score %> out of <%= total %> correct &mdash; <%= quiz.title %>
    </div>
    <div style="margin-top:1.25rem;">
      <% if (percentage >= 70) { %>
        <span class="badge badge-pass" style="font-size:0.9rem;padding:6px 16px;">&#10003; Passed</span>
      <% } else { %>
        <span class="badge badge-fail" style="font-size:0.9rem;padding:6px 16px;">&#10005; Below Pass Mark</span>
      <% } %>
    </div>
  </div>
</section>

<div class="page">
  <div class="container" style="max-width:760px;">

    <h2 style="margin-bottom:1.5rem;">Question Breakdown</h2>

    <div class="result-breakdown">
      <% breakdown.forEach((item, idx) => { %>
        <div class="breakdown-item <%= item.isCorrect ? 'correct' : 'incorrect' %>">
          <div class="breakdown-q">
            <%= item.isCorrect ? '&#10003;' : '&#10005;' %>
            Q<%= idx+1 %>: <%= item.question.question_text %>
          </div>
          <div class="breakdown-answers">
            <span class="breakdown-yours">
              Your answer: <strong><%= item.selectedAnswer ? item.selectedAnswer.answer_text : 'No answer' %></strong>
            </span>
            <% if (!item.isCorrect) { %>
              <span class="breakdown-correct-ans">
                Correct: <strong><%= item.correctAnswer ? item.correctAnswer.answer_text : '—' %></strong>
              </span>
            <% } %>
          </div>
        </div>
      <% }) %>
    </div>

    <div style="text-align:center;margin-top:2.5rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;">
      <a href="<%= base %>/quiz/<%= quiz.id %>/start" class="btn btn-outline">Retry This Quiz</a>
      <a href="<%= base %>/" class="btn btn-navy">Back to All Quizzes</a>
    </div>

  </div>
</div>

<footer style="text-align:center;padding:2rem;color:var(--text-muted);font-size:0.82rem;border-top:1px solid var(--border);margin-top:2rem;">
  De Montfort University &mdash; CTEC3451 Development Project &mdash; Ogbuka Godswill (2976604)
</footer>

</body>
</html>
