<div class="container py-4">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12 text-center">
            <h1 class="fs-3 fw-bold mb-3">
                Check Upload Results
            </h1>
            <p class="text-muted mb-0 mx-auto" style="max-width: 600px;">
                Switch to the TextGrid Repository to verify your upload was successful
                and everything displays as expected.
            </p>
        </div>
    </div>

    <!-- Instance Buttons -->
    <div class="row justify-content-center mb-5">
        <div class="col-auto">
            <div class="d-flex gap-3">
                <a href="https://test.textgridrep.org/projects" target="_blank"
                    class="btn btn-outline-primary btn-lg d-flex align-items-center gap-2 px-4 py-3 shadow-sm">
                    <span>
                        <small class="d-block text-uppercase"
                            style="font-size: 0.65rem; letter-spacing: 0.5px;">Open</small>
                        <strong>Test Instance</strong>
                    </span>
                </a>
                <a href="https://textgridrep.org/projects" target="_blank"
                    class="btn btn-outline-danger btn-lg d-flex align-items-center gap-2 px-4 py-3 shadow-sm">
                    <span>
                        <small class="d-block text-uppercase"
                            style="font-size: 0.65rem; letter-spacing: 0.5px;">Open</small>
                        <strong>Production</strong>
                    </span>
                </a>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Preview Carousel -->
        <div class="col-md-6 d-flex">
            <div id="carouselIndicators" class="carousel slide w-100" data-bs-ride="carousel">
                <div class="carousel-inner h-100">
                    {% for img in images %}
                    <div class="carousel-item h-100 {% if loop.first %}active{% endif %}">
                        <div class="card border-0 shadow-sm h-100">
                            <div
                                class="card-header d-flex justify-content-center align-items-center bg-white border-bottom py-3">
                                <h5 class="mb-0">
                                    {{ img.caption }}
                                </h5>
                            </div>
                            <div
                                class="card-body p-0 d-flex align-items-center justify-content-center bg-light overflow-hidden">
                                <img src="{{ url_for('static', filename='img/publication/%s' % img.filename) }}"
                                    class="d-block w-100" alt="{{ img.alt }}">
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Checklist -->
        <div class="col-md-6 d-flex">
            <div class="card border-0 shadow-sm w-100">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 fw-semibold">
                        <i class="bi bi-check2-square me-2 text-primary"></i>What to check?
                    </h5>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        {% for img in images %}
                        <button type="button"
                            class="list-group-item list-group-item-action d-flex align-items-center py-3 px-4"
                            data-bs-target="#carouselIndicators" data-bs-slide-to="{{ loop.index0 }}">
                            <span class="d-flex align-items-center justify-content-center rounded-circle  me-3"
                                style="width: 32px; height: 32px;">
                                {% if img.icon %}
                                <i class="bi {{ img.icon }} text-primary"></i>
                                {% else %}
                                <i class="bi bi-arrow-right text-primary"></i>
                                {% endif %}
                            </span>
                            <span class="fw-medium">{{ img.caption }}</span>
                        </button>
                        {% endfor %}
                    </div>
                </div>
                <div class="card-footer bg-transparent border-top-0 p-3">
                    <div class="alert alert-info mb-0 d-flex align-items-center" role="alert">
                        <i class="bi bi-lightbulb me-2"></i>
                        <span><strong>Tip:</strong> You can repeat this process as often as needed!</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>