{% extends "base.html" %}
{% import "_icons.html" as icons %}
{% block title %}Wedstrijden — ClayTracker{% endblock %}
{% block content %}
  <h2>Wedstrijden</h2>
  <p><a class="knop" href="{{ url_for('wedstrijden.nieuw') }}">Nieuwe wedstrijd aanmaken</a></p>

  {% if wedstrijden %}
    <div class="card">
      <div class="table-wrap">
        <table>
          <thead>
            <tr><th>Naam</th><th>Datum</th><th>Status</th><th></th></tr>
          </thead>
          <tbody>
            {% for wedstrijd in wedstrijden %}
              <tr>
                <td><a href="{{ url_for('wedstrijden.overzicht', wedstrijd_id=wedstrijd.id) }}">{{ wedstrijd.naam }}</a></td>
                <td>{{ wedstrijd.datum }}</td>
                <td><span class="badge badge-{{ wedstrijd.status }}">{{ wedstrijd.status }}</span></td>
                <td class="actie-cel">
                  <form method="post" action="{{ url_for('wedstrijden.verwijderen', wedstrijd_id=wedstrijd.id) }}"
                        onsubmit="return confirm('Wedstrijd &quot;{{ wedstrijd.naam }}&quot; helemaal verwijderen? Alle deelnemers en scores van deze wedstrijd gaan definitief verloren. Weet je dit heel zeker?');">
                    <button type="submit" class="icon-btn" title="Wedstrijd verwijderen" aria-label="Wedstrijd verwijderen">
                      {{ icons.prullenbak() }}
                    </button>
                  </form>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  {% else %}
    <p><em>Nog geen wedstrijden aangemaakt.</em></p>
  {% endif %}
{% endblock %}