{% extends '@SyliusShop/layout.html.twig' %}

{% block bodyClass %}page-cms{% endblock %}

{% block flash %}
{% endblock %}

{% block content %}
    <div class="container">
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ path('sylius_shop_homepage') }}">{{ 'sylius.ui.home'|trans }}</a></li>
                <li class="breadcrumb-item active">{{ page.breadcrumb }}</li>
            </ol>
        </nav>

        {% include '@SyliusShop/_flashes.html.twig' with { 'class' : 'margin-bottom-2' } %}

        <h1 class="h1 cms-page-title">{{ page.name }}</h1>

        {% if page.image %}
            <div class="main-img-cms">
                {% set path = preview is defined and preview == true ? page.image.path : '/media/image/'~page.image.path %}
                <img class="img-fluid" src="{{ path }}" alt="">
            </div>
        {% endif %}

        <div class="bitbag-page-content">
            {{ page.content ? page.content|dedi_cms_render_field('row') : '' }}
        </div>

        <div class="bitbag-page-sections">
            {% include '@BitBagSyliusCmsPlugin/Shop/Page/Show/_sections.html.twig' %}
        </div>

        {% if page.products|length > 0 %}
            <h2 class="h2">
                {{ 'bitbag_sylius_cms_plugin.ui.page_related_products'|trans }}
            </h2>
            <div class="bitbag-page-products">
                {% include '@SyliusShop/Product/_horizontalList.html.twig' with {'products': page.products} %}
            </div>
        {% endif %}
    </div>
{% endblock %}
