{% extends "main.html" %}

{% load static %}

{% block title %}Covoiturage{% endblock %}

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

    <ul class="nav nav-pills mb-3">
        <li class="nav-item">
            <a class="nav-link" href="{% url 'covoiturage:liste' %}">Liste des annonces</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{% url 'covoiturage:poster_annonce' %}">Poster une annonce</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="#">Mes annonces</a>
        </li>
    </ul>
    {% for message in messages %}
    <div {% if message.tags %} class="alert {{ message.tags }}" {% endif %}>{{ message }}
    </div></br>
    {% endfor %}

    <table class="table table-striped">
        <thead>
            <tr>
                <th>Départ</th>
                <th>Destination</th>
                <th>Places</th>
                <th>Participation</th>
                <th>Date de départ</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for annonce in annonces %}
            <tr>
                <td>{{ annonce.adresse_depart|linebreaksbr }}</td>
                <td>{{ annonce.adresse_destination|linebreaksbr }}</td>
                <td>{{ annonce.places }}</td>
                <td>
                    {% if annonce.participation %}
                    {{ annonce.participation }} €
                    {% endif %}
                </td>
                <td>{{ annonce.date_depart }}</td>
                <td>
                    <a href="{% url 'covoiturage:editer_annonce' annonce.pk %}" class="btn btn-primary text-white btn-sm">
                        <i class="fas fa-pencil-alt" title="Éditer"></i>
                    </a>
                    <a href="{% url 'covoiturage:voir_annonce' annonce.pk %}">
                        <img src="{% static "inscriptions/voir_fiche.png" %}" alt="Fiche" title="Fiche" />
                    </a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="6">Aucune annonce.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <br>

    {% if annonces.has_other_pages %}
    <div class="btn-group" role="group" aria-label="Item pagination">
        {% if annonces.has_previous %}
            <a href="/services/covoiturage/mes_annonces/{{ annonces.previous_page_number }}" class="btn btn-outline-primary">&laquo;</a>
        {% endif %}
    
        {% for page_number in annonces.paginator.page_range %}
            {% if annonces.number == page_number %}
                <button class="btn btn-outline-primary active">
                    <span>{{ page_number }} <span class="sr-only">(current)</span></span>
                </button>
            {% else %}
                <a href="/services/covoiturage/mes_annonces/{{ page_number }}" class="btn btn-outline-primary">
                    {{ page_number }}
                </a>
            {% endif %}
        {% endfor %}
    
        {% if annonces.has_next %}
            <a href="/services/covoiturage/mes_annonces/{{ annonces.next_page_number }}" class="btn btn-outline-primary">&raquo;</a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}