{% extends 'swimmonitor/base.html.twig' %}

{% set container = containers|filter(c => c.id == containerId)|first %}

{% block title %}Kalender · {{ container ? container.name : 'Container ' ~ containerId }}{% endblock %}

{% block breadcrumb %}
    <li>Termine</li>
    <li><a href="{{ path('calendar_index') }}">Kalender</a></li>
    <li>{{ container ? container.name : 'Container ' ~ containerId }}</li>
{% endblock %}

{% block page_head %}
    <div>
        <h1>Kalender · {{ container ? container.name : 'Container ' ~ containerId }}</h1>
        <p class="sm-lead">{{ container ? 'Termine dieses Containers.' : 'Dieser Container ist nicht bekannt.' }}</p>
    </div>
    <div class="sm-page-actions">
        <a href="{{ path('calendar_index') }}" class="btn btn-secondary">Alle Termine</a>
        {% if container %}
            <a href="{{ path('container_show', {id: containerId}) }}" class="btn btn-secondary">Zum Container</a>
            {% if is_granted('ROLE_USER') %}<button type="button" class="btn btn-primary" data-calendar-new><i class="fas fa-plus me-1"></i>Neuer Termin</button>{% endif %}
        {% endif %}
    </div>
{% endblock %}

{% block vendor_stylesheets %}<link rel="stylesheet" href="{{ asset('js/vendor/fullcalendar.min.css') }}">{% endblock %}

{% block content %}
    {% if container %}
        {% if not is_granted('ROLE_USER') %}
            <div class="alert alert-info">Termine sind nur nach der <a href="{{ path('app_login') }}">Anmeldung</a> sichtbar.</div>
        {% endif %}
        <div data-sm-calendar data-container-id="{{ containerId }}"{{ is_granted('ROLE_USER') ? '' : ' data-readonly' }}
             data-url-list="{{ path('api_container_appointments_list') }}"
             data-url-item="{{ path('api_container_appointments_update', {id: '__ID__'}) }}">
            <div class="sm-toolbar">
                {% include 'calendar/_type_filter.html.twig' %}
            </div>
            <section class="sm-panel">
                <div class="sm-panel-body"><div id="calendar" class="sm-calendar"></div></div>
            </section>
        </div>

        {% include 'calendar/_appointment_modal.html.twig' with {containers: []} %}
    {% else %}
        <section class="sm-panel"><div class="sm-empty"><strong>Container nicht gefunden</strong><a href="{{ path('calendar_index') }}">Zum Gesamtkalender</a></div></section>
    {% endif %}
{% endblock %}

{% block javascripts %}
    {% if container %}
        <script src="{{ asset('js/vendor/fullcalendar.min.js') }}" defer></script>
        <script src="{{ asset('js/vendor/fullcalendar-de.js') }}" defer></script>
        <script src="{{ asset('js/pages/calendar.js') }}?v={{ sm_v }}" defer></script>
    {% endif %}
{% endblock %}