{% extends 'base.html' %}
{% block content %}
  <h1 class="mb-4">Public Quiz</h1>

  <!-- Einführung -->
  <p class="lead">
    Willkommen beim interaktiven Gruppen-Quiz! Lade hier deinen eigenen Fragebogen hoch,
    um ein spannendes Live-Quiz zu starten. Deine Teilnehmer bearbeiten die Fragen schnell
    und wettbewerbsorientiert, direkt über ihre Smartphones.
  </p>

  <!-- Beschreibung -->
  <p>
    Verwende die <strong>Beispieldatei</strong> als Vorlage und trage deine Fragen und Antwortoptionen
    ein. Achte darauf, dass deine Excel-Datei folgende Spalten enthält:
  </p>
  <ul>
    <li><code>question</code>: Der Fragentext (z.B. "Wer baute die Arche?")</li>
    <li><code>answer1</code> bis <code>answer4</code>: Vier mögliche Antworten</li>
    <li><code>correct</code>: Name der richtigen Spalte (<code>answer1</code>–<code>answer4</code>)</li>
  </ul>
  <p class="text-muted">
    Unterstützte Formate: <code>.xlsx</code>, <code>.xls</code>. Maximal 100 Fragen empfohlen.
  </p>

  <h2 class="mb-4">Fragebogen:</h2>

  <!-- Download-Link zur Beispiel-Datei -->
  <div class="mb-4">
    <a href="{{ url_for('static', filename='questions_example.xlsx') }}" class="btn btn-warning">
      Beispieldatei Fragebogen (Excel)
    </a>
  </div>

  <!-- Upload-Form -->
  <form action="{{ url_for('upload') }}" method="post" enctype="multipart/form-data">
    <div class="mb-3">
      <label for="file" class="form-label">Fragebogen hochladen</label>
      <input
        type="file"
        id="file"
        name="file"
        class="form-control"
        accept=".xlsx, .xls"
        required
      >
    </div>
    <button type="submit" class="btn btn-success">Fragebogen hochladen</button>
  </form>

  <!-- Fehlermeldung -->
  {% if error %}
    <div class="alert alert-danger mt-3" role="alert">
      {{ error }}
    </div>
  {% endif %}
{% endblock %}