<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Questions — <%= 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 %>/admin/dashboard">Dashboard</a>
    <a href="<%= base %>/admin/quizzes" class="active">Quizzes</a>
    <a href="<%= base %>/admin/logout" class="logout">Logout</a>
  </div>
</nav>

<div class="page">
  <div class="container">

    <div class="breadcrumb">
      <a href="<%= base %>/admin/quizzes">Quizzes</a> &rsaquo; <a href="<%= base %>/admin/quizzes/<%= quiz.id %>/edit"><%= quiz.title %></a> &rsaquo; Questions
    </div>
    <div class="page-header">
      <div>
        <h2 class="page-title">Questions</h2>
        <p style="color:var(--text-muted);font-size:0.9rem;"><%= quiz.title %> &mdash; <%= quiz.time_limit %> min &mdash; <%= questions.length %> question(s)</p>
      </div>
    </div>

    <% if (error) { %>
      <div class="alert alert-error">&#9888; <%= error %></div>
    <% } %>

    <!-- Existing questions -->
    <% if (questions.length > 0) { %>
      <div style="margin-bottom:2.5rem;">
        <% questions.forEach((q, idx) => { %>
          <div style="background:var(--white);border-radius:var(--radius);padding:1.5rem;margin-bottom:1rem;box-shadow:var(--shadow);">
            <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;">
              <div style="flex:1;">
                <div style="font-size:0.78rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--accent);margin-bottom:0.5rem;">Q<%= idx+1 %></div>
                <p style="font-weight:500;margin-bottom:1rem;"><%= q.question_text %></p>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
                  <% q.answers.forEach(a => { %>
                    <div style="display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-sm);background:<%= a.is_correct ? 'var(--success-bg)' : 'var(--cream)' %>;border:1px solid <%= a.is_correct ? '#b8e0ca' : 'var(--border)' %>;">
                      <span style="width:18px;height:18px;border-radius:50%;background:<%= a.is_correct ? 'var(--success)' : 'var(--border)' %>;display:flex;align-items:center;justify-content:center;font-size:0.65rem;color:white;flex-shrink:0;"><%= a.is_correct ? '&#10003;' : '' %></span>
                      <span style="font-size:0.88rem;<%= a.is_correct ? 'font-weight:600;color:var(--success)' : '' %>"><%= a.answer_text %></span>
                    </div>
                  <% }) %>
                </div>
              </div>
              <form action="<%= base %>/admin/quizzes/<%= quiz.id %>/questions/<%= q.id %>/delete" method="POST" onsubmit="return confirm('Delete this question?')">
                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
              </form>
            </div>
          </div>
        <% }) %>
      </div>
    <% } %>

    <!-- Add new question form -->
    <div class="form-card" style="max-width:100%;">
      <p class="section-title">Add New Question</p>
      <form action="<%= base %>/admin/quizzes/<%= quiz.id %>/questions/add" method="POST">
        <div class="form-group">
          <label>Question Text *</label>
          <textarea name="question_text" placeholder="Type your question here…" required></textarea>
        </div>

        <p class="section-title" style="margin-top:1.5rem;">Answer Options *</p>
        <div class="answer-grid">
          <% [1,2,3,4].forEach(n => { %>
            <div class="answer-opt">
              <div class="answer-opt-num"><%= n %></div>
              <input type="text" name="answer_<%= n %>" placeholder="Option <%= n %>" required>
            </div>
          <% }) %>
        </div>

        <div class="form-group" style="margin-top:1.25rem;">
          <label for="correct_answer">Correct Answer *</label>
          <select name="correct_answer" id="correct_answer" required>
            <option value="">— Select correct answer —</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
          </select>
        </div>

        <button type="submit" class="btn btn-primary">Add Question</button>
      </form>
    </div>

  </div>
</div>

</body>
</html>
