<div class="container py-4">
    <div class="row">
        <!-- Form Title -->
        <div class="col-12 text-center mb-4">
            <h1 class="fs-3 fw-bold">Check Upload Results</h1>
            <p class="text-muted">
                Please switch to the <b>TextGrid Repository website</b> to check whether your upload was successful and
                everything is displayed as you expect.
                <br />
                Below you will find helpful explanations and exemplary
                screenshots to guide your review.
            </p>
        </div>
    </div>

    <div class="row border-bottom mb-4 pb-4">
        <div class="col-6 text-center">
            <a href="https://test.textgridrep.org/projects" target="_blank" class="btn btn-lg btn-success px-5 py-3">
                <i class="bi bi-eye"></i> Open Test-Instance
            </a>
        </div>
        <div class="col-6 text-center">
            <a href="https://textgridrep.org/projects" target="_blank" class="btn btn-lg btn-danger px-5 py-3">
                <i class="bi bi-eye"></i> Open Live-Instance
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 d-flex align-items-center">
            <div id="carouselIndicators" class="carousel carousel-dark slide w-100" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    {% for img in images %}
                    <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="{{ loop.index0 }}" {%
                        if loop.first %}class="active" aria-current="true" {% endif %}
                        aria-label="Slide {{ loop.index }}">
                    </button>
                    {% endfor %}
                </div>
                <div class="carousel-inner">
                    {% for img in images %}
                    <div class="carousel-item {% if loop.first %}active{% endif %}">
                        <div class="w-100 p-3 mb-2 bg-dark-subtle text-secondary rounded" style="min-height: 90px;">
                            <h5 class="fw-bold text-center">{{img.caption}}</h5>
                        </div>
                        <img src="{{ url_for('static', filename='img/publication/%s' % img.filename) }}"
                            class="d-block w-100 rounded" alt="{{img.alt}}" style="max-width:100%;">
                    </div>
                    {% endfor %}
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselIndicators"
                    data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselIndicators"
                    data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
        <div class="col-md-6 mb-4 mb-md-0">
            <div class="bg-light rounded p-4 h-100">
                <h2 class="fs-4 mb-3">What to check in the preview?</h2>
                <ul class="list-group mb-3">
                    {% for img in images %}
                    <li class="list-group-item p-0 border-0 bg-transparent">
                        <button type="button"
                            class="list-group-item list-group-item-action d-flex align-items-center border-0 bg-transparent px-3 py-2"
                            data-bs-target="#carouselIndicators" data-bs-slide-to="{{ loop.index0 }}">
                            {% if img.icon %}
                            <i class="bi {{ img.icon }} me-2"></i>
                            {% endif %}
                            <span>{{ img.caption }}</span>
                        </button>
                    </li>
                    {% endfor %}
                </ul>
                <div class="alert alert-info mt-3" role="alert">
                    <b>Tip:</b> You can repeat this process as often as needed!
                </div>
            </div>
        </div>

    </div>
</div>