<!DOCTYPE html>
<div class="row">
    {% set tg_session_id = project.main_config.get_tg_session_id(instance) %}
    {% set current_tg_project_id = project.main_config.get_tg_project_id(instance) %}
    {% set tgproject_handler = project.get_tgp(instance) %}
    {% set is_valid_session = tgproject_handler.check_session() %}
    {% set action = 'upload' %}

    <!-- Instance Info Banner -->
    <div class="col-12 mb-4">
        {% if instance == 'test' %}
        <div class="alert alert-info border-0 bg-primary bg-opacity-10 d-flex align-items-center mb-0">
            <i class="bi bi-info-circle-fill text-primary fs-5 me-3"></i>
            <div>
                <strong>Test Environment</strong>
                <span class="text-muted ms-2">— Your uploads here are for testing and verification purposes.</span>
            </div>
        </div>
        {% else %}
        <div class="alert alert-danger border-0 bg-danger bg-opacity-10 d-flex align-items-center mb-0">
            <i class="bi bi-exclamation-diamond-fill text-danger fs-5 me-3"></i>
            <div>
                <strong>Production Environment</strong>
                <span class="text-muted ms-2">— Uploads here will be publicly visible. Please verify all data before
                    proceeding.</span>
            </div>
        <span class="badge bg-danger text-light mb-2">
            This starts a <b>real publication</b>.
            <br />
            Please ensure all data is correct.
        </div>
        {% endif %}
    </div>

    <div class="col-12">
        {% include 'includes/get_sessionid.html' %}
        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                {% include 'includes/set_sessionid.html' %}
            </div>
        </div>

        {% if is_valid_session %}
        <div class="card border-0 shadow-sm mt-4">
            <div class="card-body p-4">
                {% include 'includes/tg_project_info.html' %}

                {% if not current_tg_project_id %}
                <div class="text-center py-5">
                    <div class="rounded-circle bg-warning bg-opacity-10 p-4 d-inline-flex mb-3 justify-content-center align-items-center"
                        style="width: 5rem; height: 5rem;">
                        <i class="bi bi-folder-x fs-1 text-warning"></i>
                    </div>
                    <h5 class="fw-semibold mb-2">No TextGrid Project Selected</h5>
                    <p class="text-muted mb-4">Please select or create a TextGrid project to upload your collections.
                    </p>
                    <button class="btn btn-primary load-modal px-4" title="Manage TextGrid Projects"
                        data-url="{{ url_for('publication.modal_manage_tg_projects', sessionid=tg_session_id, instance=instance, projectname=project.path) }}">
                        <i class="bi bi-folder-plus me-2"></i>Manage TextGrid Projects
                    </button>
                </div>
                {% else %}
                <!-- Collections Section Header -->
                <div class="d-flex align-items-center mb-4 pb-3 border-bottom">
                    <div class="rounded-circle bg-primary bg-opacity-10 p-2 me-3 d-flex align-items-center justify-content-center"
                        style="width: 2.5rem; height: 2.5rem;">
                        <i class="bi bi-collection text-primary"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 fw-semibold">Upload Collections</h6>
                        <small class="text-muted">Select collections to upload to TextGrid</small>
                    </div>
                </div>
                <div class="row g-4">
                    {% set p_validation = project.get_validation_results(refresh=False) %}
                    {% set tg_project = tg_project if tg_project else project.get_tgp(instance) %}
                    {% set all_tgp_contents = tg_project.get_project_contents() %}
                    {% for c_validation in p_validation["subprojects"] %}
                    <div class="col-md-4">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-header bg-white border-bottom-0 pt-3 pb-0">
                                <div class="d-flex align-items-center">
                                    <div class="rounded bg-primary bg-opacity-10 p-2 me-3">
                                        <i class="bi bi-folder2 text-primary"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <h6 class="mb-0 fw-semibold">{{ c_validation.title }}</h6>
                                        <small class="text-muted">{{ c_validation.files|length }} files</small>
                                    </div>
                                    {% if c_validation.stats.error == 0 %}
                                    <span class="badge bg-success-subtle text-success"><i
                                            class="bi bi-check-circle me-1"></i>Ready</span>
                                    {% else %}
                                    <span class="badge bg-danger-subtle text-danger"><i
                                            class="bi bi-x-circle me-1"></i>{{ c_validation.stats.error }} errors</span>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="card-body pt-3" style="max-height: 280px; overflow-y: auto;">
                                <table class="table table-sm table-borderless align-middle mb-0">
                                    <thead class="small text-muted">
                                        <tr>
                                            <th class="fw-normal">File</th>
                                            <th class="fw-normal text-center" style="width: 60px;" title="Validated"><i
                                                    class="bi bi-clipboard-check"></i></th>
                                            <th class="fw-normal text-center" style="width: 60px;" title="Uploaded"><i
                                                    class="bi bi-cloud-arrow-up"></i></th>
                                            <th class="fw-normal text-center" style="width: 60px;" title="Published"><i
                                                    class="bi bi-cloud-check"></i></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for file_name, file_errors in c_validation.files.items() %}
                                        {% if 'file_attributes' in c_validation %}
                                        {% set title = c_validation.file_attributes[file_name]['work_title'] %}
                                        {% else %}
                                        {% set title = file_name %}
                                        {% endif %}
                                        <tr>
                                            <td class="small text-truncate" style="max-width: 150px;"
                                                title="{{ title }} ({{ file_name }})">
                                                {{ title }}
                                            </td>
                                            <td class="text-center">
                                                {% if len(file_errors) == 0 %}
                                                <i class="bi bi-check-circle-fill text-success"></i>
                                                {% else %}
                                                <i class="bi bi-x-circle-fill text-danger"></i>
                                                {% endif %}
                                            </td>
                                            <td class="text-center">
                                                {% if all_tgp_contents[title] %}
                                                <i class="bi bi-check-circle-fill text-success"></i>
                                                {% else %}
                                                <i class="bi bi-circle text-muted"></i>
                                                {% endif %}
                                            </td>
                                            <td class="text-center">
                                                {% if all_tgp_contents[title] and all_tgp_contents[title]['published']
                                                %}
                                                <i class="bi bi-check-circle-fill text-success"></i>
                                                {% else %}
                                                <i class="bi bi-circle text-muted"></i>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="card-footer bg-white border-top pt-3" style="min-height: 3.25rem;">
                                {% if c_validation.stats.error == 0 %}
                                <button
                                    class="load-modal btn btn-success w-100 d-flex align-items-center justify-content-center gap-2"
                                    title="Open Upload Modal Dialog"
                                    data-url="{{ url_for('publication.upload_collection_manage', collection=c_validation.title, instance=instance, projectname=project.path) }}">
                                    <i class="bi bi-cloud-arrow-up"></i>Upload Collection
                                </button>

                                {% else %}
                                <div class="d-flex align-items-center justify-content-center text-danger small">
                                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                                    <span>Fix validation errors before uploading</span>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    <!-- Other Files Card -->
                    <div class="col-md-4">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-header bg-white border-bottom-0 pt-3 pb-0">
                                <div class="d-flex align-items-center">
                                    <div class="rounded bg-secondary bg-opacity-10 p-2 me-3">
                                        <i class="bi bi-file-earmark text-secondary"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <h6 class="mb-0 fw-semibold">Other Files</h6>
                                        <small class="text-muted">{{
                                            project.project_config.other_files.get_all_files()|length }} files</small>
                                    </div>
                                    <span class="badge bg-secondary-subtle text-secondary"><i
                                            class="bi bi-files me-1"></i>Supplementary</span>
                                </div>
                            </div>
                            <div class="card-body pt-3" style="max-height: 280px; overflow-y: auto;">
                                {% set other_files = project.project_config.other_files.get_all_files() %}
                                {% if other_files|length > 0 %}
                                <table class="table table-sm table-borderless align-middle mb-0">
                                    <thead class="small text-muted">
                                        <tr>
                                            <th class="fw-normal">File</th>
                                            <th class="fw-normal text-center" style="width: 60px;" title="Uploaded"><i
                                                    class="bi bi-cloud-arrow-up"></i></th>
                                            <th class="fw-normal text-center" style="width: 60px;" title="Published"><i
                                                    class="bi bi-cloud-check"></i></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for filename in other_files %}
                                        <tr>
                                            <td class="small text-truncate" style="max-width: 150px;"
                                                title="{{ filename }}">
                                                {{ filename }}
                                            </td>
                                            <td class="text-center">
                                                {% if all_tgp_contents[filename] %}
                                                <i class="bi bi-check-circle-fill text-success"></i>
                                                {% else %}
                                                <i class="bi bi-circle text-muted"></i>
                                                {% endif %}
                                            </td>
                                            <td class="text-center">
                                                {% if all_tgp_contents[filename] and
                                                all_tgp_contents[filename]['published'] %}
                                                <i class="bi bi-check-circle-fill text-success"></i>
                                                {% else %}
                                                <i class="bi bi-circle text-muted"></i>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                                {% else %}
                                <div class="text-center py-4 text-muted">
                                    <i class="bi bi-inbox fs-3 d-block mb-2"></i>
                                    <small>No additional files configured</small>
                                </div>
                                {% endif %}
                            </div>
                            <div class="card-footer bg-white border-top pt-3">
                                {% if other_files|length > 0 %}
                                <button
                                    class="load-modal btn btn-success w-100 d-flex align-items-center justify-content-center gap-2"
                                    title="Open Upload Modal Dialog"
                                    data-url="{{ url_for('publication.upload_other_files_manage', projectname=project.path, instance=instance) }}">
                                    <i class="bi bi-cloud-arrow-up"></i>Upload Other Files
                                </button>
                                {% else %}
                                <button class="btn btn-secondary w-100" disabled>
                                    <i class="bi bi-cloud-arrow-up me-2"></i>No Files to Upload
                                </button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>