{# Set variable to "true" to enable HMR (hot page reloading) mode #} 
{% set isHMRMode = app.request.headers.get('hot-reload-mode') and app.environment == 'dev' %} 
 
{% block base_doctype %} 
<!DOCTYPE html> 
{% endblock %} 
 
{% block base_html %} 
<html lang="{{ page.header.activeLanguage.translationCode.code }}" 
      itemscope="itemscope" 
      itemtype="https://schema.org/WebPage"> 
{% endblock %} 
 
{% block base_head %} 
    {% sw_include '@Storefront/storefront/layout/meta.html.twig' %} 
{% endblock %} 
 
{% block base_body %} 
    <body class="{% block base_body_classes %}is-ctl-{% if controllerName is not empty %}{{ controllerName|lower }}{% endif %} is-act-{% if controllerAction is not empty %}{{ controllerAction|lower }}{% endif %}{% endblock %}"> 
 
    {% block base_body_inner %} 
        {% block base_noscript %} 
            <noscript class="noscript-main"> 
                {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with { 
                    type: 'info', 
                    content: 'general.noscriptNotice'|trans|sw_sanitize 
                } %} 
            </noscript> 
        {% endblock %} 
 
        {% block base_header %} 
            <header class="header-main"> 
                {% block base_header_inner %} 
                    <div class="container"> 
                        {% sw_include '@Storefront/storefront/layout/header/header.html.twig' %} 
                    </div> 
                {% endblock %} 
            </header> 
        {% endblock %} 
 
        {% block base_navigation %} 
            <div class="nav-main"> 
                {% block base_navigation_inner %} 
                    {% sw_include '@Storefront/storefront/layout/navigation/navigation.html.twig' %} 
                {% endblock %} 
            </div> 
        {% endblock %} 
 
        {% block base_offcanvas_navigation %} 
            {% if page.header.navigation %} 
                <div class="d-none js-navigation-offcanvas-initial-content{% if context.salesChannel.navigationCategoryId == page.header.navigation.active.id %} is-root{% endif %}"> 
                    {% block base_offcanvas_navigation_inner %} 
                        {% sw_include '@Storefront/storefront/layout/navigation/offcanvas/navigation.html.twig' with { navigation: page.header.navigation } %} 
                    {% endblock %} 
                </div> 
            {% endif %} 
        {% endblock %} 
 
        {% block base_main %} 
            <main class="content-main"> 
                {% block base_flashbags %} 
                    <div class="flashbags container"> 
                        {% 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 %} 
                    <div class="container"> 
                        {% block base_main_container %} 
                            <div class="container-main"> 
                                {% block base_breadcrumb %} 
                                    {% sw_include '@Storefront/storefront/layout/breadcrumb.html.twig' with { 
                                        context: context, 
                                        category: page.product.seoCategory 
                                    } only %} 
                                {% endblock %} 
 
                                {% block base_content %}{% endblock %} 
                            </div> 
                        {% endblock %} 
                    </div> 
                {% endblock %} 
            </main> 
        {% endblock %} 
 
        {% block base_footer %} 
            <footer class="footer-main"> 
                {% block base_footer_inner %} 
                    {% sw_include '@Storefront/storefront/layout/footer/footer.html.twig' %} 
                {% endblock %} 
            </footer> 
        {% endblock %} 
    {% endblock %} 
 
    {% block base_scroll_up %} 
        {% sw_include '@Storefront/storefront/layout/scroll-up.html.twig' %} 
    {% endblock %} 
 
    {% block base_cookie_permission %} 
        {% sw_include '@Storefront/storefront/layout/cookie/cookie-permission.html.twig' %} 
    {% endblock %} 
 
    {% block base_pseudo_modal %} 
        {% sw_include '@Storefront/storefront/component/pseudo-modal.html.twig' %} 
    {% endblock %} 
 
    {% block base_body_script %} 
        {% if not feature('FEATURE_NEXT_15917') %} 
 
            {# @deprecated tag:v6.5.0 - Will be moved to `layout/meta.html.twig` - Use block `layout_head_javascript_token` instead #} 
            {% block base_script_token %} 
            {% endblock %} 
 
            {# @deprecated tag:v6.5.0 - Will be moved to `layout/meta.html.twig` - Use block `layout_head_javascript_router` instead #} 
            {% block base_script_router %} 
                {# Register all routes that will be needed in JavaScript to the window.router object #} 
                <script> 
                    window.activeNavigationId = '{{ page.header.navigation.active.id }}'; 
                    window.router = { 
                        'frontend.cart.offcanvas': '{{ path('frontend.cart.offcanvas') }}', 
                        'frontend.cookie.offcanvas': '{{ path('frontend.cookie.offcanvas') }}', 
                        'frontend.checkout.finish.page': '{{ path('frontend.checkout.finish.page') }}', 
                        'frontend.checkout.info': '{{ path('frontend.checkout.info') }}', 
                        'frontend.menu.offcanvas': '{{ path('frontend.menu.offcanvas') }}', 
                        'frontend.cms.page': '{{ path('frontend.cms.page') }}', 
                        'frontend.cms.navigation.page': '{{ path('frontend.cms.navigation.page') }}', 
                        'frontend.account.addressbook': '{{ path('frontend.account.addressbook') }}', 
                        'frontend.csrf.generateToken': '{{ path('frontend.csrf.generateToken') }}', 
                        'frontend.country.country-data': '{{ path('frontend.country.country.data') }}', 
                        'frontend.store-api.proxy': '{{ path('frontend.store-api.proxy') }}', 
                    }; 
                    window.storeApiProxyToken = '{{ sw_csrf("frontend.store-api.proxy", {"mode": "token"}) }}'; 
                    window.salesChannelId = '{{ app.request.attributes.get('sw-sales-channel-id') }}'; 
                </script> 
            {% endblock %} 
 
            {# @deprecated tag:v6.5.0 - Will be moved to `layout/meta.html.twig` - Use block `layout_head_javascript_breakpoints` instead #} 
            {% block base_script_breakpoints %} 
                {# Register the available viewport breakpoints the window.breakpoints object #} 
                <script> 
                    {% set breakpoint = { 
                        'xs': theme_config('breakpoint.xs'), 
                        'sm': theme_config('breakpoint.sm'), 
                        'md': theme_config('breakpoint.md'), 
                        'lg': theme_config('breakpoint.lg'), 
                        'xl': theme_config('breakpoint.xl') 
                    } %} 
 
                    {# @deprecated tag:v6.5.0 - Bootstrap v5 adds xxl breakpoint #} 
                    {% if feature('v6.5.0.0') %} 
                        {% set breakpoint = breakpoint|merge({ 
                            'xxl': theme_config('breakpoint.xxl') 
                        }) %} 
                    {% endif %} 
 
                    window.breakpoints = {{ breakpoint|json_encode()|raw }}; 
                </script> 
            {% endblock %} 
 
            {# @deprecated tag:v6.5.0 - Will be moved to `layout/meta.html.twig` - Use block `layout_head_javascript_csrf` instead #} 
            {% block base_script_csrf %} 
                <script> 
                    window.csrf = { 
                        'enabled': '{{ shopware.csrfEnabled }}', 
                        'mode': '{{ shopware.csrfMode }}' 
                    } 
                </script> 
            {% endblock %} 
 
            {% if config('core.cart.wishlistEnabled') %} 
                {# @deprecated tag:v6.5.0 - Will be moved to `layout/meta.html.twig` - Use block `layout_head_javascript_wishlist_state` instead #} 
                {% block base_script_wishlist_state %} 
                    <script> 
                        window.customerLoggedInState = {{ context.customer is not null and not context.customer.guest ? 1 : 0 }}; 
 
                        window.wishlistEnabled = {{ config('core.cart.wishlistEnabled') }}; 
                    </script> 
                {% endblock %} 
            {% endif %} 
 
            {# @deprecated tag:v6.5.0 - Will be moved to `layout/meta.html.twig` - Use block `layout_head_javascript_jquery` instead #} 
            {% block base_script_jquery %} 
            {% endblock %} 
 
            {# @deprecated tag:v6.5.0 - Will be moved to `layout/meta.html.twig` - Use block `layout_head_javascript_hmr_mode` instead #} 
            {% block base_script_hmr_mode %} 
                {% if isHMRMode %} 
                    <script type="text/javascript" src="/_webpack_hot_proxy_/js/vendor-node.js"></script> 
                    <script type="text/javascript" src="/_webpack_hot_proxy_/js/vendor-shared.js"></script> 
                    <script type="text/javascript" src="/_webpack_hot_proxy_/js/runtime.js"></script> 
                    <script type="text/javascript" src="/_webpack_hot_proxy_/js/app.js"></script> 
                    {# The storefront entry is a combined entry point which contains all plugins & themes #} 
                    <script type="text/javascript" src="/_webpack_hot_proxy_/js/storefront.js"></script> 
                {% else %} 
                    {% for file in theme_config('assets.js') %} 
                        <script type="text/javascript" src="{{ asset(file, 'theme') }}"></script> 
                    {% endfor %} 
                {% endif %} 
            {% endblock %} 
        {% endif %} 
    {% endblock %} 
    </body> 
{% endblock %} 
</html>