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

{% block title %}Appel a candidature {{ current_call.academic_year|default:"" }} - {{ settings.site_name }}{% endblock %}
{% block meta_description %}Appel a candidature pour le programme EUROMA {{ current_call.academic_year|default:"" }}. Consultez les dates, les documents requis et postulez en ligne.{% endblock %}

{% block content %}
{% include 'components/breadcrumb.html' with page_title="Appel a candidature" page_subtitle=current_call.academic_year %}

{% if current_call %}
<!-- Hero Section with Status -->
<section class="py-12 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-gradient-to-br from-primary to-primary/80 rounded-2xl shadow-xl overflow-hidden">
            <div class="p-8 md:p-12">
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
                    <!-- Info principale -->
                    <div class="text-white">
                        <div class="flex items-center gap-3 mb-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium"
                                  style="background-color: {{ current_call.status_color }}20; color: {{ current_call.status_color }}; border: 1px solid {{ current_call.status_color }};">
                                {% if current_call.status == 'open' %}
                                <span class="w-2 h-2 rounded-full bg-green-500 mr-2 animate-pulse"></span>
                                {% endif %}
                                {{ current_call.get_status_display }}
                            </span>
                            <span class="text-white/70 text-sm">Annee academique {{ current_call.academic_year }}</span>
                        </div>
                        <h1 class="text-3xl md:text-4xl font-bold mb-4">{{ current_call.title }}</h1>
                        {% if current_call.description %}
                        <p class="text-white/80 text-lg max-w-2xl">{{ current_call.description }}</p>
                        {% endif %}
                    </div>

                    <!-- Compteur / CTA -->
                    <div class="flex-shrink-0">
                        {% if current_call.is_open %}
                        <div class="bg-white rounded-xl p-6 text-center shadow-lg">
                            <p class="text-gray-500 text-sm mb-2">Temps restant</p>
                            <div class="text-4xl font-bold text-secondary mb-2">{{ current_call.days_remaining }}</div>
                            <p class="text-gray-600 mb-4">jours</p>
                            {% if current_call.application_url %}
                            <a href="{{ current_call.application_url }}" target="_blank"
                               class="inline-flex items-center px-6 py-3 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition font-semibold">
                                <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="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/>
                                </svg>
                                Postuler maintenant
                            </a>
                            {% endif %}
                        </div>
                        {% elif current_call.status == 'upcoming' %}
                        <div class="bg-white rounded-xl p-6 text-center shadow-lg">
                            <p class="text-gray-500 text-sm mb-2">Ouverture le</p>
                            <div class="text-2xl font-bold text-primary mb-2">{{ current_call.opening_date|date:"d M Y" }}</div>
                            <p class="text-gray-600">Soyez pret!</p>
                        </div>
                        {% elif current_call.status == 'closed' %}
                        <div class="bg-gray-100 rounded-xl p-6 text-center">
                            <p class="text-gray-500 text-sm mb-2">Candidatures closes</p>
                            <div class="text-xl font-bold text-gray-600 mb-2">depuis le {{ current_call.deadline_date|date:"d M Y" }}</div>
                            {% if current_call.results_date %}
                            <p class="text-gray-500">Resultats le {{ current_call.results_date|date:"d M Y" }}</p>
                            {% endif %}
                        </div>
                        {% elif current_call.status == 'results' %}
                        <div class="bg-amber-50 rounded-xl p-6 text-center border border-amber-200">
                            <svg class="w-12 h-12 mx-auto text-amber-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
                            </svg>
                            <p class="text-amber-800 font-semibold">Resultats publies</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Informations cles -->
<section class="py-12 bg-gray-50">
    <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-4 gap-6">
            <!-- Places disponibles -->
            {% if current_call.places_available %}
            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                <div class="flex items-center">
                    <div class="w-12 h-12 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-4">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-3xl font-bold text-primary">{{ current_call.places_available }}</p>
                        <p class="text-gray-500 text-sm">Places disponibles</p>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Bourses disponibles -->
            {% if current_call.scholarships_available %}
            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                <div class="flex items-center">
                    <div class="w-12 h-12 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-4">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-3xl font-bold text-primary">{{ current_call.scholarships_available }}</p>
                        <p class="text-gray-500 text-sm">Bourses Erasmus Mundus</p>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Date limite -->
            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                <div class="flex items-center">
                    <div class="w-12 h-12 rounded-full bg-red-100 text-red-600 flex items-center justify-center mr-4">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-xl font-bold text-primary">{{ current_call.deadline_date|date:"d M Y" }}</p>
                        <p class="text-gray-500 text-sm">Date limite</p>
                    </div>
                </div>
            </div>

            <!-- Rentree -->
            {% if current_call.start_date %}
            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                <div class="flex items-center">
                    <div class="w-12 h-12 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-4">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-xl font-bold text-primary">{{ current_call.start_date|date:"M Y" }}</p>
                        <p class="text-gray-500 text-sm">Rentree academique</p>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</section>

