{% extends '@SyliusShop/layout.html.twig' %}
{% block title %}
{{ post.title }} - {{ parent() }}
{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ path('sylius_shop_homepage') }}">Accueil</a></li>
        <li class="breadcrumb-item"><a href="{{ path('article_index') }}">Blog</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ post.title }}</li>
    </ol>
</nav>
<section class="position-relative overflow-hidden pb-3">
    <div class="container">
        <div class="row g-4 g-lg-6">

            <!-- Title and author -->
            <div class="col-lg-8 mx-auto text-center">
                {% if post.category is defined and post.category.name is defined %}
                    <a href="#" class="badge text-bg-dark mb-4">{{ post.category.name }}</a>
                {% endif %}
                <h1 class="h2 mb-0">{{ post.title }}</h1>
            </div>

            <!-- Image -->
            <div class="col-lg-8 mx-auto text-center">
                {% set img = post.image is defined and post.image ? post.image : null %}
                {% if img %}
                    <img src="{{ img }}" class="img-fluid rounded" alt="blog-img">
                {% endif %}
            </div>

            <!-- Content -->
            <div class="col-lg-8 mx-auto">
                {{ post.content|html_unescape }}
            </div>  

            <!-- Quote and actions -->
            {% if post.tags is defined and post.tags %}
                <div class="col-lg-8 mx-auto text-center">
                    <div class="align-items-center">
                        <h6>Tags :</h6>
                        <ul class="list-inline mb-0">
                            {% for tag in post.tags %}
                                <li class="list-inline-item">
                                    <a class="btn btn-outline-dark btn-sm mb-lg-0" href="#">{{ tag.name ?? tag }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            {% endif %}
        </div> <!-- Row END -->
    </div>
</section>
{% endblock %}