{% extends "base.html" %}

{% block content %}
<h1>Listar Rostos</h1>
<div class="row">
    {% for image in images %}
        <div class="col-md-3">
            <div class="card mb-4">
                <img src="{{ url_for('serve_image', filename=image) }}" class="card-img-top">
                <div class="card-body">
                    <label>{{ image }}</label>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

<div class="pagination-wrapper">
    <nav aria-label="Page navigation">
        <ul class="pagination">
            {% if page > 1 %}
            <li class="page-item">
                <a class="page-link" href="{{ url_for('listar_rostos', page=1) }}" aria-label="First">
                    <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="{{ url_for('listar_rostos', page=page-1) }}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            {% endif %}

            {% for p in page_range %}
                <li class="page-item {% if p == page %}active{% endif %}">
                    <a class="page-link" href="{{ url_for('listar_rostos', page=p) }}">{{ p }}</a>
                </li>
            {% endfor %}

            {% if page < total_pages %}
            <li class="page-item">
                <a class="page-link" href="{{ url_for('listar_rostos', page=page+1) }}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="{{ url_for('listar_rostos', page=total_pages) }}" aria-label="Last">
                    <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
            </li>
            {% endif %}
        </ul>
    </nav>
</div>

{% endblock %}
