<!-- Main container with padding -->
<div class="container py-4">
    <div class="row">
        <!-- Page Title -->
        <div class="col-12 text-center mb-4">
            <h1 class="fs-3 fw-bold">Manage Collections & Metadata</h1>
        </div>

        <!-- Main Content Area -->
        <div class="row">
            <!-- Left Column - Collections List -->
            <div class="col-md-3">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="card-title mb-0">Collections</h5>
                    </div>
                    <div class="card-body pt-0">
                        <!-- Dynamic Collections List -->
                        {% if project.collections %}
                        {% for _collection in project.collections %}
                        <div class="row py-3 border-bottom border-2">
                            <!-- Loop through available collections -->
                            {% set collection = project.collections[_collection] %}
                            <!-- Collection Row -->
                            <div class="col-12">
                                <button
                                    class="btn btn-secondary btn-outline-secondary text-white w-100 text-start edit-collection-button text-truncate"
                                    style="height: 50px;"
                                    data-url="{{ url_for('collection.load_collection', projectname=project.path, collectionname=_collection) }}">
                                    <span class="overflow-hidden">
                                        {{ collection.config.title.short }}
                                    </span>
                                </button>
                            </div>
                            <div class="col-12">
                                <div class="row g-2 mt-1 border-bottom border-1 pb-2">
                                    <div class="col-auto">
                                        <button class="btn btn-sm btn-outline-secondary load-modal"
                                            title="Open XPath Parser"
                                            data-url="{{ url_for('collection.modal_xpath_parser', projectname=project.path, collectionname=_collection) }}">
                                            XPath Parser
                                        </button>
                                    </div>
                                    <div class="col-auto">
                                        <button class="btn btn-sm btn-outline-secondary load-modal"
                                            title="Open TEI Explorer"
                                            data-url="{{ url_for('collection.modal_tei_explorer', projectname=project.path, collectionname=_collection) }}">
                                            TEI Explorer
                                        </button>
                                    </div>
                                </div>
                                <div class="row g-2 mt-1">
                                    <div class="col-auto">
                                        <a class="btn btn-sm btn-outline-secondary" title="Download Collection Config"
                                            href="{{ url_for('collection.download_collection_yaml', projectname=project.path, collectionname=_collection) }}"
                                            download>
                                            <i class="bi bi-download"></i> Download
                                        </a>
                                    </div>
                                    <div class="col-auto">
                                        <form
                                            action="{{ url_for('collection.upload_collection_yaml', projectname=project.path, collectionname=_collection) }}"
                                            method="POST" enctype="multipart/form-data"
                                            class="d-inline js-tab-submit config-upload"
                                            data-reload-to-target="#detailsContent">
                                            <input type="file" name="config" accept=".yaml,.yml"
                                                class="d-none config-upload">
                                            <button type="button"
                                                class="btn btn-sm btn-outline-secondary trigger-config-upload">
                                                <i class="bi bi-filetype-yml"></i> Upload
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                        {% else %}
                        <!-- Message for no collections -->
                        <div class="col-12">
                            <p class="text-center text-muted">No collections available.</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Right Column - Collection Details -->
            <div class="col-md-9">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="card-title mb-0">Details</h5>
                    </div>
                    <!-- Details Content Area -->
                    {% include 'details/empty_container.html' %}
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-12 text-end">
            <button type="button" class="btn btn-primary btn-next" data-next-target="#tab-check-metadata">
                <i class="bi bi-chevron-right"></i> Next
            </button>
        </div>
    </div>
</div>