<!-- Calendar Section -->
<section id="calendar-section" class="tab-content">
  <div class="tab-section-shell">
    <div class="d-flex justify-content-between align-items-center mb-3 tab-section-header">
      <h3 class="mb-0">Kalender</h3>
      <div class="d-flex align-items-center gap-2">
        <select id="calendar-location-filter" class="form-select form-select-sm">
          <option value="">alle</option>
        </select>
        {% if admin_enabled %}
        <div class="btn-group" role="group">
          <button id="export-calendar-btn" class="btn btn-outline-secondary btn-sm" title="Kalender als Excel herunterladen">
            Export
          </button>
          <button id="import-calendar-btn" class="btn btn-outline-secondary btn-sm" title="Excel hochladen und Kalender überschreiben">
            Import
          </button>
        </div>
        <button id="add-calendar-entry-btn" class="btn btn-primary" title="Eintrag hinzufügen">
          <i class="bi bi-plus-circle"></i>
        </button>
        <input type="file" id="import-calendar-input" accept=".xlsx" style="display:none">
        {% endif %}
      </div>
    </div>

    <div class="tab-section-body">
      <div class="calendar-weekday-header"></div>

      <div id="calendar-days" class="calendar-grid">
        <!-- Populated via inline script below -->
      </div>
    </div>
  </div>
</section>

<!-- Calendar Modal -->
<div class="modal fade" id="calendarModal" tabindex="-1" aria-labelledby="calendarModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="calendarModalLabel">Kalendereintrag</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="calendarForm">
          <input type="hidden" id="calendarEntryId">
          <div class="row g-3">
            <div class="col-md-6">
              <label for="calendarDate" class="form-label">Datum</label>
              <input type="date" class="form-control" id="calendarDate" required>
            </div>
            <div class="col-md-6">
              <label for="calendarTime" class="form-label">Uhrzeit</label>
              <input type="time" class="form-control" id="calendarTime">
            </div>
          </div>
          {% if admin_enabled %}
          <div class="row g-3 mt-1" id="calendarRecurrenceRow">
            <div class="col-md-6">
              <label for="calendarRepeatCount" class="form-label">Anzahl Wiederholung (Wöchentlich)</label>
              <input type="number" class="form-control" id="calendarRepeatCount" min="1" max="52" step="1" value="1">
            </div>
          </div>
          {% endif %}
          <div class="mt-3">
            <label for="calendarTitle" class="form-label">Titel</label>
            <input type="text" class="form-control" id="calendarTitle" required>
          </div>
          <div class="mt-3">
            <label for="calendarLocation" class="form-label">Ort</label>
            <input type="text" class="form-control" id="calendarLocation">
          </div>
          <div class="mt-3">
            <label for="calendarDetails" class="form-label">Details</label>
            <textarea class="form-control" id="calendarDetails" rows="3"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
        <button type="button" class="btn btn-primary" id="saveCalendarEntryBtn">Speichern</button>
      </div>
    </div>
  </div>
</div>

