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

  <!-- Einführung -->
  <p class="lead">
    Willkommen zum interaktiven Gruppenquiz! Lade deinen eigenen Fragebogen hoch und starte ein spannendes Live-Quiz. 
    Deine Teilnehmer beantworten die Fragen schnell und wettbewerbsorientiert direkt über ihre Smartphones.
  </p>

  <!-- Punktevergabe -->
  <p>
    Schnelle und richtige Antworten werden mit mehr Punkten belohnt. Jeder Spieler hat pro Frage nur einen Versuch. 
    Ein guter Mix aus Schnelligkeit und Genauigkeit zahlt sich aus!
  </p>
  <p class="text-muted">
    <strong>Hinweis:</strong> Die ersten drei richtigen Antworten erhalten höhere Punktwerte, alle weiteren richtigen Antworten bringen jeweils 1 Punkt.
  </p>
  <ul>
    <li>erste richtige Antwort → 5 Punkte</li>
    <li>zweite richtige Antwort → 4 Punkte</li>
    <li>dritte richtige Antwort → 3 Punkte</li>
    <li>jeder weitere richtige Antwort → 1 Punkt</li>
  </ul>

  <p>Sobald die richtige Antwort für alle anzeigt wird, werden keine weiteren Punkte verteilt.</p>

  <!-- Dateivorlage -->
  <h2 class="mb-4">Fragebogen erstellen</h2>
  <p>
    Nutze die <strong>Beispieldatei</strong> als Vorlage und trage deine Fragen sowie die Antwortoptionen ein. 
    Deine Excel-Datei sollte folgende Spalten enthalten:
  </p>
  <ul>
    <li><code>question</code>: Text der Frage (z. B. „Wer baute die Arche?“)</li>
    <li><code>answer1</code> bis <code>answer4</code>: Vier Antwortmöglichkeiten</li>
    <li><code>correct</code>: Spaltenname der richtigen Antwort (<code>answer1</code>-<code>answer4</code>)</li>
  </ul>
  <p class="text-muted">
    Unterstützte Formate: <code>.xlsx</code>, <code>.xls</code>
    Maximal 100 Fragen!
  </p>

  <!-- 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">Spiel beginnen</button>
  </form>

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