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

{% block title %}Kalender{% endblock %}

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

{% block page_head %}
    <div>
        <h1>Kalender</h1>
        <p class="sm-lead">Wartungen, Prüfungen und weitere Termine aller Container.</p>
    </div>
    <div class="sm-page-actions">
        {% if is_granted('ROLE_SUPERADMIN') %}<a href="{{ path('admin_appointment_types_index') }}" class="btn btn-secondary">Terminarten</a>{% endif %}
        {% 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 %}
    </div>
{% endblock %}

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

{% block content %}
    {% 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{{ 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">
            <label for="containerFilter" class="visually-hidden">Container</label>
            <select class="form-select sm-select-auto" id="containerFilter">
                <option value="">Alle Container</option>
                {% for container in containers %}
                    <option value="{{ container.id }}">{{ container.name }}</option>
                {% endfor %}
            </select>
            {% 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: containers} %}
{% endblock %}

{% block javascripts %}
    <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>
{% endblock %}