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

{% block title %}Projets — Portfolio Alexandre{% endblock %}

{% block content %}

<!-- ─── En-tête page projets ─────────────────────────────────────────────── -->
<section class="page-header">
    <div class="page-header-container">
        <span class="section-tag">Réalisations</span>
        <h1 class="page-title">Mes Projets</h1>
        <p class="page-sub">{{ total_count }} projet{{ total_count|pluralize }} — filtrez par technologie ou catégorie</p>
    </div>
</section>

<!-- ─── Filtres ──────────────────────────────────────────────────────────── -->
<section class="filters-section">
    <div class="filters-container">
        <form method="GET" action="{% url 'projects:list' %}" class="filters-form" id="filtersForm">

            <!-- Filtre catégorie -->
            <div class="filter-group">
                <label class="filter-label">Catégorie</label>
                <div class="filter-pills" id="categoryPills">
                    <button type="button"
                            class="filter-pill {% if not selected_category %}active{% endif %}"
                            data-filter="category"
                            data-value="">
                        Toutes
                    </button>
                    {% for cat in categories %}
                    <button type="button"
                            class="filter-pill {% if selected_category == cat %}active{% endif %}{% if forloop.counter > 5 %} pill-hidden{% endif %}"
                            data-filter="category"
                            data-value="{{ cat }}"
                            {% if forloop.counter > 5 %}data-extra="true"{% endif %}>
                        {{ cat }}
                    </button>
                    {% endfor %}
                    {% if categories|length > 5 %}
                    <button type="button" class="filter-pill pill-more" data-target="categoryPills" data-total="{{ categories|length|add:'-5' }}">
                        +{{ categories|length|add:"-5" }} voir plus
                    </button>
                    {% endif %}
                </div>
                <input type="hidden" name="category" id="categoryInput" value="{{ selected_category }}">
            </div>

            <!-- Filtre technologie -->
            <div class="filter-group">
                <label class="filter-label">Technologie</label>
                <div class="filter-pills" id="techPills">
                    <button type="button"
                            class="filter-pill {% if not selected_tech %}active{% endif %}"
                            data-filter="tech"
                            data-value="">
                        Toutes
                    </button>
                    {% for tech in technologies %}
                    <button type="button"
                            class="filter-pill {% if selected_tech == tech %}active{% endif %}{% if forloop.counter > 5 %} pill-hidden{% endif %}"
                            data-filter="tech"
                            data-value="{{ tech }}"
                            {% if forloop.counter > 5 %}data-extra="true"{% endif %}>
                        {{ tech }}
                    </button>
                    {% endfor %}
                    {% if technologies|length > 5 %}
                    <button type="button" class="filter-pill pill-more" data-target="techPills" data-total="{{ technologies|length|add:'-5' }}">
                        +{{ technologies|length|add:"-5" }} voir plus
                    </button>
                    {% endif %}
                </div>
                <input type="hidden" name="tech" id="techInput" value="{{ selected_tech }}">
            </div>

            {% if selected_category or selected_tech %}
            <a href="{% url 'projects:list' %}" class="btn btn-ghost btn-sm">
                ✕ Réinitialiser les filtres
            </a>
            {% endif %}
        </form>
    </div>
</section>

<!-- ─── Grille projets ───────────────────────────────────────────────────── -->
<section class="section">
    <div class="section-container">

        {% if selected_category or selected_tech %}
        <div class="filter-result-info">
            <span>{{ total_count }} résultat{{ total_count|pluralize }}</span>
            {% if selected_category %}<span class="filter-tag-active">{{ selected_category }}</span>{% endif %}
            {% if selected_tech %}<span class="filter-tag-active">{{ selected_tech }}</span>{% endif %}
        </div>
        {% endif %}

        <div class="projects-grid projects-grid-full" id="projectsGrid">
            {% for project in projects %}
            <div class="project-card">
                <div class="card-image-wrapper">
                    {% if project.images %}
                        <img src="{{ project.images.0 }}" alt="{{ project.title }}" class="card-image" onerror="this.parentElement.classList.add('no-image')">
                    {% else %}
                        <div class="card-image-placeholder">
                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
                        </div>
                    {% endif %}
                    <div class="card-category-badge">{{ project.category }}</div>
                </div>
                <div class="card-body">
                    <h3 class="card-title">{{ project.title }}</h3>
                    <p class="card-desc">{{ project.short_description }}</p>
                    <div class="card-techs">
                        {% for tech in project.technologies|slice:":5" %}
                        <span class="tech-tag">{{ tech }}</span>
                        {% endfor %}
                        {% if project.technologies|length > 5 %}
                        <span class="tech-tag tech-tag-more">+{{ project.technologies|length|add:"-5" }}</span>
                        {% endif %}
                    </div>
                    <a href="{% url 'projects:detail' project.slug %}" class="card-link">
                        Voir le projet
                        <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="M5 12h14M12 5l7 7-7 7"/></svg>
                    </a>
                </div>
            </div>
            {% empty %}
            <div class="empty-state-container">
                <div class="empty-icon">🔍</div>
                <h3>Aucun projet trouvé</h3>
                <p>Essayez de modifier vos filtres ou <a href="{% url 'projects:list' %}">réinitialisez</a>.</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

{% endblock %}

{% block extra_js %}
<script>
document.querySelectorAll('.pill-more').forEach(btn => {
  const container = document.getElementById(btn.dataset.target);
  // Sélectionne uniquement les pills "extra" (au-delà des 5 premières)
  const extraPills = container.querySelectorAll('.pill-hidden[data-filter]');
  const total = parseInt(btn.dataset.total || extraPills.length);

  btn.addEventListener('click', () => {
    const isExpanded = btn.dataset.expanded === 'true';

    if (!isExpanded) {
      container.querySelectorAll('.pill-hidden[data-filter]').forEach(p => p.classList.remove('pill-hidden'));
      btn.textContent = 'voir moins ↑';
      btn.classList.add('pill-less');
      btn.dataset.expanded = 'true';
    } else {
      container.querySelectorAll('.filter-pill[data-extra="true"]').forEach(p => p.classList.add('pill-hidden'));
      btn.textContent = '+' + total + ' voir plus';
      btn.classList.remove('pill-less');
      btn.dataset.expanded = 'false';
    }
  });
});
</script>
{% endblock %}