{% extends 'base.html' %}
{% block title %}MCQ Quizzes • Student Smart Portal{% endblock %}
{% block content %}

<!-- Hero Bento Banner -->
<section class="bento-hero topspace" style="margin-bottom:24px">
  <div>
    <div class="eyebrow" style="font-size:0.75rem;font-weight:800;color:var(--ssp-blue-dark);letter-spacing:0.06em;text-transform:uppercase" data-ui-label>{{ "ADMINISTRATOR DASHBOARD" if actor.role == "admin" else "TEACHER DASHBOARD" }}</div>
    <h1 data-ui-label>MCQ Quizzes</h1>
    <p style="margin:0;color:var(--ssp-muted);font-size:0.92rem" data-ui-label>
      Create timed exams, randomize questions, display QR codes, and export grades.
    </p>
  </div>
  <a class="button primary" href="{{ url_for('quiz.quiz_new') }}">
    <span>➕</span> <span data-ui-label>Create New Exam</span>
  </a>
</section>

<!-- Previous Quizzes Bento Card -->
<section class="bento-card">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px">
    <div>
      <h2 style="margin:0;font-size:1.25rem;color:var(--ssp-navy);font-weight:800" data-ui-label>Previous quizzes</h2>
      <span style="font-size:0.84rem;color:var(--ssp-muted)">Examination records and real-time student submissions</span>
    </div>
    <span style="font-size:0.82rem;font-weight:700;color:var(--ssp-blue-dark);background:var(--ssp-blue-light);padding:4px 12px;border-radius:20px">
      {{ quizzes|length }} Total
    </span>
  </div>

  {% if quizzes %}
    <div class="tablewrap">
      <table>
        <thead>
          <tr>
            <th data-ui-label>Quiz</th>
            <th data-ui-label>Date (Baghdad)</th>
            <th data-ui-label>Present</th>
            <th data-ui-label>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
        {% for q in quizzes %}
          <tr>
            <td>
              <strong style="font-size:0.96rem;color:var(--ssp-navy)">{{ q['title'] }}</strong>
              {% if q['portfolio_course'] %}
                <div style="font-size:0.78rem;color:var(--ssp-muted)">{{ q['portfolio_course'] }} &mdash; {{ q['portfolio_component'] }}</div>
              {% endif %}
            </td>
            <td style="font-size:0.86rem;color:#334155">{{ q['created_at'] | localtime }}</td>
            <td>
              <span style="font-weight:800;color:var(--ssp-blue-dark);background:var(--ssp-blue-light);padding:3px 10px;border-radius:12px;font-size:0.82rem">
                {{ q['attempts'] }}
              </span>
            </td>
            <td>
              <span class="pill {{ 'open' if q['closed'] == 0 and q['closes_at'] > now else '' }}">
                {{ 'Open' if q['closed'] == 0 and q['closes_at'] > now else 'Closed' }}
              </span>
            </td>
            <td style="text-align:end">
              <a class="button outline sm" href="{{ url_for('quiz.quiz_detail', quiz_id=q['id']) }}">
                <span data-ui-label>View</span>
              </a>
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  {% else %}
    <p style="padding:28px;text-align:center;background:#f8fafc;border-radius:12px;color:var(--ssp-muted);margin:0">
      No quizzes created yet. Create a practice MCQ quiz to test the system.
    </p>
  {% endif %}
</section>

{% endblock %}