{% extends 'base.html' %}
{% load traduction_tags %}

{% block title %}{% trans_text 'Équipe' 'Team' 'Team' %} - {{ settings.site_name }}{% endblock %}

{% block content %}
{% trans_text 'Notre Équipe' 'Our Team' 'Unser Team' as tr_page_title %}
{% trans_text 'Enseignants, doctorants et étudiants' 'Teachers, PhD students and students' 'Dozenten, Doktoranden und Studenten' as tr_page_subtitle %}
{% include 'components/breadcrumb.html' with page_title=tr_page_title page_subtitle=tr_page_subtitle %}

<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Filters -->
        <div class="mb-8 flex flex-wrap gap-4">
            <div>
                <select class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary" onchange="window.location.href='?type=' + this.value">
                    <option value="">{% trans_text 'Tous les membres' 'All members' 'Alle Mitglieder' %}</option>
                    <option value="professor" {% if current_type == 'professor' %}selected{% endif %}>{% trans_text 'Professeurs' 'Professors' 'Professoren' %}</option>
                    <option value="phd" {% if current_type == 'phd' %}selected{% endif %}>{% trans_text 'Doctorants' 'PhD Students' 'Doktoranden' %}</option>
                    <option value="master" {% if current_type == 'master' %}selected{% endif %}>{% trans_text 'Étudiants Master' 'Master Students' 'Masterstudenten' %}</option>
                </select>
            </div>
            <div>
                <select class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary" onchange="window.location.href='?university=' + this.value">
                    <option value="">{% trans_text 'Toutes les universités' 'All universities' 'Alle Universitäten' %}</option>
                    {% for uni in universities %}
                    <option value="{{ uni.slug }}" {% if current_university == uni.slug %}selected{% endif %}>{{ uni|translate:'name' }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <!-- Professors -->
        {% if professors %}
        <div class="mb-12">
            <h2 class="text-2xl font-bold text-primary mb-6">{% trans_text 'Professeurs' 'Professors' 'Professoren' %}</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                {% for member in professors %}
                <a href="{% url 'team:detail' member.slug %}" class="bg-gray-50 rounded-lg overflow-hidden hover:shadow-lg transition group">
                    {% if member.photo %}
                    <img src="{{ member.photo.url }}" alt="{{ member.full_name }}" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
                    {% else %}
                    <div class="w-full h-48 bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white text-4xl font-bold">
                        {{ member.first_name.0 }}{{ member.last_name.0 }}
                    </div>
                    {% endif %}
                    <div class="p-4">
                        {% if member.is_director or member.is_coordinator %}
                        <span class="inline-block bg-accent text-primary text-xs font-medium px-2 py-1 rounded mb-2">{{ member.get_role_display }}</span>
                        {% endif %}
                        <h3 class="font-semibold text-primary group-hover:text-secondary transition">
                            {% if member.professor %}{{ member.professor.get_title_display }} {% endif %}{{ member.full_name }}
                        </h3>
                        {% if member.professor.position %}
                        <p class="text-sm text-gray-500">{{ member.professor.position }}</p>
                        {% endif %}
                        {% if member.university %}
                        <p class="text-xs text-gray-400 mt-1">{{ member.university.name }}</p>
                        {% endif %}
                    </div>
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- PhD Students -->
        {% if phd_students %}
        <div class="mb-12">
            <h2 class="text-2xl font-bold text-primary mb-6">{% trans_text 'Doctorants' 'PhD Students' 'Doktoranden' %}</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                {% for member in phd_students %}
                <a href="{% url 'team:detail' member.slug %}" class="bg-gray-50 rounded-lg overflow-hidden hover:shadow-lg transition group">
                    {% if member.photo %}
                    <img src="{{ member.photo.url }}" alt="{{ member.full_name }}" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
                    {% else %}
                    <div class="w-full h-48 bg-gradient-to-br from-secondary to-primary flex items-center justify-center text-white text-4xl font-bold">
                        {{ member.first_name.0 }}{{ member.last_name.0 }}
                    </div>
                    {% endif %}
                    <div class="p-4">
                        <h3 class="font-semibold text-primary group-hover:text-secondary transition">{{ member.full_name }}</h3>
                        {% if member.phd_student %}
                        <p class="text-sm text-gray-500 line-clamp-2">{{ member.phd_student.thesis_title|truncatewords:8 }}</p>
                        {% endif %}
                        {% if member.university %}
                        <p class="text-xs text-gray-400 mt-1">{{ member.university.name }}</p>
                        {% endif %}
                        {% if member.nationality_code %}
                        <span class="inline-block mt-2 text-lg" title="{{ member.country }}">
                            {% if member.nationality_code == 'FR' %}&#127467;&#127479;{% endif %}
                            {% if member.nationality_code == 'DE' %}&#127465;&#127466;{% endif %}
                            {% if member.nationality_code == 'IT' %}&#127470;&#127481;{% endif %}
                            {% if member.nationality_code == 'BE' %}&#127463;&#127466;{% endif %}
                            {% if member.nationality_code == 'PT' %}&#127477;&#127481;{% endif %}
                            {% if member.nationality_code == 'SE' %}&#127480;&#127466;{% endif %}
                        </span>
                        {% endif %}
                    </div>
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Master Students -->
        {% if master_students %}
        <div>
            <h2 class="text-2xl font-bold text-primary mb-6">{% trans_text 'Étudiants Master' 'Master Students' 'Masterstudenten' %}</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                {% for member in master_students %}
                <a href="{% url 'team:detail' member.slug %}" class="bg-gray-50 rounded-lg overflow-hidden hover:shadow-lg transition group">
                    {% if member.photo %}
                    <img src="{{ member.photo.url }}" alt="{{ member.full_name }}" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
                    {% else %}
                    <div class="w-full h-48 bg-gradient-to-br from-accent to-secondary flex items-center justify-center text-white text-4xl font-bold">
                        {{ member.first_name.0 }}{{ member.last_name.0 }}
                    </div>
                    {% endif %}
                    <div class="p-4">
                        <h3 class="font-semibold text-primary group-hover:text-secondary transition">{{ member.full_name }}</h3>
                        {% if member.master_student %}
                        <p class="text-sm text-gray-500">{% trans_text 'Promotion' 'Cohort' 'Jahrgang' %} {{ member.master_student.cohort_year }}</p>
                        {% if member.master_student.specialization %}
                        <p class="text-xs text-secondary">{{ member.master_student.specialization.name }}</p>
                        {% endif %}
                        {% endif %}
                        {% if member.nationality_code %}
                        <span class="inline-block mt-2 text-lg" title="{{ member.country }}">
                            {% if member.nationality_code == 'FR' %}&#127467;&#127479;{% endif %}
                            {% if member.nationality_code == 'DE' %}&#127465;&#127466;{% endif %}
                            {% if member.nationality_code == 'IT' %}&#127470;&#127481;{% endif %}
                            {% if member.nationality_code == 'BE' %}&#127463;&#127466;{% endif %}
                            {% if member.nationality_code == 'PT' %}&#127477;&#127481;{% endif %}
                            {% if member.nationality_code == 'SE' %}&#127480;&#127466;{% endif %}
                        </span>
                        {% endif %}
                    </div>
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {% if not professors and not phd_students and not master_students %}
        <div class="text-center py-12 text-gray-500">
            {% trans_text 'Aucun membre disponible pour le moment.' 'No member available at the moment.' 'Derzeit kein Mitglied verfügbar.' %}
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}