<!-- Timeline / Chronogramme -->
{% with timeline_events=current_call.get_timeline_events %}
{% if timeline_events %}
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-primary text-center mb-4">Chronogramme</h2>
        <p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">Les etapes cles du processus de candidature pour l'annee academique {{ current_call.academic_year }}</p>

        <div class="relative">
            <!-- Timeline line (desktop) -->
            <div class="hidden lg:block absolute top-8 left-0 right-0 h-1 bg-gray-200"></div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-{{ timeline_events|length|default:4 }} gap-6">
                {% for event in timeline_events %}
                <div class="relative">
                    <!-- Dot -->
                    <div class="hidden lg:flex absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-0 w-16 h-16 rounded-full items-center justify-center z-10
                        {% if event.is_completed %}bg-green-500 text-white{% elif event.is_current %}bg-secondary text-white ring-4 ring-secondary/30{% elif event.is_past %}bg-gray-400 text-white{% else %}bg-white text-gray-400 border-2 border-gray-200{% endif %}">
                        <i class="fas {{ event.event_icon }} text-xl"></i>
                    </div>

                    <!-- Card -->
                    <div class="lg:mt-24 bg-gray-50 rounded-xl p-6 {% if event.is_current %}ring-2 ring-secondary{% endif %}">
                        <div class="flex items-center lg:hidden mb-3">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center mr-3
                                {% if event.is_completed %}bg-green-500 text-white{% elif event.is_current %}bg-secondary text-white{% elif event.is_past %}bg-gray-400 text-white{% else %}bg-gray-200 text-gray-500{% endif %}">
                                <i class="fas {{ event.event_icon }}"></i>
                            </div>
                            <span class="text-sm font-medium {% if event.is_current %}text-secondary{% else %}text-gray-500{% endif %}">
                                {{ event.event_date|date:"d M Y" }}
                            </span>
                        </div>

                        <p class="hidden lg:block text-sm font-medium text-center mb-2 {% if event.is_current %}text-secondary{% else %}text-gray-500{% endif %}">
                            {{ event.event_date|date:"d M Y" }}
                        </p>
                        <h3 class="font-semibold text-primary lg:text-center">{{ event.title }}</h3>
                        {% if event.description %}
                        <p class="text-gray-600 text-sm mt-2 lg:text-center">{{ event.description }}</p>
                        {% endif %}

                        {% if event.is_completed %}
                        <p class="text-green-600 text-sm mt-2 lg:text-center font-medium">
                            <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            Termine
                        </p>
                        {% elif event.is_current %}
                        <p class="text-secondary text-sm mt-2 lg:text-center font-medium animate-pulse">En cours</p>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>
{% endif %}
{% endwith %}

<!-- Documents requis -->
{% if current_call.documents_required %}
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-primary text-center mb-4">Documents requis</h2>
        <p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">Preparez les documents suivants avant de soumettre votre candidature</p>

        <div class="max-w-3xl mx-auto">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 divide-y">
                {% for doc in current_call.get_documents_list %}
                <div class="flex items-center p-4">
                    <div class="w-8 h-8 rounded-full bg-secondary/10 text-secondary flex items-center justify-center mr-4 flex-shrink-0">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                    </div>
                    <span class="text-gray-700">{{ doc }}</span>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>
{% endif %}

<!-- Conditions d'admission -->
{% if requirements %}
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-primary text-center mb-4">Conditions d'admission</h2>
        <p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">Verifiez que vous remplissez les criteres d'eligibilite avant de postuler</p>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for req in requirements %}
            <div class="bg-gray-50 rounded-xl p-6 border-l-4 border-secondary hover:shadow-md transition">
                <div class="flex items-start">
                    {% if req.icon %}
                    <div class="w-10 h-10 rounded-full bg-secondary/10 text-secondary flex items-center justify-center mr-4 flex-shrink-0">
                        <i class="fas {{ req.icon }}"></i>
                    </div>
                    {% endif %}
                    <div>
                        <h3 class="text-lg font-semibold text-primary mb-2">{{ req.title }}</h3>
                        <p class="text-gray-600 text-sm">{{ req.description }}</p>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <div class="text-center mt-8">
            <a href="{% url 'program:eligibility' %}" class="inline-flex items-center text-secondary hover:text-secondary/80 font-medium">
                Voir tous les criteres d'eligibilite
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </a>
        </div>
    </div>
</section>
{% endif %}

