<!-- Messages Section -->
<section id="messages-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">Nachrichten</h3>
      {% if admin_enabled %}
      <div>
        <button id="add-message-btn" class="btn btn-primary" title="Nachricht hinzufügen">
          <i class="bi bi-plus-circle"></i>
        </button>
      </div>
      {% endif %}
    </div>
    {% if not admin_enabled %}
    {% if admin_enabled %}
    <div class="mb-3">
      <button id="add-message-btn" class="btn btn-primary" title="Nachricht hinzufügen">
        <i class="bi bi-plus-circle"></i>
      </button>
    </div>
    {% endif %}
    {% endif %}
    <div id="messages-container" class="messages-container tab-section-body">
      <!-- Messages will be loaded here via JavaScript -->
    </div>
  </div>
</section>

<!-- Message Modal -->
<div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="messageModalLabel">Nachricht bearbeiten</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="messageForm">
          <input type="hidden" id="messageId">
          <div class="mb-3">
            <label for="messageTitle" class="form-label">Titel</label>
            <input type="text" class="form-control" id="messageTitle" required>
          </div>
          <div class="mb-3">
            <label for="messageDateTime" class="form-label">Datum und Zeit</label>
            <input type="datetime-local" class="form-control" id="messageDateTime" required>
          </div>
          <div class="mb-3">
            <label for="messageContent" class="form-label">Inhalt (Markdown unterstützt)</label>
            <div class="mb-2">
              <button type="button" class="btn btn-sm btn-outline-secondary" id="insertLinkBtn">
                <i class="bi bi-link-45deg"></i> Datei/Ordner verlinken
              </button>
            </div>
            <div class="collapse" id="fileBrowserCollapse">
              <div class="file-browser-panel">
                <h6>Datei/Ordner auswählen</h6>
                <div id="fileBrowserPath" class="mb-2">
                  <small class="text-muted">Pfad: <span id="currentPath">/</span></small>
                </div>
                <div id="fileBrowserContent" class="file-browser-content">
                  <div class="text-center py-3">
                    <div class="spinner-border spinner-border-sm" role="status">
                      <span class="visually-hidden">Laden...</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <textarea class="form-control" id="messageContent" rows="10" required></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="saveMessageBtn">Speichern</button>
      </div>
    </div>
  </div>
</div>
