<div class="modal-dialog modal-xl">
    <div class="modal-content">
        <div class="modal-header align-items-center">
            <h5 id="teiExplorerModalLabel" class="mb-0">TEI Explorer</h5>
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <!-- Tabs Navigation -->
            <ul class="nav nav-tabs" id="teiExplorerTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="filesTab" data-bs-toggle="tab" data-bs-target="#files"
                        type="button" role="tab" aria-controls="files" aria-selected="true">
                        TEI Files
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="contentTab" data-bs-toggle="tab" data-bs-target="#content"
                        type="button" role="tab" aria-controls="content" aria-selected="false">
                        TEI Content
                    </button>
                </li>
            </ul>

            <!-- Tabs Content -->
            <div class="tab-content" id="teiExplorerTabsContent" style="height: 70vh; overflow-y: auto;">
                <!-- Tab: TEI Files -->
                <div class="tab-pane fade show active" id="files" role="tabpanel" aria-labelledby="filesTab">
                    <ul class="list-group">
                        {% for file in file_list %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="text-truncate">{{ file.name_stripped }}</span>
                            <div class="btn-group">
                                <button class="btn btn-sm btn-outline-secondary load-tei-content"
                                    data-url="{{ url_for('collection.load_tei_content') }}"
                                    data-path="{{ file['fullpath'] }}" data-type="header" data-heading="TEI Header">
                                    Header
                                </button>
                                <button class="btn btn-sm btn-outline-secondary load-tei-content"
                                    data-url="{{ url_for('collection.load_tei_content') }}"
                                    data-path="{{ file['fullpath'] }}" data-type="text" data-heading="TEI Text">
                                    Text
                                </button>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>

                <!-- Tab: TEI Content -->
                <div class="tab-pane fade" id="content" role="tabpanel" aria-labelledby="contentTab">
                    <div id="teiContentOutput" class="m-3">
                        <p class="text-muted">Select a file to view its content.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>