{% sw_extends '@Storefront/storefront/layout/navigation/flyout.html.twig' %}

{% block layout_navigation_flyout %}
    {% set category = navigationTree.category %}
    {% set name = category.translated.name %}
    {% block layout_navigation_flyout_bar %}
        <div class="row navigation-flyout-bar">
            {% block layout_navigation_flyout_bar_category %}
                <div class="col">
                    <div class="navigation-flyout-category-link">
                        {% block layout_navigation_flyout_bar_category_link %}
                            {% if category.type == 'page' %}
                                <a class="nav-link"
                                   href="{{ seoUrl('frontend.navigation.page', { navigationId: category.id }) }}"
                                   itemprop="url"
                                   title="{{ name }}">
                                    {% block layout_navigation_flyout_bar_category_link_text %}
                                        {{ "general.toCategory"|trans|sw_sanitize }} {{ name }}
                                        {% sw_icon 'arrow-right' style {
                                            'color': 'primary',
                                            'pack':'solid'
                                        } %}
                                    {% endblock %}
                                </a>
                            {% endif %}
                        {% endblock %}
                    </div>
                </div>
            {% endblock %}

            {% block layout_navigation_flyout_bar_close %}
                <div class="col-auto">
                    <div class="navigation-flyout-close js-close-flyout-menu">
                        {% block layout_navigation_flyout_bar_close_content %}
                            {% block layout_utilities_offcanvas_close_icon %}
                                {% sw_icon 'x' %}
                            {% endblock %}
                        {% endblock %}
                    </div>
                </div>
            {% endblock %}
        </div>
    {% endblock %}

    {% block layout_navigation_flyout_content %}
        <div class="row navigation-flyout-content">
            {% block layout_navigation_flyout_categories %}
                <div class="{% if category.media %}col-8 col-xl-9{% else %}col{% endif %}">
                    <div class="navigation-flyout-categories">
                        {% block layout_navigation_flyout_categories_recoursion %}
                            {% sw_include '@Storefront/storefront/layout/navigation/categories.html.twig' with {
                                navigationTree: navigationTree.children,
                                navigationMedia: category.media,
                                page: page
                            } only %}
                        {% endblock %}
                    </div>
                </div>
            {% endblock %}

            {% block layout_navigation_flyout_teaser %}
                {% if category.media %}
                <div class="col-4 col-xl-3">
                    <div class="navigation-flyout-teaser">
                        {% block layout_navigation_flyout_teaser_image %}
                            <a class="navigation-flyout-teaser-image-container"
                               href="{{ seoUrl('frontend.navigation.page', { navigationId: category.id }) }}"
                               title="{{ name }}">
                                {% sw_thumbnails 'navigation-flyout-teaser-image-thumbnails' with {
                                    media: category.media,
                                    sizes: {
                                        'default': '310px'
                                    },
                                    attributes: {
                                        'class': 'navigation-flyout-teaser-image',
                                        'alt': (category.media.translated.alt ?: ''),
                                        'title': (category.media.translated.title ?: ''),
                                        'data-object-fit': 'cover'
                                    }
                                } %}
                            </a>
                        {% endblock %}
                    </div>
                </div>
                {% endif %}
            {% endblock %}
        </div>
    {% endblock %}
{% endblock %}
