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

{% block title %}Comment postuler? - {{ settings.site_name }}{% endblock %}
{% block meta_description %}Decouvrez comment postuler au programme EUROMA : etapes, documents requis et calendrier des candidatures.{% endblock %}

{% block content %}
{% include 'components/breadcrumb.html' with page_title="Comment postuler?" page_subtitle="Guide de candidature" %}

<!-- Introduction -->
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-3xl mx-auto text-center mb-12">
            <h1 class="text-4xl font-bold text-primary mb-6">Comment postuler au programme EUROMA?</h1>
            <p class="text-xl text-gray-600">
                Suivez notre guide etape par etape pour soumettre votre candidature au programme Erasmus Mundus Joint Master Degree.
            </p>
        </div>

        <!-- Call to Action -->
        {% if program.application_url %}
        <div class="text-center mb-12">
            <a href="{{ program.application_url }}" target="_blank"
               class="inline-flex items-center px-8 py-4 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition font-semibold text-lg shadow-lg">
                <svg class="w-6 h-6 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>
        </div>
        {% endif %}
    </div>
</section>

<!-- Timeline / Etapes -->
{% if timeline %}
<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-12">Calendrier des candidatures</h2>

        <div class="relative">
            <!-- Timeline line -->
            <div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-secondary/20"></div>

            <div class="space-y-8">
                {% for step in timeline %}
                <div class="relative flex items-center {% if forloop.counter|divisibleby:2 %}md:flex-row-reverse{% endif %}">
                    <!-- Timeline dot -->
                    <div class="hidden md:flex absolute left-1/2 transform -translate-x-1/2 w-10 h-10 rounded-full bg-secondary text-white items-center justify-center font-bold z-10">
                        {{ forloop.counter }}
                    </div>

                    <!-- Content -->
                    <div class="w-full md:w-1/2 {% if forloop.counter|divisibleby:2 %}md:pl-12{% else %}md:pr-12{% endif %}">
                        <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
                            <div class="flex items-center mb-3">
                                <span class="md:hidden w-8 h-8 rounded-full bg-secondary text-white flex items-center justify-center font-bold mr-3">
                                    {{ forloop.counter }}
                                </span>
                                <span class="text-sm font-medium text-secondary">{{ step.date|date:"d F Y" }}</span>
                            </div>
                            <h3 class="text-xl font-semibold text-primary mb-2">{{ step.title }}</h3>
                            <p class="text-gray-600">{{ step.description }}</p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>
{% endif %}

<!-- Documents requis -->
{% 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-12">Documents requis</h2>

        <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">
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        {% if req.is_mandatory %}
                        <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-red-100 text-red-600">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                            </svg>
                        </span>
                        {% else %}
                        <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-green-100 text-green-600">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </span>
                        {% endif %}
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-semibold text-primary">{{ req.title }}</h3>
                        <p class="text-gray-600 mt-1">{{ req.description }}</p>
                        {% if req.is_mandatory %}
                        <span class="inline-block mt-2 text-xs font-medium text-red-600 bg-red-50 px-2 py-1 rounded">Obligatoire</span>
                        {% else %}
                        <span class="inline-block mt-2 text-xs font-medium text-green-600 bg-green-50 px-2 py-1 rounded">Optionnel</span>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<!-- Etapes de candidature -->
<section class="py-16 bg-gradient-to-br from-primary to-secondary 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-12">Les 5 etapes de votre candidature</h2>

        <div class="grid md:grid-cols-5 gap-4">
            <div class="text-center">
                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-white/20 flex items-center justify-center">
                    <span class="text-2xl font-bold">1</span>
                </div>
                <h3 class="font-semibold mb-2">Verifier l'eligibilite</h3>
                <p class="text-white/80 text-sm">Consultez les criteres d'admission</p>
            </div>
            <div class="text-center">
                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-white/20 flex items-center justify-center">
                    <span class="text-2xl font-bold">2</span>
                </div>
                <h3 class="font-semibold mb-2">Preparer les documents</h3>
                <p class="text-white/80 text-sm">Rassemblez tous les documents requis</p>
            </div>
            <div class="text-center">
                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-white/20 flex items-center justify-center">
                    <span class="text-2xl font-bold">3</span>
                </div>
                <h3 class="font-semibold mb-2">Remplir le formulaire</h3>
                <p class="text-white/80 text-sm">Completez la candidature en ligne</p>
            </div>
            <div class="text-center">
                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-white/20 flex items-center justify-center">
                    <span class="text-2xl font-bold">4</span>
                </div>
                <h3 class="font-semibold mb-2">Soumettre</h3>
                <p class="text-white/80 text-sm">Envoyez votre dossier avant la date limite</p>
            </div>
            <div class="text-center">
                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-white/20 flex items-center justify-center">
                    <span class="text-2xl font-bold">5</span>
                </div>
                <h3 class="font-semibold mb-2">Attendre les resultats</h3>
                <p class="text-white/80 text-sm">Les resultats sont communiques en mars</p>
            </div>
        </div>
    </div>
</section>

<!-- FAQ -->
{% if faqs %}
<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-12">Questions frequentes</h2>

        <div class="space-y-4" x-data="{ openFaq: null }">
            {% for faq in faqs %}
            <div class="border rounded-lg overflow-hidden">
                <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 %}

<!-- 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">
        <h2 class="text-2xl font-bold text-primary mb-4">Pret a postuler?</h2>
        <p class="text-gray-600 mb-8">N'hesitez pas a nous contacter si vous avez des questions.</p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            {% if program.application_url %}
            <a href="{{ program.application_url }}" target="_blank"
               class="px-8 py-3 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition font-medium">
                Postuler maintenant
            </a>
            {% endif %}
            <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>
{% endblock %}