{% sw_extends '@Storefront/storefront/base.html.twig' %}

{% block base_content %}
    <div class="container rm-page">
        <header class="rm-hero">
            <span class="rm-hero-word" aria-hidden="true">Magazin</span>
            <div class="rm-hero-copy">
                <h1>{{ page.activeCategory ? page.activeCategory.name : 'Magazin' }}</h1>
                <p>
                    {%- if page.activeCategory and page.activeCategory.description -%}
                        {{ page.activeCategory.description }}
                    {%- else -%}
                        Tests, Empfehlungen und Anleitungen aus unserem Fachhandel – zu Geräten, Liquids und allem, was dazugehört.
                    {%- endif -%}
                </p>
            </div>
        </header>

        {% if page.categories is not empty %}
            <nav class="rm-cats" aria-label="Themen">
                <a href="{{ path('frontend.riccardo.magazine.list') }}" class="{{ page.activeCategory ? '' : 'is-active' }}">Alle Themen</a>
                {% for cat in page.categories %}
                    <a href="{{ path('frontend.riccardo.magazine.category', { slug: cat.slug }) }}"
                       class="{{ page.activeCategory and page.activeCategory.id == cat.id ? 'is-active' : '' }}">{{ cat.name }}</a>
                {% endfor %}
            </nav>
        {% endif %}

        {% if page.posts is not empty %}
            <div class="rm-grid">
                {% for post in page.posts %}
                    {% sw_include '@RiccardoMagazine/storefront/riccardo-magazine/post-card.html.twig' with { post: post } %}
                {% endfor %}
            </div>

            {% if page.totalPages > 1 %}
                <nav class="rm-pagination" aria-label="Seiten">
                    {% set route = page.activeCategory ? 'frontend.riccardo.magazine.category' : 'frontend.riccardo.magazine.list' %}
                    {% set params = page.activeCategory ? { slug: page.activeCategory.slug } : {} %}
                    {% if page.currentPage > 1 %}
                        <a href="{{ path(route, params|merge({ p: page.currentPage - 1 })) }}">Neuere</a>
                    {% endif %}
                    <span>Seite {{ page.currentPage }} von {{ page.totalPages }}</span>
                    {% if page.currentPage < page.totalPages %}
                        <a href="{{ path(route, params|merge({ p: page.currentPage + 1 })) }}">Ältere</a>
                    {% endif %}
                </nav>
            {% endif %}
        {% else %}
            <p class="rm-empty">Hier erscheinen bald Beiträge.</p>
        {% endif %}
    </div>
{% endblock %}