{% extends "layout.twig" %}

{% block title %}Slim Blog{% endblock %}

{% block meta %}
<meta name="description" content="{% if activeCategory %}Articles de la catégorie {{ activeCategory.name }} — {% endif %}Slim Blog, un blog propulsé par Slim 4.">
<meta property="og:type"        content="website">
<meta property="og:title"       content="Slim Blog">
<meta property="og:description" content="Un blog propulsé par Slim 4.">
<meta property="og:url"         content="{{ app_url }}/">
{% endblock %}

{% block content %}

<form method="get" action="/" class="search-bar">
    {% if activeCategory %}
    <input type="hidden" name="categorie" value="{{ activeCategory.slug }}">
    {% endif %}
    <input type="search" name="q" value="{{ searchQuery }}"
           placeholder="Rechercher un article…" class="search-bar__input" aria-label="Recherche">
    <button type="submit" class="search-bar__btn">Rechercher</button>
    {% if searchQuery %}
    <a href="/{% if activeCategory %}?categorie={{ activeCategory.slug }}{% endif %}" class="search-bar__reset">✕</a>
    {% endif %}
</form>

{% if searchQuery %}
<p class="search-bar__info">
    {% if posts is not empty %}
        {{ posts|length }} résultat{{ posts|length > 1 ? 's' : '' }} pour « {{ searchQuery }} »
    {% else %}
        Aucun résultat pour « {{ searchQuery }} »
    {% endif %}
</p>
{% endif %}

{% if categories is not empty %}
<nav class="category-filter">
    <a href="/"
       class="category-filter__item{% if activeCategory is null %} category-filter__item--active{% endif %}">
        Tous
    </a>
    {% for category in categories %}
    <a href="/?categorie={{ category.slug }}"
       class="category-filter__item{% if activeCategory and activeCategory.id == category.id %} category-filter__item--active{% endif %}">
        {{ category.name }}
    </a>
    {% endfor %}
</nav>
{% endif %}

<div class="card-list card-list--contained">
{% for post in posts %}
    {% set thumb = post_thumbnail(post) %}
    <article class="card">

        <a href="{{ post_url(post) }}" class="card__thumb-link" tabindex="-1" aria-hidden="true">
            {% if thumb %}
            <img class="card__thumb" src="{{ thumb }}" alt="">
            {% else %}
            <span class="card__initials" aria-hidden="true">{{ post_initials(post) }}</span>
            {% endif %}
        </a>

        <div class="card__content">
            <div class="card__body">
                <h2 class="card__title">
                    <a href="{{ post_url(post) }}" class="card__title-link">{{ post.title }}</a>
                </h2>

                <div class="card__meta">
                    <small>
                        Publié le {{ post.createdAt|date("d/m/Y à H:i") }}
                            par <strong>{{ post.authorUsername ?? 'inconnu' }}</strong>
                    </small>
                    {% if post.categoryName %}
                    <a href="/?categorie={{ post.categorySlug }}" class="badge badge--category">{{ post.categoryName }}</a>
                    {% endif %}
                </div>

                <p class="card__excerpt">{{ post_excerpt(post) }}</p>
            </div>

            <div class="card__actions">
                <a href="{{ post_url(post) }}" class="card__actions-link">Lire la suite →</a>
            </div>
        </div>

    </article>
{% else %}
    <p>Aucun article publié{% if searchQuery %} pour « {{ searchQuery }} »{% elseif activeCategory %} dans cette catégorie{% endif %}.</p>
{% endfor %}
</div>
{% endblock %}