{% extends "_base.html" %}
{#
    Template: team.html
    Description: Page equipe, partenaires et financeurs
    Variables:
        - title: Titre de la page
        - introduction: Texte d'introduction
        - team: Liste des membres [{name, role, institution, photo, email, orcid}]
        - partners: Liste des partenaires [{name, logo, url, description}]
        - funders: Liste des financeurs [{name, logo, url}]
        - page_content_html: Contenu markdown converti en HTML
#}

{% block title %}{{ title | default('Equipe') }} - {{ site.title | default('Niamoto') }}{% endblock %}

{% block content %}
<div class="team-page py-12">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <header class="mb-12 text-center">
            <h1 class="text-3xl sm:text-4xl font-bold text-gray-800 mb-4">
                {{ title | default('Equipe & Partenaires') }}
            </h1>
            <div class="w-20 h-1 bg-green-600 mx-auto mb-6"></div>
            {% if introduction %}
            <p class="text-lg text-gray-600 max-w-3xl mx-auto">{{ introduction }}</p>
            {% endif %}
            {% if page_content_html %}
            <div class="mt-6 prose max-w-3xl mx-auto text-gray-600">
                {{ page_content_html | safe }}
            </div>
            {% endif %}
        </header>

        <!-- Team Section -->
        {% if team %}
        <section class="team-section mb-16">
            {# Collect unique groups in order of appearance #}
            {% set seen_groups = [] %}
            {% for member in team %}
                {% if member.group is defined and member.group and member.group not in seen_groups %}
                    {% set _ = seen_groups.append(member.group) %}
                {% endif %}
            {% endfor %}

            {% if seen_groups | length > 0 %}
                {# Grouped display #}
                {% for group_name in seen_groups %}
                <div class="mb-12">
                    <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-4">
                        <span class="w-10 h-10 flex-shrink-0 rounded-lg bg-green-100 flex items-center justify-center">
                            <i data-lucide="users" class="w-5 h-5 text-green-600"></i>
                        </span>
                        {{ group_name }}
                    </h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                        {% for member in team %}
                        {% if member.group == group_name %}
                        <article class="team-member bg-white rounded-xl shadow-sm border border-gray-100 p-6 text-center hover:shadow-lg transition-shadow">
                            <div class="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden bg-gray-100">
                                {% if member.photo %}
                                <img src="{{ member.photo | relative_url(depth|default(0)) }}"
                                     alt="{{ member.name }}"
                                     class="w-full h-full object-cover">
                                {% else %}
                                <div class="w-full h-full flex items-center justify-center text-3xl text-gray-400">
                                    <i data-lucide="user" class="w-8 h-8"></i>
                                </div>
                                {% endif %}
                            </div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-1">{{ member.name }}</h3>
                            {% if member.role %}
                            <p class="text-sm text-green-600 font-medium mb-2">{{ member.role }}</p>
                            {% endif %}
                            {% if member.institution %}
                            <p class="text-sm text-gray-500 mb-3">{{ member.institution }}</p>
                            {% endif %}
                            <div class="flex justify-center gap-3">
                                {% if member.email %}
                                <a href="mailto:{{ member.email }}" class="text-gray-400 hover:text-green-600 transition-colors" title="Email">
                                    <i data-lucide="mail" style="width: 1rem; height: 1rem;"></i>
                                </a>
                                {% endif %}
                                {% if member.orcid %}
                                <a href="https://orcid.org/{{ member.orcid }}" target="_blank" rel="noopener noreferrer"
                                   class="text-gray-400 hover:text-green-600 transition-colors" title="ORCID">
                                    ORCID
                                </a>
                                {% endif %}
                                {% if member.github %}
                                <a href="https://github.com/{{ member.github }}" target="_blank" rel="noopener noreferrer"
                                   class="text-gray-400 hover:text-green-600 transition-colors" title="GitHub">
                                    <i data-lucide="github" class="w-4 h-4"></i>
                                </a>
                                {% endif %}
                            </div>
                        </article>
                        {% endif %}
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}

                {# Members without a group #}
                {% set ungrouped = [] %}
                {% for member in team %}
                    {% if not member.group %}
                        {% set _ = ungrouped.append(member) %}
                    {% endif %}
                {% endfor %}
                {% if ungrouped | length > 0 %}
                <div class="mb-12">
                    <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-4">
                        <span class="w-10 h-10 flex-shrink-0 rounded-lg bg-green-100 flex items-center justify-center">
                            <i data-lucide="users" class="w-5 h-5 text-green-600"></i>
                        </span>
                        Equipe
                    </h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                        {% for member in ungrouped %}
                        <article class="team-member bg-white rounded-xl shadow-sm border border-gray-100 p-6 text-center hover:shadow-lg transition-shadow">
                            <div class="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden bg-gray-100">
                                {% if member.photo %}
                                <img src="{{ member.photo | relative_url(depth|default(0)) }}"
                                     alt="{{ member.name }}"
                                     class="w-full h-full object-cover">
                                {% else %}
                                <div class="w-full h-full flex items-center justify-center text-3xl text-gray-400">
                                    <i data-lucide="user" class="w-8 h-8"></i>
                                </div>
                                {% endif %}
                            </div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-1">{{ member.name }}</h3>
                            {% if member.role %}
                            <p class="text-sm text-green-600 font-medium mb-2">{{ member.role }}</p>
                            {% endif %}
                            {% if member.institution %}
                            <p class="text-sm text-gray-500 mb-3">{{ member.institution }}</p>
                            {% endif %}
                        </article>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

            {% else %}
                {# Flat display (no groups) #}
                <h2 class="text-2xl font-bold text-gray-800 mb-8 flex items-center gap-4">
                    <span class="w-10 h-10 flex-shrink-0 rounded-lg bg-green-100 flex items-center justify-center">
                        <i data-lucide="users" class="w-5 h-5 text-green-600"></i>
                    </span>
                    Equipe
                </h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                    {% for member in team %}
                    <article class="team-member bg-white rounded-xl shadow-sm border border-gray-100 p-6 text-center hover:shadow-lg transition-shadow">
                        <div class="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden bg-gray-100">
                            {% if member.photo %}
                            <img src="{{ member.photo | relative_url(depth|default(0)) }}"
                                 alt="{{ member.name }}"
                                 class="w-full h-full object-cover">
                            {% else %}
                            <div class="w-full h-full flex items-center justify-center text-3xl text-gray-400">
                                <i data-lucide="user" class="w-8 h-8"></i>
                            </div>
                            {% endif %}
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-1">{{ member.name }}</h3>
                        {% if member.role %}
                        <p class="text-sm text-green-600 font-medium mb-2">{{ member.role }}</p>
                        {% endif %}
                        {% if member.institution %}
                        <p class="text-sm text-gray-500 mb-3">{{ member.institution }}</p>
                        {% endif %}
                        <div class="flex justify-center gap-3">
                            {% if member.email %}
                            <a href="mailto:{{ member.email }}" class="text-gray-400 hover:text-green-600 transition-colors" title="Email">
                                <i data-lucide="mail" style="width: 1rem; height: 1rem;"></i>
                            </a>
                            {% endif %}
                            {% if member.orcid %}
                            <a href="https://orcid.org/{{ member.orcid }}" target="_blank" rel="noopener noreferrer"
                               class="text-gray-400 hover:text-green-600 transition-colors" title="ORCID">
                                ORCID
                            </a>
                            {% endif %}
                            {% if member.github %}
                            <a href="https://github.com/{{ member.github }}" target="_blank" rel="noopener noreferrer"
                               class="text-gray-400 hover:text-green-600 transition-colors" title="GitHub">
                                <i data-lucide="github" class="w-4 h-4"></i>
                            </a>
                            {% endif %}
                        </div>
                    </article>
                    {% endfor %}
                </div>
            {% endif %}
        </section>
        {% endif %}

        <!-- Partners Section -->
        {% if partners %}
        <section class="partners-section mb-16">
            <h2 class="text-2xl font-bold text-gray-800 mb-8 flex items-center gap-4">
                <span class="w-10 h-10 flex-shrink-0 rounded-lg bg-blue-100 flex items-center justify-center">
                    <i data-lucide="handshake" class="w-5 h-5 text-blue-600"></i>
                </span>
                Partenaires
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {% for partner in partners %}
                <a href="{{ partner.url }}" target="_blank" rel="noopener noreferrer"
                   class="partner-card bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex items-center gap-4 hover:shadow-lg hover:border-blue-200 transition-all">
                    {% if partner.logo %}
                    <div class="w-16 h-16 flex-shrink-0 flex items-center justify-center">
                        <img src="{{ partner.logo | relative_url(depth|default(0)) }}"
                             alt="{{ partner.name }}"
                             class="max-w-full max-h-full object-contain">
                    </div>
                    {% else %}
                    <div class="w-16 h-16 flex-shrink-0 bg-gray-100 rounded-lg flex items-center justify-center">
                        <i data-lucide="building-2" class="w-5 h-5 text-gray-400"></i>
                    </div>
                    {% endif %}
                    <div class="min-w-0">
                        <h3 class="font-semibold text-gray-800 truncate">{{ partner.name }}</h3>
                        {% if partner.description %}
                        <p class="text-sm text-gray-500 line-clamp-2">{{ partner.description }}</p>
                        {% endif %}
                    </div>
                </a>
                {% endfor %}
            </div>
        </section>
        {% endif %}

        <!-- Funders Section -->
        {% if funders %}
        <section class="funders-section mb-16">
            <h2 class="text-2xl font-bold text-gray-800 mb-8 flex items-center gap-4">
                <span class="w-10 h-10 flex-shrink-0 rounded-lg bg-amber-100 flex items-center justify-center">
                    <i data-lucide="award" class="w-5 h-5 text-amber-600"></i>
                </span>
                Financements
            </h2>

            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
                <div class="flex flex-wrap justify-center items-center gap-8 lg:gap-12">
                    {% for funder in funders %}
                    <a href="{{ funder.url }}" target="_blank" rel="noopener noreferrer"
                       class="funder-logo opacity-70 hover:opacity-100 transition-opacity"
                       title="{{ funder.name }}">
                        {% if funder.logo %}
                        <img src="{{ funder.logo | relative_url(depth|default(0)) }}"
                             alt="{{ funder.name }}"
                             class="h-12 lg:h-16 w-auto object-contain">
                        {% else %}
                        <span class="text-gray-600 font-medium">{{ funder.name }}</span>
                        {% endif %}
                    </a>
                    {% endfor %}
                </div>
            </div>
        </section>
        {% endif %}

        <!-- Back -->
        <div class="mt-8">
            <a href="{{ 'index.html' | relative_url(nav_depth|default(depth|default(0))) }}"
               class="inline-flex items-center text-green-600 hover:text-green-800">
                <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
                Retour a l'accueil
            </a>
        </div>
    </div>
</div>

<style>
    .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .prose h2 { font-size: 1.25rem; font-weight: 700; color: #1f2937; margin-top: 2rem; margin-bottom: 1rem; }
    .prose h3 { font-size: 1.125rem; font-weight: 600; color: #374151; margin-top: 1.5rem; margin-bottom: 0.75rem; }
    .prose p { color: #4b5563; line-height: 1.625; margin-bottom: 1rem; }
</style>
{% endblock %}