{% extends 'welcome.html' %}

{% block header %}
<meta http-equiv="X-UA-Compatible" content="IE-edge">
{% endblock %}

{% block navbar %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <span class="navbar-brand">LISA_SMILE</span>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/identification">Identification</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/record">Record</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-center">
    <div id="carousel_images" class="carousel slide mt-4 mb-4 w-50" data-bs-ride="carousel" data-bs-interval="false">
        <h2>All images</h2>
        <div class="carousel-inner rounded">
            <div class="carousel-item active">
                <a href="/collection/images"><img id="image_preview" src="{{ url_for('static', path='/images/loading.jpg') }}" class="d-block w-100" alt="..."></a>
            </div>
        </div>
    </div>
</div>
{% for method, models in methods.items() %}
    <div class="d-flex justify-content-center">
        <div id="carousel_{{ method }}" class="carousel slide mt-4 mb-4 w-50" data-bs-ride="carousel" data-bs-interval="false">
            <h2>{{ method }}</h2>
            <div class="carousel-indicators">
                {% for model in models %}
                    {% set i = loop.index %}
                    {% if i == 1 %}
                        <button type="button" data-bs-target="#carousel_{{ method }}" data-bs-slide-to="{{ i - 1 }}" class="active" aria-current="true" aria-label="{{ model }} slide"></button>
                    {% else %}
                        <button type="button" data-bs-target="#carousel_{{ method }}" data-bs-slide-to="{{ i - 1 }}" aria-label="{{ model }} slide"></button>
                    {% endif %}
                {% endfor %}
            </div>
            <div class="carousel-inner rounded">
                {% for model in models %}
                    {% set i = loop.index %}
                    {% if i == 1 %}
                        <div class="carousel-item active">
                            <img id="image_{{ method }}_{{ model }}" src="{{ url_for('static', path='/images/loading.jpg') }}" class="d-block w-100" alt="...">
                            <div class="carousel-caption d-none d-md-block">
                                <h5><a class="link-light" href="/collection/{{ method }}_{{ model }}" style="text-decoration:none">{{ model }}</a></h5>
                            </div>
                        </div>
                    {% else %}
                        <div class="carousel-item">
                            <img id="image_{{ method }}_{{ model }}" src="{{ url_for('static', path='/images/loading.jpg') }}" class="d-block w-100" alt="...">
                            <div class="carousel-caption d-none d-md-block">
                                <h5><a class="link-light" href="/collection/{{ method }}_{{ model }}" style="text-decoration:none">{{ model }}</a></h5>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carousel_{{ method }}" 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="#carousel_{{ method }}" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
{% endfor %}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="{{ url_for('static', path='/js/collection.js') }}"></script>
{% endblock %}