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

{% block header_user %}
    {% if app.user %}
        <div class="site-header__user">
            <a href="{{ path('admin_articles_index') }}">{{ 'nav.admin'|trans }}</a>
            <a href="{{ path('_logout_main') }}">{{ 'nav.logout'|trans }}</a>
        </div>
    {% endif %}
{% endblock %}

{% block body %}
    <div class="public-shell">
        <!-- <div class="home-fractal-banner" data-controller="fractal-banner" aria-hidden="true">
            <canvas data-fractal-banner-target="canvas"></canvas>
        </div> -->

        <div class="sort-tabs">
            <a href="{{ path('home', {sort: 'latest'}) }}" class="sort-tabs__link {{ sort == 'latest' ? 'sort-tabs__link--active' }}">{{ 'home.sort.latest'|trans }}</a>
            <a href="{{ path('home', {sort: 'popular'}) }}" class="sort-tabs__link {{ sort == 'popular' ? 'sort-tabs__link--active' }}">{{ 'home.sort.popular'|trans }}</a>
        </div>

        {{ plugin_hook('home_top') }}

        <div class="article-list">
            {% for article in articles %}
                <article class="article-card">
                    {% if article.imageUrl %}
                        <img src="{{ article.imageUrl }}" alt="" class="article-card__image">
                    {% endif %}
                    <div class="article-card__body">
                        <h2 class="article-card__title">
                            <a href="{{ path('article_show', {slug: article.slug}) }}">{{ article.title }}</a>
                        </h2>
                        <div class="article-card__meta">
                            <span class="adm__badge adm__badge--category">{{ article.category.name }}</span>
                            {% for tag in article.tags %}
                                <a href="{{ path('tag_show', {slug: tag.slug}) }}" class="adm__badge adm__badge--tag">{{ tag.name }}</a>
                            {% endfor %}
                        </div>
                        <p class="article-card__summary">{{ article.summary|raw }}</p>
                        <div class="article-card__footer">
                            {{ 'common.by'|trans }} {{ article.author.name }} &middot; {{ article.createdAt|date('d/m/Y') }}
                        </div>
                    </div>
                </article>
            {% else %}
                <p>{{ 'home.empty'|trans }}</p>
            {% endfor %}
        </div>

        {{ plugin_hook('home_bottom') }}
    </div>
{% endblock %}