{% extends 'base_account.html.twig' %}

{% block title %}Mon Espace Rêves - {{ parent() }}{% endblock %}

{% block account_body %}
{# Section avec padding et hauteur minimale #}
<section class="py-12 px-4 min-h-[calc(100vh-theme(spacing.32))] flex items-center"> {# Hauteur ajustée pour nav #}
    <div class="container mx-auto max-w-4xl">
        {# Utilisation de la classe card-bg définie dans base_account.html.twig #}
        <div class="card-bg p-8 rounded-lg shadow-lg">
            <div class="flex flex-col sm:flex-row justify-between items-center mb-8 gap-4"> {# Marge inférieure augmentée #}
                <h2 class="text-3xl font-semibold text-text-primary">Mes Rêves Enregistrés</h2>
                {# Bouton stylisé avec la classe btn-primary #}
                <a href="#" {# {{ path('app_dream_new') }} #} class="btn-primary w-full sm:w-auto flex-shrink-0">Ajouter un nouveau rêve</a>
            </div>

            {# Affichage de la liste des rêves #}
            {% if dreams is not empty %}
                <div class="space-y-6"> {# Espace augmenté entre les rêves #}
                    {% for dream in dreams %}
                        {# Bordure plus subtile utilisant la variable CSS #}
                        <div class="border border-[var(--border-color)] border-opacity-40 p-6 rounded-md flex flex-col sm:flex-row justify-between items-start gap-4 transition-all duration-300 hover:border-opacity-70 hover:shadow-md">
                            <div class="flex-grow"> {# Permettre au contenu de s'étendre #}
                                <h3 class="font-semibold text-xl mb-2 text-text-primary">{{ dream.titre|default('Rêve sans titre') }}</h3>
                                <p class="text-sm text-text-secondary mb-3">Enregistré le: {{ dream.createdAt ? dream.createdAt|date('d/m/Y \à H:i') : 'Date inconnue' }}</p>
                                {# Afficher un extrait ou d'autres infos si pertinent #}
                                <p class="text-base text-text-secondary italic">{{ dream.content|slice(0, 150)|default('') }}{% if dream.content|length > 150 %}...{% endif %}</p> {# Taille de police et extrait légèrement plus grand #}
                            </div>
                            <div class="flex gap-3 mt-3 sm:mt-0 flex-shrink-0 self-center sm:self-start"> {# Gap et alignement ajustés #}
                                {# Boutons stylisés avec btn-secondary, taille ajustée #}
                                <a href="#" {# {{ path('app_dream_edit', {'id': dream.id}) }} #} class="btn-secondary text-sm px-4 py-1 disabled opacity-50 cursor-not-allowed" aria-disabled="true">Modifier</a>
                                {# Bouton supprimer spécifique #}
                                <a href="#" 
                                   {# {{ path('app_dream_delete', {'id': dream.id}) }} #} 
                                   class="btn-secondary text-sm px-4 py-1 text-red-400 border-red-400 hover:bg-red-700 hover:text-white disabled opacity-50 cursor-not-allowed" 
                                   aria-disabled="true" 
                                   onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce rêve ?');">Supprimer</a>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center py-10 border border-dashed border-[var(--border-color)] border-opacity-30 rounded-md mt-6">
                    <p class="text-text-secondary italic text-lg">Vous n'avez pas encore enregistré de rêve.</p>
                    <p class="text-text-secondary mt-2">Cliquez sur "Ajouter un nouveau rêve" pour commencer.</p>
                </div>
            {% endif %}
        </div>
    </div>
</section>
{% endblock %}