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

{% block title %}{% blocktrans %}Argelg | Le Géomètre-Expert{% 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">Le Géomètre-Expert</h1>
        </div>

        <div class="container--form">
            <form class="filtre" method="GET">
                <select class="field" name="category" onchange="this.form.submit()">
                    <option value="">{% trans "Catégorie d'articles" %}</option>
                    <option {% if 'category' in request.GET and request.GET.category == '' %}selected{% endif %} value="">{% trans "Toutes" %}</option>
                    {% for category in categories %}
                    <option {% if 'category' in request.GET and request.GET.category == category.slug %}selected{% endif %} value="{{ category.slug }}">{{ category.title }}</option>
                    {% endfor %}
                </select>
            </form>

        </div>
    </div>

    <ul>
        {% for article in news %}
        <li>
            <article class="column list">
                <figure class="container--img list__img">
                    <img src="{{ article.image.url }}" alt="Image de l'article">
                </figure>

                <div class="list__infos">
                    <h2 class="subtitle text--color">{{ article.title }}</h2>

                    <p>{{ article.summary|truncatechars:250 }}</p>

                    <a class="link" href="{% url 'single-new' slug=article.slug %}">Lire plus +</a>
                </div>

            </article>
        </li>
        {% endfor %}
    </ul>

    
    {% 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 }}">
                <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 }}">
                <img class="pagination__arrow" src="{% static 'img/arrow--next.svg' %}" alt="Icône d'une flèche">
            </a>
        </li>
        {% endif %}
    </ul>
    {% endif %}

</section>
{% endblock %}

{% block footer %}
    {% include 'frags/footer.html' %}
{% endblock %}