{% extends 'swimmonitor/base.html.twig' %}
{% form_theme form 'bootstrap_5_layout.html.twig' %}

{% block title %}Terminarten{% endblock %}

{% block breadcrumb %}<li>Termine</li><li>Terminarten</li>{% endblock %}

{% block page_head %}
    <div>
        <h1>Terminarten</h1>
        <p class="sm-lead">Farbe und Icon der Termine im Kalender.</p>
    </div>
    <div class="sm-page-actions">
        <a href="{{ path('calendar_index') }}" class="btn btn-secondary">Zum Kalender</a>
    </div>
{% endblock %}

{% block content %}
    <div class="sm-grid-aside">
        <section class="sm-panel">
            <div class="sm-panel-head"><h2>Vorhanden</h2><span class="sm-panel-meta">{{ types|length }} Terminart{{ types|length != 1 ? 'en' }}</span></div>
            {% if types is not empty %}
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Terminart</th>
                                <th>Farbe</th>
                                <th>Icon</th>
                                <th class="sm-actions"><span class="visually-hidden">Aktionen</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for type in types %}
                                <tr>
                                    <td><span class="sm-type-preview" data-sm-color="{{ type.color }}"><i class="fas {{ type.icon }}" aria-hidden="true"></i>{{ type.name }}</span></td>
                                    <td class="sm-mono">{{ type.color }}</td>
                                    <td class="sm-mono">{{ type.icon }}</td>
                                    <td class="sm-actions">
                                        <a href="{{ path('admin_appointment_types_edit', {id: type.id}) }}" class="btn btn-sm btn-secondary">Bearbeiten</a>
                                        <form action="{{ path('admin_appointment_types_delete', {id: type.id}) }}" method="post" class="d-inline"
                                              data-sm-confirm="Terminart „{{ type.name }}“ wirklich löschen?">
                                            <input type="hidden" name="_token" value="{{ csrf_token('delete_appointment_type' ~ type.id) }}">
                                            <button type="submit" class="btn btn-sm btn-outline-danger" aria-label="{{ type.name }} löschen"><i class="fas fa-trash"></i></button>
                                        </form>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="sm-empty"><strong>Noch keine Terminarten</strong>Rechts die erste anlegen.</div>
            {% endif %}
        </section>

        <section class="sm-panel">
            <div class="sm-panel-head"><h2>Neue Terminart</h2></div>
            {{ form_start(form) }}
                <div class="sm-panel-body">{% include 'admin/appointment_type/_form_fields.html.twig' %}</div>
                <div class="sm-panel-foot"><button type="submit" class="btn btn-primary">Anlegen</button></div>
            {{ form_end(form) }}
        </section>
    </div>

    {% include 'admin/appointment_type/_icon_picker.html.twig' %}
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/pages/appointment-types.js') }}?v={{ sm_v }}" defer></script>
{% endblock %}