{% extends 'base.html' %}
{% load i18n static %}

{% block title %}{% blocktrans %}Argelg | Agenda des activités{% endblocktrans %}{% endblock %}


{% block header %}
    {% include 'frags/nav.html' %}
{% endblock %}

{% block content %}

<section class="wrapper wrapper--centered">

    <div class="column column--spaced column--bottom heading">
        <div class="container--title">
            <h1 class="title title--line">Agenda <br>des activités</h1>
        </div>
        <div class="container--form">
            <form class="filtre" method="GET">
                <select class="field" name="filterby" onchange="this.form.submit()">
                    <option value="">Trier par</option>
                    <option value="date" {% if filterby == 'date' %}selected{% endif %}>Date</option>
                    <option value="place" {% if filterby == 'place' %}selected{% endif %}>Lieu</option>
                    <option value="orga" {% if filterby == 'orga' %}selected{% endif %}>Organisateur</option>
                </select>
            </form>

        </div>
    </div>

    {% if events %}
    <ul>
        {% for event in events %}
        <li>
            <article class="column list">
                <figure class="container--img list__img">
                    <img src="{% if event.is_geoformation %}/static/img/geoformation.png{% else %}{{ event.image.url }}{% endif %}" alt="{% trans 'Photo événement' %}">
                </figure>

                <div class="list__infos">

                    <div class="column column--spaced column--centered list__head">
                        <div class="list__title">
                            {% if event.is_geoformation %}
                            <h2 class="subtitle text--color">{{ event.name }}</h2>
                            {% else %}
                            <h2 class="subtitle text--color">{{ event.title }}</h2>
                            {% endif %}
                            {% if event.subtitle %}
                            <span class="baseline">{{ event.subtitle }}</span>
                            {% endif %}
                        </div>

                        {% if event.subscription_available is True and not event.is_past %}
                        {% if event.available_seats_number == 0 %}
                            {% if not event.pk in user_registrations %}
                            <span class="tag">Complet</span>
                            {% else %}
                            <span class="tag">Vous êtes déjà inscrit à cet événement</span>
                            {% endif %}
                        {% else %}
                            {% if not event.pk in user_registrations %}
                            {% if event.is_geoformation %}
                            <a class="btn btn--no-mt" title="{% trans 'S\'inscrire à l\'événement' %}" href="{{ geoformation_url }}/formations/inscription/{{ event.slug }}/">{% trans 'M\'inscrire' %}</a>
                            {% else %}
                            <a class="btn btn--no-mt" title="{% trans 'S\'inscrire à l\'événement' %}" href="{% url 'event_register' slug=event.slug%}">{% trans 'M\'inscrire' %}</a>
                            {% endif %}
                            {% else %}
                            <span class="tag">Vous êtes déjà inscrit à cet événement</span>
                            {% endif %}
                        {% endif %}
                        {% endif %}
                    </div>

                    <ul class="event__details column column--top">
                        <li>
                            <h3 class="subtitle--small">Date</h3>
                            <p>{{ event.date|date:"d F Y, G:i" }}</p>
                        </li>

                        <li>
                            <h3 class="subtitle--small">Lieu</h3>
                            {% if event.maps_link %}
                            <p><a class="link--simple" href="{{ event.maps_link }}" target="_blank" title="Voir l'emplacement sur une carte">{{ event.place }}</a></p>
                            {% else %}
                            <p>{{ event.place }}</p>
                            {% endif %}
                        </li>

                        {% if event.speakers %}
                        <li>
                            <h3 class="subtitle--small">Intervenants</h3>
                            <p>{{ event.speakers }}</p>
                        </li>
                        {% endif %}

                        {% if event.organizer %}
                        <li>
                            <h3 class="subtitle--small">Organisateurs</h3>
                            <p>{{ event.organizer }}</p>
                        </li>
                        {% endif %}
                    </ul>

                    <div>
                        <h3 class="subtitle--small">Description</h3>
                        <div class="summary">{{ event.description|safe|linebreaksbr|truncatechars:250  }}</div>
    
                        <div class="more-text">{{ event.description|safe|linebreaksbr }}</div>
    
                        {% if event.description|safe|linebreaksbr|length > 250 %}
                        <button class="link--simple link--more" href="#">Lire plus +</button>
                        {% endif %}
                    </div>

                    {% if event.subscription_available is True %}
                    <div class="list__details">
                        {% if not event.total_seats_number and not event.available_seats_number %}
                            Pas d'information sur le nombre de places
                        {% endif %}

                        <p>
                            {% if event.total_seats_number %}
                                <span>Nombre de places disponibles: {{ event.total_seats_number }}</span>
                            {% endif %}
    
                            {% if event.available_seats_number or event.available_seats_number == 0 %}
                                <span>| Nombre de places restantes: {{ event.available_seats_number }}</span>
                            {% endif %}
                        </p>
                    </div>
                    {% endif %}
                </div>
            </article>
        </li>
        {% endfor %}
        
    </ul>
    {% endif %}

    {% if is_paginated %}
    <ul class="column column--right pagination">

        {% if page_obj.has_previous %}
        <li class="pagination__item">
            <a title="Page précédente" href="?page={{ page_obj.previous_page_number }}{{queryparam_filter}}">
                <img class="pagination__arrow" src="{% static 'img/arrow--prev.svg' %}" alt="Icône d'une flèche">
            </a>
        </li>
        {% endif %}


        <li class="pagination__item pagination__item--current">
            <span>{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
        </li>


        {% if page_obj.has_next %}
        <li class="pagination__item">
            <a title="Page suivante" href="?page={{ page_obj.next_page_number }}{{queryparam_filter}}">
                <img class="pagination__arrow" src="{% static 'img/arrow--next.svg' %}" alt="Icône d'une flèche">
            </a>
        </li>
        {% endif %}
    </ul>
    {% endif %}
</section>

<section class="bg-color">
    <div class="wrapper wrapper--centered">
        <div class="align--center">
            {% if access_token %}
            <p class="subtitle">{% trans "Comment s'inscrire ?" %}</p>

            <p>{% trans "Cliquez sur le bouton « M\'inscrire » en haut à droite de chaque évènement pour y souscrire." %}</p>

            <p>{% trans "Si le bouton « M\'inscrire » n'apparait pas, c'est qu'il n'est pas possible de s'inscrire à cet évènement." %}</p>
            {% else %}
            <p class="subtitle">{% trans 'Pour pouvoir souscrire à l\'un de ces évènements, vous devez vous connecter.' %}</p>
            
            <a class="btn" title="{% trans 'Accéder à la page de connexion' %}" href="{% url 'login' %}">{% trans 'Se connecter' %}</a>

            <p>Pas de compte ? <a class="link" title="{% trans 'Accéder à la page d\'inscription' %}" href="https://www.argelg.be/inscription/" target="_blank">{% trans 'S\'inscrire' %}</a></p>
            
            {% endif %}
        </div>
    </div>
</section>
{% endblock %}

{% block footer %}
    {% include 'frags/footer.html' with footer__classes="footer--no-margin" %}
{% endblock %}