{% extends 'base.html' %}

{% block title %}Tes ressources gratuites{% endblock %}

{% block content %}
<section class="py-20">
    <div class="max-w-3xl mx-auto px-4">
        <div class="text-center mb-12">
            <div class="text-5xl mb-4">🎁</div>
            <h1 class="font-serif text-3xl font-bold mb-4">Tes ressources gratuites</h1>
            <p class="text-gray-medium">
                {% if subscriber.first_name %}Merci {{ subscriber.first_name }} !{% endif %}
                Voici les ressources exclusives pour les abonnés de la newsletter.
            </p>
        </div>

        {% if lead_magnets %}
        <div class="grid gap-6">
            {% for magnet in lead_magnets %}
            <div class="bg-white border border-dot rounded-lg p-6 flex flex-col md:flex-row gap-6 items-center">
                {% if magnet.cover_image %}
                <div class="w-32 h-40 flex-shrink-0">
                    <img src="{{ magnet.cover_image.url }}" alt="{{ magnet.title }}" class="w-full h-full object-cover rounded shadow">
                </div>
                {% else %}
                <div class="w-32 h-40 flex-shrink-0 bg-paper-dark rounded flex items-center justify-center">
                    <svg class="w-12 h-12 text-gray-medium" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                    </svg>
                </div>
                {% endif %}

                <div class="flex-1 text-center md:text-left">
                    <h2 class="font-serif text-xl font-bold mb-2">{{ magnet.title }}</h2>
                    <p class="text-gray-medium mb-4">{{ magnet.description }}</p>
                    <a href="{% url 'newsletter:download_file' subscriber.unsubscribe_token magnet.download_token %}"
                       class="inline-flex items-center gap-2 bg-accent text-white px-6 py-3 rounded font-medium hover:bg-ink transition-colors">
                        <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                        </svg>
                        Télécharger
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-12 bg-paper-dark rounded-lg">
            <div class="text-4xl mb-4">📄</div>
            <p class="text-gray-medium">Aucune ressource disponible pour le moment.</p>
            <p class="text-gray-medium mt-2">De nouvelles ressources arrivent bientôt !</p>
        </div>
        {% endif %}

        <div class="text-center mt-12">
            <a href="/blog/" class="text-accent hover:text-ink font-medium">
                &larr; Retour au blog
            </a>
        </div>
    </div>
</section>
{% endblock %}