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

{% block title %}{% trans_text 'Universités Partenaires' 'Partner Universities' 'Partneruniversitäten' %} - {{ settings.site_name }}{% endblock %}

{% block content %}
{% trans_text 'Universités Partenaires' 'Partner Universities' 'Partneruniversitäten' as tr_page_title %}
{% trans_text 'Découvrez notre consortium d\'universités européennes' 'Discover our consortium of European universities' 'Entdecken Sie unser Konsortium europäischer Universitäten' as tr_page_subtitle %}
{% include 'components/breadcrumb.html' with page_title=tr_page_title page_subtitle=tr_page_subtitle %}

<!-- Carte interactive des universités -->
{% if map_settings.show_on_universities_page %}
{% include 'components/university_map.html' %}
{% endif %}

<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {% for university in universities %}
            <a href="{% url 'universities:detail' university.slug %}" class="bg-gray-50 rounded-lg overflow-hidden hover:shadow-lg transition group">
                <div class="h-48 bg-gradient-to-br from-primary to-secondary flex items-center justify-center" style="{% if university.color %}background: linear-gradient(135deg, {{ university.color }}, {{ university.color }}cc);{% endif %}">
                    {% if university.logo %}
                    <img src="{{ university.logo.url }}" alt="{{ university.name }}" class="h-24 object-contain">
                    {% else %}
                    <span class="text-4xl font-bold text-white">{{ university.abbreviation|default:university.name|slice:":3" }}</span>
                    {% endif %}
                </div>
                <div class="p-6">
                    <div class="flex items-center mb-2">
                        {% if university.is_coordinator %}
                        <span class="inline-block bg-accent text-primary text-xs font-medium px-2 py-1 rounded mr-2">{% trans_text 'Coordinateur' 'Coordinator' 'Koordinator' %}</span>
                        {% endif %}
                        <span class="text-sm text-gray-500">{{ university.city }}, {{ university.country }}</span>
                    </div>
                    <h3 class="font-semibold text-lg text-primary group-hover:text-secondary transition">{{ university|translate:'name' }}</h3>
                    <p class="text-gray-600 text-sm mt-2">{{ university|translate:'short_description'|default:university|translate:'description'|truncatewords:20 }}</p>
                    {% if university.ranking_position %}
                    <div class="mt-4 text-sm text-gray-500">
                        <span class="font-medium text-secondary">#{{ university.ranking_position }}</span> {% trans_text 'Classement mondial' 'World ranking' 'Weltrangliste' %}
                    </div>
                    {% endif %}
                </div>
            </a>
            {% empty %}
            <div class="col-span-full text-center py-12 text-gray-500">
                {% trans_text 'Aucune université disponible pour le moment.' 'No university available at the moment.' 'Derzeit keine Universität verfügbar.' %}
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}