<!DOCTYPE html>

<html lang="{{ app.request.locale|slice(0, 2) }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>{% block title %}Sylius{% endblock %}</title>

    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    {% block metatags %}
    {% endblock %}

    {% include '@SyliusShop/Layout/Header/fonts.html.twig' %}

    {% block stylesheets %}
        {{ sylius_template_event('sylius.shop.layout.stylesheets') }}
    {% endblock %}

    {{ sylius_template_event('sylius.shop.layout.head') }}
</head>

<body class="{% block bodyClass %}{% endblock %}">
{{ sylius_template_event('sylius.shop.layout.before_body') }}

<main class="content-wrapper">
    <div id="main" class="content-container">
    {% block header %}
        {{ sylius_template_event('sylius.shop.layout.header') }}
    {% endblock %}

    {% block flash %}
        {% include '@SyliusShop/_flashes.html.twig' %}
    {% endblock %}

    {{ sylius_template_event('sylius.shop.layout.before_content') }}

    {% block content %}
    {% endblock %}

    {{ sylius_template_event('sylius.shop.layout.after_content') }}

    <a href="#" class="btn-back-top">{{ 'app.ui.backtotop'|trans }}</a>
    </div>

    {% block footer %}
        {% include '@SyliusShop/_footer.html.twig' %}
    {% endblock %}
</main>

{% block modal %}
{% endblock %}

{% block javascripts %}
    {{ sylius_template_event('sylius.shop.layout.javascripts') }}
{% endblock %}

{% include '@SyliusUi/Modal/_confirmation.html.twig' with { isFrontOffice: true } %}
{{ sylius_template_event('sylius.shop.layout.after_body') }}
</body>
</html>
