{% extends "_base.html" %}
{#
    Template: resources.html
    Description: Page de ressources, telechargements et datasets
    Variables:
        - title: Titre de la page
        - introduction: Texte d'introduction
        - resources: Liste de ressources [{title, description, type, url, size, format, license}]
        - categories: Categories [{id, label, icon}]
        - page_content_html: Contenu markdown converti en HTML
#}

{% block title %}{{ title | default('Ressources') }} - {{ site.title | default('Niamoto') }}{% endblock %}

{% block content %}
<div class="resources-page py-12">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <header class="mb-12">
            <h1 class="text-3xl sm:text-4xl font-bold text-gray-800 mb-4">
                {{ title | default('Ressources') }}
            </h1>
            <div class="w-20 h-1 bg-green-600 mb-6"></div>
            {% if introduction %}
            <p class="text-lg text-gray-600 max-w-3xl">{{ introduction }}</p>
            {% endif %}
            {% if page_content_html %}
            <div class="mt-6 prose max-w-none text-gray-600">
                {{ page_content_html | safe }}
            </div>
            {% endif %}
        </header>

        <!-- Category Filter -->
        {% if categories %}
        <div class="category-filter mb-10">
            <div class="flex flex-wrap gap-3">
                <button class="filter-btn active flex items-center gap-2 px-5 py-2.5 rounded-lg bg-green-600 text-white font-medium transition-colors"
                        data-category="all">
                    <i class="fas fa-th-large"></i>
                    Toutes
                </button>
                {% for cat in categories %}
                <button class="filter-btn flex items-center gap-2 px-5 py-2.5 rounded-lg bg-white border border-gray-200 text-gray-700 font-medium hover:border-green-300 transition-colors"
                        data-category="{{ cat.id }}">
                    <i class="{{ cat.icon | default('fas fa-folder') }}"></i>
                    {{ cat.label }}
                </button>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Resources Grid -->
        <div class="resources-grid">
            {% if resources %}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {% for res in resources %}
                <article class="resource-card bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg hover:border-green-200 transition-all"
                         data-category="{{ res.type | default('other') }}">
                    <!-- Card Header -->
                    <div class="p-6 pb-4">
                        <div class="flex items-start justify-between mb-3">
                            <div class="w-12 h-12 rounded-lg flex items-center justify-center
                                        {% if res.type == 'dataset' %}bg-blue-100 text-blue-600
                                        {% elif res.type == 'document' %}bg-amber-100 text-amber-600
                                        {% elif res.type == 'tool' %}bg-purple-100 text-purple-600
                                        {% elif res.type == 'map' %}bg-green-100 text-green-600
                                        {% else %}bg-gray-100 text-gray-600{% endif %}">
                                {% if res.type == 'dataset' %}<i class="fas fa-database text-xl"></i>
                                {% elif res.type == 'document' %}<i class="fas fa-file-alt text-xl"></i>
                                {% elif res.type == 'tool' %}<i class="fas fa-tools text-xl"></i>
                                {% elif res.type == 'map' %}<i class="fas fa-map text-xl"></i>
                                {% else %}<i class="fas fa-file text-xl"></i>{% endif %}
                            </div>
                            {% if res.format %}
                            <span class="text-xs font-mono bg-gray-100 text-gray-600 px-2 py-1 rounded uppercase">
                                {{ res.format }}
                            </span>
                            {% endif %}
                        </div>

                        <h3 class="text-lg font-semibold text-gray-800 mb-2 line-clamp-2">
                            {{ res.title }}
                        </h3>
                        <p class="text-sm text-gray-600 line-clamp-3">
                            {{ res.description }}
                        </p>
                    </div>

                    <!-- Card Footer -->
                    <div class="px-6 py-4 bg-gray-50 border-t border-gray-100">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-3 text-xs text-gray-500">
                                {% if res.size %}
                                <span><i class="fas fa-weight-hanging mr-1"></i>{{ res.size }}</span>
                                {% endif %}
                                {% if res.license %}
                                <span><i class="fas fa-balance-scale mr-1"></i>{{ res.license }}</span>
                                {% endif %}
                            </div>
                            <a href="{{ res.url | relative_url(nav_depth|default(depth|default(0))) }}"
                               class="inline-flex items-center text-sm font-medium text-green-600 hover:text-green-800"
                               {% if res.url.startswith('http') %}target="_blank" rel="noopener noreferrer"{% endif %}>
                                {% if res.type == 'dataset' or res.format %}
                                <i class="fas fa-download mr-1"></i>Telecharger
                                {% else %}
                                <i class="fas fa-external-link-alt mr-1"></i>Acceder
                                {% endif %}
                            </a>
                        </div>
                    </div>
                </article>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-16">
                <div class="text-6xl mb-4">📦</div>
                <p class="text-gray-500">Aucune ressource disponible pour le moment</p>
            </div>
            {% endif %}
        </div>

        <!-- Additional Info -->
        {% if resources %}
        <div class="mt-12 bg-green-50 rounded-xl p-6 border border-green-100">
            <div class="flex items-start gap-4">
                <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-info text-green-600"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-green-800 mb-1">Conditions d'utilisation</h3>
                    <p class="text-sm text-green-700">
                        Les donnees et ressources sont mises a disposition selon les licences indiquees.
                        Merci de citer la source lors de toute utilisation.
                    </p>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Back -->
        <div class="mt-8">
            <a href="{{ 'index.html' | relative_url(nav_depth|default(depth|default(0))) }}"
               class="inline-flex items-center text-green-600 hover:text-green-800">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour a l'accueil
            </a>
        </div>
    </div>
</div>

<style>
    .resource-card.hidden { display: none; }
    .filter-btn.active { background-color: #059669; color: white; border-color: #059669; }
    .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .prose h2 { font-size: 1.25rem; font-weight: 700; color: #1f2937; margin-top: 2rem; margin-bottom: 1rem; }
    .prose h3 { font-size: 1.125rem; font-weight: 600; color: #374151; margin-top: 1.5rem; margin-bottom: 0.75rem; }
    .prose p { color: #4b5563; line-height: 1.625; margin-bottom: 1rem; }
    .prose ul { list-style-type: disc; list-style-position: inside; margin-bottom: 1rem; color: #4b5563; }
    .prose a { color: #059669; text-decoration: underline; }
    .prose a:hover { color: #065f46; }
</style>
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const filterBtns = document.querySelectorAll('.filter-btn');
        const cards = document.querySelectorAll('.resource-card');

        filterBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const category = this.dataset.category;

                // Update active state
                filterBtns.forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                // Filter cards
                cards.forEach(card => {
                    if (category === 'all' || card.dataset.category === category) {
                        card.classList.remove('hidden');
                    } else {
                        card.classList.add('hidden');
                    }
                });
            });
        });
    });
</script>
{% endblock %}