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

{% block title %}{% blocktrans %}Argelg | Membres{% endblocktrans %}{% endblock %}

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

{% block content %}
<section class="wrapper wrapper--centered">

    <form method="GET" class="column column--spaced column--bottom heading">
        <div class="container--title">
            <h1 class="title title--line">Liste <br>des membres</h1>
        </div>

        <div class="container--form">
            <div class="field__search">
                <input class="field" type="text" placeholder="Rechercher un membre" name="search_member" value={{search}}>
                {% if search %}
                <a class="btn--delete" href='?search_member=&committee={{ filter_committee }}&postcode={{ filter_postcode }}&specialization={{ filter_special }}' title="Supprimer la recherche">x</a>
                {% endif %}
                <input class="field__search--btn" type="submit" value="">
            </div>
        </div>

        <div class="column column--spaced container--title-full">
            <div class="column column--spaced container--title-full">
                <div class="container--form container--form-select">
                    <select name="committee" class="field input--select2 input-select2--bold select--noarrow" placeholder="Type de comité" name="committee" onchange="this.form.submit()">
                        <option value="">Type de comité</option>
                        {% for committee in committees %}
                            <option value="{{ committee }}" {% if filter_committee == committee %}selected{% endif %}>{{ committee }}</option>
                        {% endfor %}
                    </select>
                    {% if filter_committee %}
                    <a class="btn--delete" href='?search_member={{ search }}&committee=&postcode={{filter_postcode}}&specialization={{filter_special}}' title="Supprimer le filtre">x</a>
                    {% endif %}
                </div>
                
                <div class="container--form container--form-select">
                    <select name="postcode" class="field input--select2 input-select2--bold select--noarrow" placeholder="Code postal" name="postcode" onchange="this.form.submit()">
                        <option value="">Code postal</option>
                        {% for postcode in postcodes %}
                            <option value="{% if postcode %}{{ postcode }}{% endif %}" {% if filter_postcode == postcode %}selected{% endif %}>{{ postcode }}</option>
                        {% endfor %}
                    </select>
                    {% if filter_postcode %}
                    <a class="btn--delete" href='?search_member={{ search }}&committee={{ filter_committee }}&postcode=&specialization={{filter_special}}' title="Supprimer le filtre">x</a>
                    {% endif %}
                </div>
                
                <div class="container--form container--form-select">
                    <select name="specialization" class="field input--select2 input-select2--bold select--noarrow" name="specialization" placeholder="Spécialisation" onchange="this.form.submit()">
                        <option value="">Spécialisation</option>
                        {% for specialization in specials %}
                            <option value="{{ specialization }}" {% if filter_special == specialization %}selected{% endif %}>{{ specialization }}</option>
                        {% endfor %}
                    </select>
                    {% if filter_special %}
                    <a class="btn--delete" href='?search_member={{ search }}&committee={{filter_committee}}&postcode={{filter_postcode}}&specialization=' title="Supprimer le filtre">x</a>
                    {% endif %}
                </div>
            </div>

        </div>
    </form>
</section>

<!-- <section class="wrapper wrapper--centered column column--spaced">
    <button class="btn__tab title btn__tab--active">Liste</button>
    <button class="btn__tab title">Carte</button>
