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

{% block title %}{{ project.title }} — {{ config.seo.site_title }}{% endblock %}

{% block content %}

<!-- ─── En-tête projet ───────────────────────────────────────────────────── -->
<section class="project-hero">
    <div class="project-hero-container">
        <nav class="breadcrumb">
            <a href="{% url 'projects:home' %}">Accueil</a>
            <span class="breadcrumb-sep">›</span>
            <a href="{% url 'projects:list' %}">Projets</a>
            <span class="breadcrumb-sep">›</span>
            <span>{{ project.title }}</span>
        </nav>
        <div class="project-hero-content">
            <div class="project-meta-top">
                <span class="project-category-badge">{{ project.category }}</span>
                {% if project.context %}<span class="project-context-badge">{{ project.context }}</span>{% endif %}
                {% if project.complexity %}<span class="complexity-badge complexity-{{ project.complexity|lower }}">{{ project.complexity }}</span>{% endif %}
            </div>
            <h1 class="project-hero-title">{{ project.title }}</h1>
            <p class="project-hero-desc">{{ project.short_description }}</p>
            <div class="project-techs-header">
                {% for tech in project.technologies %}
                <span class="tech-tag tech-tag-lg">{{ tech }}</span>
                {% endfor %}
            </div>
            {% if project.github_url or project.demo_url %}
            <div class="project-links">
                {% if project.github_url %}
                <a href="{{ project.github_url }}" target="_blank" class="btn btn-outline btn-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
                    Voir le code
                </a>
                {% endif %}
                {% if project.demo_url %}
                <a href="{{ project.demo_url }}" target="_blank" class="btn btn-primary btn-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
                    Voir la démo
                </a>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</section>

<!-- ─── Contenu détaillé ─────────────────────────────────────────────────── -->
<section class="section">
    <div class="detail-container">
        <div class="detail-main">

            <!-- Galerie images -->
            {% if project.images %}
            <div class="gallery-section">
                <h2 class="detail-section-title">Galerie</h2>
                <div class="gallery-grid">
                    {% for img in project.images %}
                    <div class="gallery-item" onclick="openLightbox('{{ img }}')">
                        <img src="{{ img }}" alt="{{ project.title }} — image {{ forloop.counter }}" loading="lazy">
                        <div class="gallery-overlay">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <!-- Problématique & Solution -->
            {% if project.problem or project.solution %}
            <div class="problem-solution-grid">
                {% if project.problem %}
                <div class="ps-card ps-problem">
                    <div class="ps-icon">⚡</div>
                    <h3 class="ps-title">Problématique</h3>
                    <p class="ps-text">{{ project.problem }}</p>
                </div>
                {% endif %}
                {% if project.solution %}
                <div class="ps-card ps-solution">
                    <div class="ps-icon">✓</div>
                    <h3 class="ps-title">Solution apportée</h3>
                    <p class="ps-text">{{ project.solution }}</p>
                </div>
                {% endif %}
            </div>
            {% endif %}

            <!-- Description complète -->
            <div class="description-section">
                <h2 class="detail-section-title">Description du projet</h2>
                <div class="description-content">
                    {{ project.full_description|linebreaks }}
                </div>
            </div>

            <!-- Résultat -->
            {% if project.outcome %}
            <div class="outcome-section">
                <h2 class="detail-section-title">Résultat</h2>
                <div class="outcome-card">
                    <span class="outcome-icon">🎯</span>
                    <p>{{ project.outcome }}</p>
                </div>
            </div>
            {% endif %}

        </div>

        <!-- ─── Sidebar ──────────────────────────────────────────────────── -->
        <aside class="detail-sidebar">

            <!-- Infos clés -->
            <div class="sidebar-card">
                <h3 class="sidebar-card-title">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                    Informations
                </h3>
                <ul class="info-list">
                    {% if project.context %}
                    <li class="info-item"><span class="info-label">Contexte</span><span class="info-value">{{ project.context }}</span></li>
                    {% endif %}
                    {% if project.period %}
                    <li class="info-item"><span class="info-label">Période</span><span class="info-value">{{ project.period }}</span></li>
                    {% endif %}
                    {% if project.role %}
                    <li class="info-item"><span class="info-label">Rôle</span><span class="info-value">{{ project.role }}</span></li>
                    {% endif %}
                    {% if project.complexity %}
                    <li class="info-item"><span class="info-label">Complexité</span><span class="info-value">{{ project.complexity }}</span></li>
                    {% endif %}
                </ul>
            </div>

            <!-- Points clés -->
            {% if project.highlights %}
            <div class="sidebar-card">
                <h3 class="sidebar-card-title">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                    Points clés
                </h3>
                <ul class="highlights-list">
                    {% for highlight in project.highlights %}
                    <li class="highlight-item">
                        <span class="highlight-check">✓</span>
                        {{ highlight }}
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}

            <!-- Technologies -->
            <div class="sidebar-card">
                <h3 class="sidebar-card-title">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
                    Technologies
                </h3>
                <div class="sidebar-techs">
                    {% for tech in project.technologies %}
                    <a href="{% url 'projects:list' %}?tech={{ tech }}" class="tech-tag tech-tag-clickable">{{ tech }}</a>
                    {% endfor %}
                </div>
            </div>

            <!-- Catégorie -->
            <div class="sidebar-card">
                <h3 class="sidebar-card-title">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20h16M4 4h16M9 9h6M9 15h6"/></svg>
                    Catégorie
                </h3>
                <a href="{% url 'projects:list' %}?category={{ project.category }}" class="category-link">
                    {{ project.category }}
                </a>
            </div>

        </aside>
    </div>
</section>

<!-- ─── Navigation projet précédent / suivant ────────────────────────────── -->
<section class="project-nav-section">
    <div class="project-nav-container">
        {% if prev_project %}
        <a href="{% url 'projects:detail' prev_project.slug %}" class="project-nav-card project-nav-prev">
            <span class="nav-direction">← Précédent</span>
            <span class="nav-project-title">{{ prev_project.title }}</span>
        </a>
        {% else %}<div></div>{% endif %}

        <a href="{% url 'projects:list' %}" class="btn btn-outline">Tous les projets</a>

        {% if next_project %}
        <a href="{% url 'projects:detail' next_project.slug %}" class="project-nav-card project-nav-next">
            <span class="nav-direction">Suivant →</span>
            <span class="nav-project-title">{{ next_project.title }}</span>
        </a>
        {% else %}<div></div>{% endif %}
    </div>
</section>

<!-- ─── Lightbox ─────────────────────────────────────────────────────────── -->
<div class="lightbox" id="lightbox" onclick="closeLightbox()">
    <button class="lightbox-close" onclick="closeLightbox()">✕</button>
    <img class="lightbox-img" id="lightboxImg" src="" alt="">
</div>

{% endblock %}
