{% extends "main.html" %}
{% load formation_extras %}

{% block title %}Formations{% endblock %}
{% block services %}class="highlight"{% endblock %}

{% block content %}
<div class="default-container">

    <h1>Prochaines formations</h1>

    {% for formation in formations %}
    <div class="card mb-3">
        <div class="card-body">
            <h3 class="card-title">{{ formation.nom }}</h3>
            <p class="card-text text-dark">
                <i class="fas fa-calendar-day"></i> le <time
                    datetime="{{ formation.date_heure|date:'Y-m-d\TH:i:s' }}">{{ formation.date_heure|date:"l j F Y à  H:i"}}</time>
                <br>
                <i class="far fa-clock"></i> Durée estimée : {{ formation|duree_formation }} <br>
                <i class="fas fa-map-marker-alt"></i> Lieu : {{ formation.lieu }} <br>
                <i class="fas fa-user-graduate"></i> Responsable : <img
                    src="{% url 'annuaire:photo' formation.responsable.username %}" class="rounded-circle"
                    style="width:20px; height:20px; object-fit: cover;"> {{ formation.responsable.first_name }}
                {{ formation.responsable.last_name }}
            </p>
            <p class="card-text">
                {{ formation.description }}
            </p>
            {% if formation|est_inscrit_formation:request.user %}
            <a class="btn btn-secondary" href="{% url 'formations:desinscription' formation.pk %}">Me désinscrire</a>
            {% else %}
            {% if formation.est_complete %}
            <strong>Le nombre maximal d’inscriptions est atteint.</strong>
            {% else %}
            <strong>{{ formation.occ_total }} participant{{ formation.occ_total|pluralize }} sur
                {{ formation.nb_places_total }} place{{ formation.nb_places_total|pluralize }}.</strong>
            <br />
            <a class="btn btn-primary" href="{% url 'formations:inscription' formation.pk %}">M’inscrire</a>
            {% endif %}
            {% endif %}
        </div>
    </div>
    {% empty %}
    <p>Il n’y a pas de formations prévues pour le moment.</p>
    {% endfor %}

</div>
{% endblock %}