{% extends "partials/conteneur.html" %}

{% block body %}

<div class="container">
    <h1>Liste exhaustive de l'ensemble des continents contenus dans le Factbook</h1>
    <br>
    <div class="row">
        <div class="col-4">
            <div class="list-group" id="list-tab" role="tablist">
                {%if donnees.prev_num %}
                <a class="list-group-item list-group-item-action" id="list-list-prev" 
                     href="{{ url_for('continents', page=donnees.prev_num) }}" class="btn btn-outline-dark 
                    {% if donnees.page == 1 %}disabled{% endif %}">
                        &laquo;
                </a>
                {% endif %}

                {% for continent in donnees.items %}
                {% if (donnees.items).index(continent) == 0 %}
                <a class="list-group-item list-group-item-action active" id="list-{{continent.id}}-list" data-toggle="list"
                    href="#list-{{continent.id}}" role="tab" aria-controls="{{continent.id}}">{{continent.name}}</a>
                {% else %}
                <a class="list-group-item list-group-item-action" id="list-{{continent.id}}-list" data-toggle="list"
                    href="#list-{{continent.id}}" role="tab" aria-controls="{{continent.id}}">{{continent.name}}</a>
                {% endif %}
                {% endfor %}

                {%if donnees.next_num %}
                <a class="list-group-item list-group-item-action" id="list-list-next" 
                    href="{{ url_for('continents', page=donnees.next_num) }}" class="btn btn-outline-dark 
                        {% if donnees.page == donnees.pages %}disabled{% endif %}">
                    &raquo;
                </a>
                {% endif %}
            </div>
        </div>
        <div class="col-8">
            <div class="tab-content" id="nav-tabContent">
                {% for continent in donnees.items %}
                {% if (donnees.items).index(continent) == 0 %}
                <div class="tab-pane fade show active" id="list-{{continent.id}}" role="tabpanel"
                    aria-labelledby="list-{{continent.id}}-list">
                    <a href="{{ url_for('un_continent', nom_continent=continent.name) }}"> Voir les {{donnees_generales[continent.name] | length}} pays de {{continent.name}}</a>
                </div>
                {% else %}
                <div class="tab-pane fade " id="list-{{continent.id}}" role="tabpanel"
                    aria-labelledby="list-{{continent.id}}-list">
                    <a href="{{ url_for('un_continent', nom_continent=continent.name) }}"> Voir les {{donnees_generales[continent.name] | length}} pays de {{continent.name}}</a>
                </div>
                {% endif %}

                {% endfor %}
            </div>
        </div>
    </div>
</div>
<br>
<div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-5">
        <a href="{{ url_for('continents', page=donnees.prev_num) }}" class="btn btn-outline-dark 
               {% if donnees.page == 1 %}disabled{% endif %}">
            &laquo;
        </a>
        {% for page_num in donnees.iter_pages() %}
        {% if page_num %}
        {% if donnees.page == page_num %}
        <a href="{{ url_for('continents', page=page_num) }}" class="btn btn-dark">
            {{ page_num }}
        </a>
        {% else %}
        <a href="{{ url_for('continents', page=page_num) }}" class="btn btn-outline-dark">
            {{ page_num }}
        </a>
        {% endif %}
        {% else %}
        ...
        {% endif %}
        {% endfor %}
        <a href="{{ url_for('continents', page=donnees.next_num) }}" class="btn btn-outline-dark 
               {% if donnees.page == donnees.pages %}disabled{% endif %}">
            &raquo;
        </a>
    </div>
    <div class="col-sm-3"></div>
</div>
</div>


{% endblock %}