{% sw_extends '@Storefront/storefront/base.html.twig' %}

{% block base_header %}
    <header class="header-main">
        {% block base_header_inner %}
            <div class="container mx-auto p-4 pb-0">
                {% sw_include '@Storefront/storefront/layout/header/header.html.twig' %}
            </div>
        {% endblock %}
    </header>
{% endblock %}

{% block base_navigation %}
    <div class="nav-main border-b border-gray-300 mb-5">
        {% block base_navigation_inner %}
            {% sw_include '@Storefront/storefront/layout/navigation/navigation.html.twig' %}
        {% endblock %}
    </div>
{% endblock %}

{% block base_main %}
    <main class="content-main container mx-auto sm:px-4">
        {% block base_flashbags %}
            <div class="flashbags">
                {% for type, messages in app.flashes %}
                    {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with { type: type, list: messages } %}
                {% endfor %}
            </div>
        {% endblock %}

        {% block base_main_inner %}
            {% block base_main_container %}
                <div class="container-main">
                    {% block base_breadcrumb %}
                        {% if breadcrumbList %}
                            {% sw_include '@Storefront/storefront/layout/breadcrumb.html.twig' %}
                        {% endif %}
                    {% endblock %}

                    {% block base_content %}{% endblock %}
                </div>
            {% endblock %}
        {% endblock %}
    </main>
{% endblock %}

{% block base_offcanvas_navigation %}

{% endblock %}

{% block base_footer %}
    <!-- footer-main -->
    <footer>
        {% block base_footer_inner %}
            {% sw_include '@Storefront/storefront/layout/footer/footer.html.twig' %}
        {% endblock %}
    </footer>
{% endblock %}

{% block base_scroll_up %}

{% endblock %}

{% block base_cookie_permission %}

{% endblock %}

{% block base_pseudo_modal %}

{% endblock %}

{% block base_script_hmr_mode %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('tailwindcss/runtime.js', '@Tailwind') }}"></script>
    <script type="text/javascript" src="{{ asset('tailwindcss/js/app.js', '@Tailwind') }}"></script>
{% endblock %}