</section> -->

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

    <!-- <h2 class="title--right">Président</h2> -->
    <ul>
        {% if not members and 'search_member' not in request.GET and 'committee' not in request.GET and 'postcode' not in request.GET and 'specialization' not in request.GET%}
        Pas de membre
        {% elif not members %}
        Pas de membre correspondant à ces critères
        {% else %}
        {% for member in members %}
        <li>
            <article class="column list">
                <div class="list__infos list__infos--full">
                    <h2 class="subtitle text--color">{{ member.last_name|upper }} {{ member.first_name }}</h2>

                    <div class="baseline">
                        <p>{% if member.public_street %}{{ member.public_street }}, {% endif %}{% if member.public_street_number %}{{ member.public_street_number }}{% endif %}</p>
                        <p>{% if member.public_zip_code %}{{ member.public_zip_code }} - {% endif %}{% if member.public_city %}{{ member.public_city }}{% endif %}</p>
                        <p>{% if member.public_country %}{{ member.public_country }}{% endif %}</p>
                    </div>

                    <div class="text--bold list__infos--details">
                        {% if member.committee %}
                        <p><span class="text--color">Comité:</span> {{ member.committee }}</p>
                        {% endif %}
                       
                        {% if member.specializations %}
                        <div>
                            <span class="text--color">Spécialisation(s):</span> 
                            <ul class="list__specs">
                            {% for spec in member.specializations %}
                                <li>{{ spec.name }}</li>
                            {% endfor %}
                            </ul>
                        </div>
                        {% endif %}

                        {% if member.functions and member.committee == "Comité directeur" %}
                        <div>
                            <span class="text--color">Fonction(s):</span> 
                            <ul class="list__specs">
                            {% for func in member.functions %}
                                <li>{{ func.name }}</li>
                            {% endfor %}
                            </ul>
                        </div>
                        {% endif %}
                    </div>

                    <ul class="list__details column">
                        {% if member.phone_number %}
                        <li>
                            <span class="subtitle--small">Tel.</span>
                            <a href="tel:{{member.phone_number}}">{{ member.phone_number }}</a>
                        </li>
                        {% endif %}

                        {% if member.phone_number_2 %}
                        <li>
                            <span class="subtitle--small">GSM</span>
                            <a href="tel:{{member.phone_number_2}}">{{ member.phone_number_2 }}</a>
                        </li>
                        {% endif %}

                        {% if member.fax_number %}
                        <li>
                            <span class="subtitle--small">Fax.</span>
                            {{ member.fax_number }}
                        </li>
                        {% endif %}

                        {% if member.user.email %}
                        <li>
                            <span class="subtitle--small">E-mail</span>
                            {{ member.user.email }}
                        </li>
                        {% endif %}

                        {% if member.site %}
                        <li>
                            <span class="subtitle--small">Site</span>
                            <a title="Accéder au site de {{ member.first_name }} {{ member.last_name }}" href="{{ member.site }}" target="_blank">{{ member.site }}</a>
                        </li>
                        {% endif %}
                    </ul>
                </div>
            </article>
        </li>
        {% endfor %}
        {% endif %}
        
    </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 }}{{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="section tab__item hide"> -->
    <!-- <div class="map">
        <div class="wrapper wrapper--centered">
            {% if members %}
            {% for member in members %}
            <div class="map__block">
                <h2 class="subtitle text--color">{{ member.first_name }} {{ member.last_name }}</h2>

                    <div class="baseline">
                        <p>{{ member.street }}, {{ member.street_number }}</p>
                        {% if member.address_info %}
                            <p>{{ member.address_info }}</p>
                        {% endif %}
                        <p>{{ member.zip_code }} - {{ member.city }}</p>
                        <p>{{ member.country }}</p>
                    </div>

                    <p>
                        <b>
                          <span class="text--color">Spécialisation:</span> {{ member.specialization }}
                        </b>
                    </p>

                    <ul class="list__details column">
                        <li>
                            <span class="subtitle--small">Tel.</span>
                            {{ member.phone_number }}
                        </li>

                        {% if member.phone_number_2 %}
                        <li>
                            <span class="subtitle--small">GSM</span>
                            {{ member.phone_number_2 }}
                        </li>
                        {% endif %}

                        {% if member.fax_number %}
                        <li>
                            <span class="subtitle--small">Fax.</span>
                            {{ member.fax_number }}
                        </li>
                        {% endif %}

                        <li>
                            <span class="subtitle--small">E-mail</span>
                            {{ member.email }}
                        </li>

                        <li>
                            <span class="subtitle--small">Site</span>
                            <a title="Accéder au site de {{ member.first_name }} {{ member.last_name }}" href="{{ member.site }}" target="_blank">{{ member.site }}</a>
                        </li>
                    </ul>
            </div>
            {% endfor %}
            {% endif %}
        </div>
    </div> -->
<!-- </section> -->
{% endblock %}

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