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

{% form_theme form '@SyliusShop/Form/theme.html.twig' %}

{% import '@SyliusUi/Macro/messages.html.twig' as messages %}

{% set header = 'sylius.ui.your_shopping_cart' %}

{% block title %}{{ parent() }} | {{ header|trans }}{% endblock %}

{% block content %}
    {% if not cart.empty %}
        {{ sylius_template_event('sylius.shop.cart.header', {'header': header, 'cart': cart}) }}
        <section id="shop-cart">
            <div class="container">
                <div class="shop-cart">
                {{ sylius_template_event('sylius.shop.cart.items', {'cart': cart, 'form': form}) }}
                </div>
            </div>
        </section>
        {{ sylius_template_event('sylius.shop.cart.summary', {'cart': cart}) }}
        {{ sylius_template_event('sylius.shop.cart.suggestions', {'cart': cart}) }}
    {% else %}
        <section id="page-title">
            <div class="container">
                <div class="page-title">
                    <h1>{{ header | trans }}</h1>
                    <p>{{ 'sylius.ui.edit_your_items_apply_coupon_or_proceed_to_the_checkout'|trans }}</p>
                </div>
                <div class="breadcrumb justify-content-center" style="background-color: transparent">
                    <ul>
                        <li><a href="{{ path('sylius_shop_homepage') }}"><i class="fa fa-home"></i></a> </li>
                        <li class="active" aria-current="page">{{header | trans}}</li>
                    </ul>
                </div>
            </div>
        </section>
        <section id="shop-cart">
            <div class="container">
                <div class="p-t-10 m-b-20 text-center">
                    <div class="heading-text heading-line text-center">
                        <h4>  {{ messages.info('sylius.ui.your_cart_is_empty') }}</h4>
                    </div>
                    <a class="btn icon-left" href="{{ path('sylius_shop_homepage') }}"><span>{{'sylius.ui.home' | trans}}</span></a>
                </div>
            </div>
        </section>
    {% endif %}
{% endblock %}