{% extends "base.twig" %}

{% block content %}
<main class="category-archive">
    <div class="container">
        <div class="full-block category--le-laboratoire">
            <header class="category-header">
                <div class="category-header-top">
                    <nav class="breadcrumb" aria-label="Fil d'Ariane">
                        <a href="{{ function('home_url', '/') }}">{{ current_language == 'en' ? 'Home' : 'Accueil' }}</a>
                        <span class="breadcrumb__separator">&rarr;</span>
                        <a class="breadcrumb__cat" href="{{ current_language == 'en' ? function('home_url', '/en/le-laboratoire/') : function('home_url', '/le-laboratoire/') }}">{{ current_language == 'en' ? 'The department' : 'Le laboratoire' }}</a>
                        <span class="breadcrumb__separator">&rarr;</span>
                        <span class="breadcrumb__current">{{ current_language == 'en' ? 'Lab members' : 'Membres du laboratoire' }}</span>
                    </nav>
                </div>
                <h1 class="category-header__title">{{ current_language == 'en' ? 'Lab members' : 'Membres du laboratoire' }}</h1>
            </header>

            <div class="filters-bar">
                <button class="filters-toggle-btn" id="membres-filters-toggle" aria-expanded="false">
                    {{ current_language == 'en' ? 'Filters' : 'Filtres' }}
                    <i class="iconoir-nav-arrow-down filters-chevron"></i>
                </button>
                <div class="filters-active-chips" id="membres-active-chips"></div>
            </div>
            <div class="category-filters" id="membres-filters">

                <div class="filtre-role">
                    <div class="filter-section-header">
                        <p class="section-title">{{ current_language == 'en' ? 'Filter by status' : 'Filtrer par statut' }}</p>
                        <a href="#" class="date-reset-link" id="role-reset" style="display:none">
                            {{ current_language == 'en' ? 'Reset' : 'Réinitialiser' }}
                        </a>
                    </div>
                    <div class="filter-dd" id="filter-role-dd">
                        <div class="dd-title" id="filter-role-btn">
                            <p id="filter-role-label">{{ current_language == 'en' ? 'All statuses' : 'Tous les statuts' }}</p>
                            <i class="iconoir-nav-arrow-down"></i>
                        </div>
                        <div class="dd-content" id="filter-role-popover" style="display:none;">
                            <ul>
                                <li data-role="">{{ current_language == 'en' ? 'All statuses' : 'Tous les statuts' }}</li>
                                {% for role in filter_roles %}
                                    <li data-role="{{ role.name }}">{{ role.name }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="filtre-recherche">
                    <div class="filter-section-header">
                        <p class="section-title">{{ current_language == 'en' ? 'Search a member' : 'Rechercher un membre' }}</p>
                        <a href="#" class="date-reset-link" id="search-reset" style="display:none">
                            {{ current_language == 'en' ? 'Reset' : 'Réinitialiser' }}
                        </a>
                    </div>
                    <input type="search" id="membres-search" class="membres-search-input"
                           placeholder="{{ current_language == 'en' ? 'Name…' : 'Nom…' }}"
                           autocomplete="off">
                </div>

            </div>

            <section class="membres-section">
                {% for group in groups %}
                <div class="membres-item">
                    <h3 class="membres-header" data-seance-toggle>
                        {{ group.title }}
                        <i class="iconoir-nav-arrow-down membres-chevron"></i>
                    </h3>
                    <div class="membres-content" style="display: none;">
                        <table class="membres-table"{% if group.fixed_order %} data-fixed-order{% endif %}>
                            <thead>
                                <tr>
                                    <th data-sort="nom">{{ current_language == 'en' ? 'Name' : 'Nom' }} <i class="iconoir-nav-arrow-down membres-sort-chevron"></i></th>
                                    <th data-sort="statut">{{ current_language == 'en' ? 'Status' : 'Statut' }} <i class="iconoir-nav-arrow-down membres-sort-chevron"></i></th>
                                    <th data-sort="affiliation">{{ current_language == 'en' ? 'Affiliation' : 'Affiliation' }} <i class="iconoir-nav-arrow-down membres-sort-chevron"></i></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for member in group.members %}
                                <tr onclick="window.location.href='{{ member.url }}'"
                                    data-name="{{ member.display_name }}"
                                    data-sort-name="{{ member.sort_key }}"
                                    data-roles="{{ member.role_names|join('|') }}"
                                    data-avatar="{{ member.avatar_url }}"
                                    data-status="{{ member.status }}"
                                    data-affiliation="{{ member.affiliation }}"
                                    data-domaines="{{ member.domaines|join(', ') }}"
                                    data-autres-domaines="{{ member.autres_domaines }}">
                                    <td>{{ member.display_name }}</td>
                                    <td>{{ member.status }}</td>
                                    <td>{{ member.affiliation }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% endfor %}
            </section>
        </div>
    </div>
</main>
{% endblock %}