{% extends 'admin_base.html.twig' %}

{% block title %}Kursteilnehmer – Fit wie ein Fisch{% endblock %}
{% block header_title %}<i class="fas fa-users me-2"></i>Kursteilnehmer{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('css/fisch-admin.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
{% set actions %}
    <span class="badge rounded-pill" style="background: var(--fisch-admin-primary);">{{ booked }}/{{ course.maxCapacity }}</span>
{% endset %}
{% include 'admin/fisch/_fisch_page_header.html.twig' with {
    title: course.pool.name ~ ' · ' ~ course.startTimeFormatted,
    icon: 'users',
    subtitle: course.ageGroupLabel ~ ' — Teilnehmer dieses Kurs-Slots',
    breadcrumb_current: 'Kursteilnehmer',
    actions_html: actions
} %}

{% include 'admin/fisch/_fisch_demo_banner.html.twig' %}

<div class="mb-3">
    <a href="{{ path('admin_fisch_courses_index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-arrow-left me-1"></i> Zur Kursübersicht
    </a>
</div>

<div class="fisch-table-wrap">
    <div class="table-responsive">
        <table class="table table-fisch mb-0">
            <thead>
                <tr>
                    <th>Vorname</th>
                    <th>Nachname</th>
                    <th>Geburtsdatum</th>
                    <th>Erziehungsberechtigte</th>
                    <th>E-Mail</th>
                </tr>
            </thead>
            <tbody>
                {% for p in participants %}
                    <tr>
                        <td class="fw-semibold">{{ p.childFirstName }}</td>
                        <td>{{ p.childLastName }}</td>
                        <td>{{ p.birthDate|date('d.m.Y') }}</td>
                        <td>{{ p.guardianName }}</td>
                        <td>{{ p.parentEmail }}</td>
                    </tr>
                {% else %}
                    <tr><td colspan="5" class="text-muted text-center py-4">Noch keine Teilnehmer in diesem Kurs.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}