{% extends 'foundation/front/front.html.twig' %}

{% block body_class %}Actualités{% endblock %}
{% block metaTitle %}
    {% if sectionPagePost is defined and sectionPagePost.i18ns is defined and sectionPagePost.i18ns|length > 0 %}
        {% set localeCode = sectionPagePost.i18ns[0].locale|split('_')|first %}
        {% set i18n = (app.request.locale == localeCode and sectionPagePost.i18ns[0] is defined) ? sectionPagePost.i18ns[0] : (sectionPagePost.i18ns[1] is defined ? sectionPagePost.i18ns[1] : null) %}
        {% if i18n %}
            <title> MK WBC | {{ i18n.name }}</title>
        {% endif %}
    {% else %}
        <title> MK WBC | Default Title</title>
    {% endif %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let hiddenArticles = document.querySelectorAll(".article.hidden");
            let button = document.getElementById("showMore");
            button.addEventListener("click", function () {
                let count = 0;
                hiddenArticles.forEach(article => {
                    if (count < 3) { // Afficher 3 articles à la fois
                        article.classList.remove("hidden");
                        count++;
                    }
                });

                // Mettre à jour la liste après modification
                hiddenArticles = document.querySelectorAll(".article.hidden");

                // Cacher le bouton s'il n'y a plus d'articles cachés
                if (hiddenArticles.length === 0) {
                    button.style.display = "none";
                }
            });
        });
    </script>
{% endblock %}

{% block front %}
    <main class="m_site-main m_site-main-actualites m_position-relative">
        <div class="m_breadcumbs">
            <div class="m_container-lg">
                <ul class="m_nav-breadcrumb">
                    <li>
                        <a href="{{ path('app_home') }}"><i class="fa fa-home"></i></a>
                    </li>
                    <li>
                        <span>{{ 'news'|trans }}</span>
                    </li>
                </ul>
            </div>
        </div>

        <section class="m_section-banner m_section-page">
            <div class="m_section-banner-container m_position-relative">
                <div class="m_banner-bg"
                    {% if sectionPagePost is defined and sectionPagePost.thumbnail is defined and sectionPagePost.thumbnail.filename is defined %}
                     style="background-image: url('{{ path('proxy_avatar', {'path': sectionPagePost.thumbnail.filename}) }}');"
                    {% else %}
                     style="background-image: url('{{ asset('images/default_banner.png') }}');" <!-- Fallback image -->
                {% endif %}
                >
            </div>
            <div class="m_container-lg m_position-relative">
                <div class="m_section-banner-desc">
                    {% if sectionPagePost is defined %}
                        {% if sectionPagePost.i18ns is defined and sectionPagePost.i18ns|length > 0 %}
                            {% set localeCode = sectionPagePost.i18ns[0].locale|split('_')|first %}
                            {% set i18n = (app.request.locale == localeCode and sectionPagePost.i18ns[0] is defined) ? sectionPagePost.i18ns[0] : (sectionPagePost.i18ns[1] is defined ? sectionPagePost.i18ns[1] : null) %}
                            {% if i18n %}
                                <h1>{{ i18n.name }}</h1>
                            {% endif %}
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </section>

        <section class="m_section-page m_section-page-actualites">
            <div class="m_container-lg">
                <div class="m_section-page-content">
                    <div class="m_section-page-text">
                        <div class="m_section-page-title m_text-center">
                            <h2 class="m_underline-title m_m-0">
                                {{ 'all.news'|trans }}
                            </h2>
                        </div>
                    </div>
                </div>
                <div class="m_listing-news">
                    <div class="m_flex">
                        {{ render(controller("App\\Controller\\Business\\Front\\PostsController::list")) }}
                    </div>

                    {% if posts is defined and posts|length > 6 %}
                        <div class="m_flex m_btn-flex">
                            <button id="showMore" class="m_btn-load-more">{{ 'view.more'|trans }}<i
                                        class="fa fa-angle-down"></i></button>
                        </div>
                    {% endif %}
                </div> <!-- Fermeture de m_listing-news -->
            </div> <!-- Fermeture de m_container-lg -->
        </section>

    </main>
{% endblock %}