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

{% block title %}{{titre}}{% endblock %}
    {% block stylesheets %}
    {{ parent() }}
    {% endblock %}

{% block body %}

{# Affichage des messages flash #}
{% for message in app.flashes('success') %}
<div class="alert alert-success">
    {{ message }}
</div>
{% endfor %}
<div id="blogList" class="main-content">

    <div class="blog-main">
        {# read and display just one flash message type #}
        {% if articles %}

        {% for article in articles %}

        <article class="article-card" data-category="arrete-peril">
            <div class="article-header">
                🏚️

                <div class="article-category">{{ article.categorie.nom }}</div>
            </div>
            <div class="article-content">
                <div class="article-meta">
                </div>
                <h2 class="article-title">
                    <a href="javascript:void(0)" onclick="showArticle('arrete-peril')">{{article.titre}}</a>
                </h2>
                <p class="article-excerpt">
                    <span>📅 {{  article.datePublication | date('d/m/Y')  }} </span>
                </p>
                <p class="article-excerpt">
                    {{ article.contenu |u.truncate(150, '...') }}
                </p>
                <div class="article-tags">
                    {% if article.tag.snapshot %}
                    {% for a in article.tag.snapshot %}
                    <a href="#" class="tag">{{ a.nom }}</a>
                    {% endfor %}
                    {% endif %}
                </div>
                <a href={{ path("app_article_show", {'id' : article.id}) }} class="read-more"
                    onclick="showArticle('arrete-peril')">Lire l'article complet</a>
            </div>
        </article>

        {% endfor %}

        {% endif %}
    </div>

    <aside class="sidebar">
        <!-- CTA Widget -->
        <div class="sidebar-widget cta-widget">
            <h3>🚨 Situation d'Urgence ?</h3>
            <p>Arrêté de péril, DPE G, succession bloquée ?</p>
            <p><strong>Consultation gratuite 48h</strong></p>
            <a href="tel:0632111518" class="cta-btn">📞 06 32 11 15 18</a>
        </div>

        <!-- Newsletter -->
        <div class="sidebar-widget">
            <h3>Newsletter Expert</h3>
            <p>Recevez nos conseils exclusifs et actualités réglementaires</p>

            {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
            {{ form_widget(form) }}
            <button class="btn btn-success w-100 mt-4">{{ button_label|default("S'abonner") }}</button>
            {{ form_end(form) }}
        </div>

        <!-- Recent Posts -->
        <div class="sidebar-widget">
            <h3>Articles Populaires</h3>
            <div style="display: grid; gap: 1rem;">
                {% if articles %}
                {% for a in articles|slice(0, 3) %}
                <div style="padding-bottom: 1rem; border-bottom: 1px solid #eee;">
                    <h4 style="font-size: 14px; margin-bottom: 5px;">
                        <a href={{ path("app_article_show", {"id" : a.id}) }}
                            style="color: #2c3e50; text-decoration: none;">{{a.titre}}</a>
                    </h4>
                    <small style="color: #7f8c8d;">{{  a.datePublication | date('d/m/Y')  }}</small>
                </div>

                {% endfor %}

                {% endif %}
            </div>
        </div>
    </aside>

</div>


{% endblock %}