{% extends "dashboard/base_dash.html" %}
{% load static %}
{% block title %}Ressources — GiniFollow{% endblock %}
{% block dashboard_inner %}
<div class="px-3 px-lg-4 py-4">
    <p class="dash-help mb-4">
        <strong>Bibliothèque santé</strong> — Articles du blog, fiches PDF et supports d’éducation thérapeutique partagés par l’équipe.
        Survolez une carte pour <em>prévisualiser</em>, puis cliquez sur <strong>Lire</strong> :
        les articles s’ouvrent sur le blog public ; les documents se consultent ici avec téléchargement et partage.
    </p>
    <div class="card border-0 shadow-sm rounded-3 mb-4">
        <div class="card-body p-3 d-flex flex-wrap gap-2 align-items-center">
            <span class="small fw-bold text-muted me-2">Filtrer :</span>
            <a href="{% url 'dashboard_ressources' %}" class="btn btn-sm {% if not maladie_filter %}btn-primary{% else %}btn-outline-primary{% endif %}">Toutes</a>
            {% for code, label in maladies %}
            <a href="{% url 'dashboard_ressources' %}?maladie={{ code }}" class="btn btn-sm {% if maladie_filter == code %}btn-primary{% else %}btn-outline-primary{% endif %}">{{ label }}</a>
            {% endfor %}
        </div>
    </div>
    <div class="row g-3" id="gfRessourcesGrid">
        {% for r in ressources %}
        <div class="col-md-6 col-xl-4">
            <article class="card h-100 border-0 shadow-sm rounded-3 gf-ressource-card position-relative overflow-hidden"
                tabindex="0"
                data-slug="{{ r.slug }}"
                data-titre="{{ r.titre|escape }}"
                data-resume="{{ r.resume|default:''|truncatechars:200|escape }}"
                data-type-label="{{ r.get_type_display }}"
                {% if r.est_article_blog %}
                data-kind="blog"
                data-read-url="{% url 'blog_article' r.slug %}"
                {% elif r.fichier %}
                data-kind="document"
                data-read-url="{{ r.fichier.url }}"
                data-download-url="{{ r.fichier.url }}"
                data-filename="{{ r.titre|escape }}.pdf"
                {% elif r.url_externe %}
                data-kind="video"
                data-read-url="{{ r.url_externe|escape }}"
                {% elif r.image_principale %}
                data-kind="image"
                data-read-url="{{ r.image_principale.url }}"
                data-download-url="{{ r.image_principale.url }}"
                {% else %}
                data-kind="none"
                {% endif %}>
                {% if r.image_principale %}
                <div class="gf-ressource-thumb" style="background-image:url('{{ r.image_principale.url }}');"></div>
                {% else %}
                <div class="gf-ressource-thumb gf-ressource-thumb--placeholder d-flex align-items-center justify-content-center">
                    <i class="bi bi-file-earmark-medical fs-2 text-primary opacity-50"></i>
                </div>
                {% endif %}
                <div class="card-body p-3">
                    <span class="badge bg-light text-dark mb-2">{{ r.get_type_display }}</span>
                    <h3 class="h6 fw-bold mb-1">{{ r.titre }}</h3>
                    {% if r.maladie %}<p class="small text-muted mb-2">{{ r.get_maladie_display }}</p>{% endif %}
                    {% if r.resume %}<p class="small text-muted mb-0 gf-ressource-resume">{{ r.resume|truncatechars:120 }}</p>{% endif %}
                </div>
                <div class="gf-ressource-hover" aria-hidden="true">
                    <span class="gf-ressource-hover-label">Prévisualiser</span>
                    <button type="button" class="btn btn-light btn-sm fw-semibold gf-ressource-read-btn">Lire</button>
                </div>
            </article>
        </div>
        {% empty %}
        <p class="text-muted">Aucune ressource pour ce filtre.</p>
        {% endfor %}
    </div>
</div>

{% include "dashboard/_ressource_reader.html" %}
{% endblock %}

{% block dashboard_extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
window.GF_RESSOURCE_OPEN = {% if ressource_a_ouvrir %}"{{ ressource_a_ouvrir.slug }}"{% else %}null{% endif %};
if (typeof pdfjsLib !== 'undefined') {
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
}
</script>
<script src="{% static 'js/gf_ressource_reader.js' %}"></script>
{% endblock %}