{% extends "portail/page.html" %}
{% load i18n %}
{% load crispy_forms_tags %}
{% load static %}
{% load embed %}


{% block styles %}
    {{ block.super }}
    <style>
        .card-individu .nav > li:first-child > a {
            border-left: 0px solid;
        }
        .card-individu .list-group a {
            border-radius: 0.25rem;
        }
        .card-individu {
            border-radius: 5px;
        }
    </style>
{% endblock %}

{% block contenu_page %}

    {# Texte d'introduction #}
    {% if parametres_portail.reservations_intro %}
        <div style="margin-bottom: 20px;">
            <i class="fa fa-info-circle margin-r-5"></i>{{ parametres_portail.reservations_intro }}
        </div>
    {% endif %}

    {% if nbre_approbations_requises > 0 %}
        <div class="alert alert-warning">
            <i class="fa fa-warning margin-r-5"></i> {% blocktrans %}Avant d'accéder aux réservations, vous devez valider les approbations de la page{% endblocktrans %} <a href="{% url 'portail_renseignements' %}">{% trans "Renseignements" %}</a>.
        </div>
    {% endif %}

    {% if blocage_impayes %}
        <div class="alert alert-danger">
            <i class="fa fa-warning margin-r-5"></i> {% blocktrans %}L'accès aux réservations a été automatiquement bloqué en raison d'un impayé. Merci de nous contacter afin de régulariser votre dossier.{% endblocktrans %}
        </div>
    {% endif %}

    {% if not blocage_impayes %}
        {% for individu in liste_individus %}
            <div class="card card-individu">

                <!-- Nom de l'individu -->
                <div class="user-block card-footer m-0" style="padding: .6rem 1rem;">
                    <img class="img-circle" src="{{ individu.Get_photo }}" alt="Individu Image">
                    <span class="username">{{ individu.prenom }}</span>
                    {% if individu.Get_age %}<span class="description">{{ individu.Get_age }} {% trans "ans" %}</span>{% endif %}
                </div>

                <!-- Liste des périodes -->
                <div class="card-footer p-0">
                    <div>

                        <ul class="nav nav-tabs">
                            {% for activite in individu.activites %}
                                <li class="nav-item">
                                    <a class="nav-link {% if forloop.first %}active{% endif %}" href="#tab_{{ individu.pk }}_{{ activite.pk }}" data-toggle="tab" role="tab">{{ activite.nom }}</a>
                                </li>
                            {% endfor %}
                        </ul>

                        <div class="tab-content p-0">
                            {% for activite in individu.activites %}
                                <div class="tab-pane {% if forloop.first %}show active{% endif %}" id="tab_{{ individu.pk }}_{{ activite.pk }}">
                                    <div class="list-group list-group-flush">
                                        {% for periode in dict_periodes|get_item:activite %}
                                            <a href="{% url 'portail_planning' idindividu=individu.pk idactivite=activite.pk idperiode=periode.pk %}" class="list-group-item list-group-item-action">
                                                <i class="fa fa-calendar margin-r-5"></i>
                                                {{ periode.nom }}
                                                <small class="pull-right d-none d-md-block">{% trans "Du" %} {{ periode.date_debut }} {% trans "au" %} {{ periode.date_fin }}</small>
                                            </a>
                                        {% empty %}
                                            <div class="bg-white" style="padding: 8px 10px";><i class="fa fa-ban text-danger margin-r-5"></i> {% blocktrans %}Aucune période disponible{% endblocktrans %}</div>
                                        {% endfor %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>

                    </div>
                </div>

            </div>

        {% empty %}

            {% embed 'core/box.html' with box_titre=True %}
                {% block box_theme %}card-outline card-lightblue{% endblock %}
                {% block box_titre %}{% blocktrans %}Liste des périodes de réservations{% endblocktrans %}{% endblock %}
                {% block box_contenu %}
                    <div>
                        <b>{% blocktrans %}Aucune période de réservation disponible.{% endblocktrans %}</b>
                    </div>
                {% endblock box_contenu %}
            {% endembed %}

        {% endfor %}
    {% endif %}

{% endblock contenu_page %}