{# Termin-Dialog für js/pages/calendar.js. Parameter: appointmentTypes, containers (leer = Container fest vorgegeben) #}
<div class="modal fade" id="appointmentModal" tabindex="-1" aria-labelledby="appointmentModalTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="appointmentModalTitle">Termin</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
            </div>
            <div class="modal-body">
                <form id="appointmentForm" class="sm-form">
                    <input type="hidden" id="appointmentId">
                    <div class="sm-form-grid">
                        <div class="sm-span-2">
                            <label for="appointmentTitle" class="form-label">Titel</label>
                            <input type="text" class="form-control" id="appointmentTitle" required>
                        </div>
                        <div>
                            <label for="appointmentStart" class="form-label">Beginn</label>
                            <input type="datetime-local" class="form-control" id="appointmentStart" required>
                        </div>
                        <div>
                            <label for="appointmentEnd" class="form-label">Ende</label>
                            <input type="datetime-local" class="form-control" id="appointmentEnd" required>
                        </div>
                        <div class="{{ containers is empty ? 'sm-span-2' }}">
                            <label for="appointmentType" class="form-label">Terminart</label>
                            <select class="form-select" id="appointmentType" required>
                                {% for type in appointmentTypes %}
                                    <option value="{{ type.id }}">{{ type.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        {% if containers is not empty %}
                            <div>
                                <label for="appointmentContainer" class="form-label">Container</label>
                                <select class="form-select" id="appointmentContainer">
                                    <option value="">Allgemein</option>
                                    {% for container in containers %}
                                        <option value="{{ container.id }}">{{ container.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        {% endif %}
                        <div class="sm-span-2">
                            <label for="appointmentDescription" class="form-label">Beschreibung</label>
                            <textarea class="form-control" id="appointmentDescription" rows="3"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-danger me-auto" id="deleteAppointment" hidden>Löschen</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary" id="saveAppointment">Speichern</button>
            </div>
        </div>
    </div>
</div>