{% extends 'base.html' %}

{% block title %}{{ university.name }} - {{ settings.site_name }}{% endblock %}

{% block content %}
{% include 'components/breadcrumb.html' with page_title=university.name page_subtitle=university.city|add:", "|add:university.country %}

<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-3 gap-8">
            <!-- Main Content -->
            <div class="lg:col-span-2">
                <div class="bg-gray-50 rounded-lg p-8 mb-8">
                    <div class="flex items-start mb-6">
                        {% if university.logo %}
                        <img src="{{ university.logo.url }}" alt="{{ university.name }}" class="h-20 object-contain mr-6">
                        {% endif %}
                        <div>
                            <h2 class="text-2xl font-bold text-primary">{{ university.name }}</h2>
                            <p class="text-gray-500">{{ university.city }}, {{ university.country }}</p>
                            {% if university.is_coordinator %}
                            <span class="inline-block bg-accent text-primary text-sm font-medium px-3 py-1 rounded mt-2">Universite coordinatrice</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="text-gray-600 prose prose-sm max-w-none">{{ university.description|safe }}</div>
                </div>

                <!-- Departments -->
                {% if university.departments.all %}
                <div class="mb-8">
                    <h3 class="text-xl font-semibold text-primary mb-4">Departements</h3>
                    <div class="space-y-4">
                        {% for dept in university.departments.all %}
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h4 class="font-medium text-primary">{{ dept.name }}</h4>
                            {% if dept.specialization %}
                            <p class="text-sm text-secondary">{{ dept.specialization }}</p>
                            {% endif %}
                            {% if dept.description %}
                            <div class="text-sm text-gray-600 mt-2">{{ dept.description|safe }}</div>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <!-- Team Members -->
                {% if team_members %}
                <div>
                    <h3 class="text-xl font-semibold text-primary mb-4">Membres de l'equipe</h3>
                    <div class="grid md:grid-cols-2 gap-4">
                        {% for member in team_members %}
                        <a href="{% url 'team:detail' member.slug %}" class="flex items-center p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition">
                            {% if member.photo %}
                            <img src="{{ member.photo.url }}" alt="{{ member.full_name }}" class="w-12 h-12 rounded-full object-cover mr-4">
                            {% else %}
                            <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white font-bold mr-4">
                                {{ member.first_name.0 }}{{ member.last_name.0 }}
                            </div>
                            {% endif %}
                            <div>
                                <h4 class="font-medium text-primary">{{ member.full_name }}</h4>
                                <p class="text-sm text-gray-500">{{ member.get_person_type_display }}</p>
                            </div>
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>

            <!-- Sidebar -->
            <div class="lg:col-span-1">
                <div class="bg-gray-50 rounded-lg p-6 sticky top-24">
                    <h3 class="font-semibold text-primary mb-4">Informations</h3>

                    {% if university.founded_year %}
                    <div class="mb-4">
                        <div class="text-sm text-gray-500">Fondee en</div>
                        <div class="font-medium text-primary">{{ university.founded_year }}</div>
                    </div>
                    {% endif %}

                    {% if university.ranking_position %}
                    <div class="mb-4">
                        <div class="text-sm text-gray-500">Classement mondial</div>
                        <div class="font-medium text-primary">#{{ university.ranking_position }}</div>
                    </div>
                    {% endif %}

                    {% for stat in university.statistics.all %}
                    <div class="mb-4">
                        <div class="text-sm text-gray-500">{{ stat.get_stat_type_display }}</div>
                        <div class="font-medium text-primary">{{ stat.value }}</div>
                    </div>
                    {% endfor %}

                    <hr class="my-4">

                    <h3 class="font-semibold text-primary mb-4">Contact</h3>

                    {% if university.website %}
                    <a href="{{ university.website }}" target="_blank" class="flex items-center text-secondary hover:text-primary mb-3 transition">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
                        </svg>
                        Site web
                    </a>
                    {% endif %}

                    {% if university.email %}
                    <a href="mailto:{{ university.email }}" class="flex items-center text-secondary hover:text-primary mb-3 transition">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                        {{ university.email }}
                    </a>
                    {% endif %}

                    {% if university.address %}
                    <div class="flex items-start text-gray-600">
                        <svg class="w-5 h-5 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                        <span class="text-sm">{{ university.address }}</span>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}