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

{% block content %}
<div class="container">
    <article class="py-4">
        <header class="mb-4">
            <h1>{{ post.title }}</h1>
            {% include 'partials/meta.html.twig' %}
        </header>

        {% if post.thumbnail %}
            <figure class="mb-4">
                <img src="{{ post.thumbnail }}" class="img-fluid rounded post-thumbnail"
                     alt="{{ post.title|e('html_attr') }}"
                     loading="lazy">
            </figure>
        {% endif %}

        <div class="post-content">
            {{ post.content|raw }}
        </div>

        {% if post.tags|length > 0 %}
            <div class="mt-4 mb-4">
                {% for tag in post.tags %}
                    <a href="{{ tag.url }}" class="badge bg-secondary text-decoration-none me-1">
                        {{ tag.name }}
                    </a>
                {% endfor %}
            </div>
        {% endif %}

        {% include 'partials/post-navigation.html.twig' %}
        {% include 'partials/comments.html.twig' %}
    </article>

    {% if more_posts is defined and more_posts|length > 0 %}
        <section class="py-5 border-top">
            <h2 class="h4 mb-4">{{ __('More posts') }}</h2>
            <div class="row row-cols-1 row-cols-md-3 g-4">
                {% for post in more_posts %}
                    <div class="col">
                        {% include 'components/card-post-grid.html.twig' with {'post': post} only %}
                    </div>
                {% endfor %}
            </div>
        </section>
    {% endif %}
</div>
{% endblock %}