<!-- Bourses -->
{% if scholarships %}
<section class="py-16 bg-gradient-to-br from-secondary to-secondary/80 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-center mb-4">Bourses disponibles</h2>
        <p class="text-white/80 text-center mb-12 max-w-2xl mx-auto">Plusieurs types de bourses sont disponibles pour les candidats selectionnes</p>

        <div class="grid md:grid-cols-3 gap-6">
            {% for scholarship in scholarships %}
            <div class="bg-white/10 backdrop-blur rounded-xl p-6 border border-white/20">
                <h3 class="text-xl font-bold mb-2">{{ scholarship.name }}</h3>
                <p class="text-white/80 text-sm mb-4">{{ scholarship.description|truncatewords:30 }}</p>
                {% if scholarship.amount %}
                <p class="text-2xl font-bold">{{ scholarship.amount|floatformat:0 }} EUR</p>
                {% endif %}
            </div>
            {% endfor %}
        </div>

        <div class="text-center mt-8">
            <a href="{% url 'program:scholarship' %}" class="inline-flex items-center px-6 py-3 bg-white text-secondary rounded-lg hover:bg-white/90 transition font-semibold">
                En savoir plus sur les bourses
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </a>
        </div>
    </div>
</section>
{% endif %}

<!-- Informations complementaires -->
{% if current_call.additional_info %}
<section class="py-16 bg-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-primary text-center mb-8">Informations complementaires</h2>
        <div class="prose prose-lg max-w-none text-gray-600">
            {{ current_call.additional_info|linebreaks }}
        </div>
    </div>
</section>
{% endif %}

<!-- FAQ -->
{% if faqs %}
<section class="py-16 bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-primary text-center mb-12">Questions frequentes</h2>

        <div class="space-y-4" x-data="{ openFaq: null }">
            {% for faq in faqs %}
            <div class="border rounded-lg overflow-hidden bg-white">
                <button @click="openFaq = openFaq === {{ forloop.counter }} ? null : {{ forloop.counter }}"
                        class="w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50 transition">
                    <span class="font-medium text-primary">{{ faq.question }}</span>
                    <svg class="w-5 h-5 text-gray-500 transition-transform" :class="{ 'rotate-180': openFaq === {{ forloop.counter }} }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div x-show="openFaq === {{ forloop.counter }}" x-collapse class="px-6 py-4 bg-gray-50 border-t">
                    <p class="text-gray-600">{{ faq.answer }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<!-- Autres appels a candidature -->
{% if all_calls|length > 1 %}
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-primary text-center mb-8">Historique des appels</h2>

        <div class="grid md:grid-cols-3 lg:grid-cols-4 gap-4">
            {% for call in all_calls %}
            <a href="{% url 'program:call_for_applications_detail' call.academic_year %}"
               class="block p-4 rounded-lg border-2 transition
                      {% if call.academic_year == current_call.academic_year %}
                      border-secondary bg-secondary/5
                      {% else %}
                      border-gray-200 hover:border-secondary/50 hover:bg-gray-50
                      {% endif %}">
                <div class="flex items-center justify-between">
                    <span class="font-semibold text-primary">{{ call.academic_year }}</span>
                    <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium"
                          style="background-color: {{ call.status_color }}20; color: {{ call.status_color }};">
                        {{ call.get_status_display }}
                    </span>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<!-- CTA Final -->
<section class="py-16 bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        {% if current_call.is_open %}
        <h2 class="text-2xl font-bold text-primary mb-4">Pret a postuler?</h2>
        <p class="text-gray-600 mb-8">Ne manquez pas cette opportunite. Les candidatures sont ouvertes jusqu'au {{ current_call.deadline_date|date:"d F Y" }}.</p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            {% if current_call.application_url %}
            <a href="{{ current_call.application_url }}" target="_blank"
               class="px-8 py-3 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition font-medium shadow-lg">
                Soumettre ma candidature
            </a>
            {% endif %}
            <a href="{% url 'program:apply' %}"
               class="px-8 py-3 border-2 border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition font-medium">
                Guide de candidature
            </a>
        </div>
        {% else %}
        <h2 class="text-2xl font-bold text-primary mb-4">Des questions?</h2>
        <p class="text-gray-600 mb-8">Contactez-nous pour toute information sur le programme et les candidatures.</p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{% url 'contact:contact' %}"
               class="px-8 py-3 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition font-medium">
                Nous contacter
            </a>
            {% if current_call.application_email %}
            <a href="mailto:{{ current_call.application_email }}"
               class="px-8 py-3 border-2 border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition font-medium">
                {{ current_call.application_email }}
            </a>
            {% endif %}
        </div>
        {% endif %}
    </div>
</section>

{% else %}
<!-- Pas d'appel en cours -->
<section class="py-24 bg-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-gray-100 flex items-center justify-center">
            <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
        </div>
        <h1 class="text-3xl font-bold text-primary mb-4">Aucun appel a candidature en cours</h1>
        <p class="text-gray-600 mb-8 max-w-2xl mx-auto">
            Il n'y a pas d'appel a candidature actif pour le moment. Inscrivez-vous a notre newsletter pour etre informe de l'ouverture des prochaines candidatures.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{% url 'program:about' %}"
               class="px-8 py-3 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition font-medium">
                Decouvrir le programme
            </a>
            <a href="{% url 'contact:contact' %}"
               class="px-8 py-3 border-2 border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition font-medium">
                Nous contacter
            </a>
        </div>
    </div>
</section>
{% endif %}
{% endblock %}