{% if oct_menu %}
    <div class="pr-menu-catalog pr-menu-main-catalog pr-sidebar-catalog">
        <div class="pr-menu-header pr-sidebar-catalog-close d-flex d-lg-none align-items-center justify-content-between py-2 px-3">
			<div class="pr-menu-header-back fw-700 dark-text fsz-14 d-flex align-items-center">
                <button type="button" class="pr-sidebar-catalog-back button-close br-8" aria-label="Close catalog menu">
                    <span class="icon-menu-back"></span>
                </button>
				{{ oct_menu_catalog }}
			</div>
            <button type="button" class="pr-sidebar-catalog-close button-close br-8" aria-label="Close catalog menu">
				<span class="icon-menu-close"></span>
			</button>
		</div>
        <nav class="pr-menu-catalog-inner">
            <ul class="pr-menu-catalog-items d-flex flex-column br-12">
                {% for oct_category in oct_menu %}
                    <li class="pr-menu-catalog-item d-flex align-items-center justify-content-between fw-500 dark-text p-3">
                        <span class="pr-menu-catalog-item-title d-flex align-items-center">
							{% if oct_category.oct_image %}
								<img class="pr-menu-catalog-item-img" src="{{ oct_category.oct_image }}" alt="" width="24" height="24" decoding="async">
	                        {% endif %}
							{% if oct_category.href %}
								<a href="{{ oct_category.href }}" {{ oct_category.target }}>{{ oct_category.name }}</a>
							{% else %}
								<span>{{ oct_category.name }}</span>
							{% endif %}
						</span>
                        {% if oct_category.children or oct_category.oct_pages or oct_category.sub_links %}
                            <span data-sidebar="children" class="pr-menu-catalog-item-arrow">
								<span class="icon-menu-toggle"></span>
							</span>
                        {% endif %}
                        {% if (oct_category.children or oct_category.oct_pages) and oct_category.type == 'standard' %}
                            <div class="pr-menu-catalog{% if oct_category.view == '2' %} pr-menu-catalog-wide{% endif %}">
                                <div class="pr-menu-header d-flex d-lg-none align-items-center justify-content-between py-2 px-3">
                                    <div class="pr-menu-header-back fw-700 dark-text fsz-14 d-flex align-items-center" data-sidebar="catalogback">
                                        <button type="button" class="pr-sidebar-catalog-back button-close br-8" aria-label="Close catalog menu">
                                            <span class="icon-menu-back"></span>
                                        </button>
                                        {{ oct_menu_catalog }}
                                    </div>
                                    <button type="button" class="pr-sidebar-catalog-close button-close br-8" aria-label="Close catalog menu">
                                        <span class="icon-menu-close"></span>
                                    </button>
                                </div>
                                <div class="pr-menu-catalog-inner">
                                    {% if oct_category.oct_pages and oct_category.view == '2' %}
                                        <div class="col-xl-3">
                                            {% for oct_page in oct_category.oct_pages %}
                                                <ul class="pr-menu-list-landings">
                                                    {% if oct_page.page_links is not empty %}
                                                    <li class="d-flex flex-column mb-3">
                                                        <span class="pr-megamenu-children-title fw-700 mb-2 pb-2">{{ oct_page.page_group[language_id] }}</span>
                                                        {% for page_link in oct_page.page_links %}
                                                        <a href="{{ page_link[language_id].link }}" title="{{ page_link[language_id].title }}" class="pr-menu-list-landings-link fsz-14">{{ page_link[language_id].title }}</a>
                                                        {% endfor %}
                                                    </li>
                                                    {% endif %}
                                                </ul>
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <ul class="pr-menu-catalog-items br-12 p-0">
                                        {% for child in oct_category.children %}
                                            <li class="pr-menu-catalog-item d-flex align-items-center justify-content-between fw-500 dark-text{% if oct_category.view != '2' %} p-3{% endif %}">
                                                <a href="{{ child.href }}" title="{{ child.name }}" class="d-flex gap-2 gap-xl-3 align-items-center">
                                                    {{ child.name }}
                                                </a>
                                                {% if child.children or child.oct_pages %}
                                                    <span data-sidebar="children" class="pr-menu-catalog-item-arrow{% if oct_category.view == '2' %} d-lg-none{% endif %}">
                                                        <span class="icon-menu-toggle"></span>
                                                    </span>
                                                    <div class="pr-menu-catalog">
                                                        <div class="pr-menu-header d-flex d-lg-none align-items-center justify-content-between py-2 px-3">
                                                            <div class="pr-menu-header-back fw-700 dark-text fsz-14 d-flex align-items-center" data-sidebar="catalogback">
                                                                <button type="button" class="pr-sidebar-catalog-back button-close br-8" aria-label="Close catalog menu">
                                                                    <span class="icon-menu-back"></span>
                                                                </button>
                                                                {{ child.name }}
                                                            </div>
                                                            <button type="button" class="pr-sidebar-catalog-close button-close br-8" aria-label="Close catalog menu">
                                                                <span class="icon-menu-close"></span>
                                                            </button>
                                                        </div>
                                                        <div class="pr-menu-catalog-inner">
                                                            <ul class="pr-menu-catalog-items br-12 p-0">
                                                                {% for ch in child.children %}
                                                                    <li class="pr-menu-catalog-item d-flex align-items-center justify-content-between fw-500 dark-text{% if oct_category.view != '2' %} p-3{% endif %}">
                                                                        <a href="{{ ch.href }}">{{ ch.name }}</a>
                                                                        {% if oct_category.view == '1' %}
                                                                            {% if ch.children or ch.oct_pages %}
                                                                                <span data-sidebar="children" class="pr-menu-catalog-item-arrow">
                                                                                    <span class="icon-menu-toggle"></span>
                                                                                </span>
                                                                                <div class="pr-menu-catalog">
                                                                                    <div class="pr-menu-header d-flex d-lg-none align-items-center justify-content-between py-2 px-3">
                                                                                        <div class="pr-menu-header-back fw-700 dark-text fsz-14 d-flex align-items-center" data-sidebar="catalogback">
                                                                                            <button type="button" class="pr-sidebar-catalog-back button-close br-8" aria-label="Close catalog menu">
                                                                                                <span class="icon-menu-back"></span>
                                                                                            </button>
                                                                                            {{ ch.name }}
                                                                                        </div>
                                                                                        <button type="button" class="pr-sidebar-catalog-close button-close br-8" aria-label="Close catalog menu">
                                                                                            <span class="icon-menu-close"></span>
                                                                                        </button>
                                                                                    </div>
                                                                                    <div class="pr-menu-catalog-inner">
                                                                                        <ul class="pr-menu-catalog-items br-12 p-0">
                                                                                            {% for child in ch.children %}
                                                                                                <li class="pr-menu-catalog-item d-flex align-items-center justify-content-between fw-500 dark-text p-3">
                                                                                                    <a href="{{ child.href }}" class="flex-grow-1">{{ child.name }}</a>
                                                                                                </li>
                                                                                            {% endfor %}
                                                                                        </ul>
                                                                                    </div>
                                                                                </div>
                                                                            {% endif %}
                                                                        {% endif %}
                                                                    </li>
                                                                {% endfor %}
                                                                {% if child.oct_pages and oct_category.view == '1' %}
                                                                    <li class="pr-menu-list-landings">
                                                                        <ul>
                                                                            {% for oct_page in child.oct_pages %}
                                                                                {% if oct_page.page_links is not empty %}
                                                                                <li class="d-flex flex-column">
                                                                                    <span class="pr-megamenu-children-title fw-700 mb-2">{{ oct_page.page_group[language_id] }}</span>
                                                                                    {% for page_link in oct_page.page_links %}
                                                                                    <a href="{{ page_link[language_id].link }}" title="{{ page_link[language_id].title }}" class="pr-menu-list-landings-link fsz-14">{{ page_link[language_id].title }}</a>
                                                                                    {% endfor %}
                                                                                </li>
                                                                                {% endif %}
                                                                            {% endfor %}
                                                                        </ul>
                                                                    </li>
                                                                {% endif %}
                                                            </ul>
                                                            {% if child.oct_pages and oct_category.view == '2' %}
                                                                <ul class="pr-menu-list-landings">
                                                                    {% for oct_page in child.oct_pages %}
                                                                        {% if oct_page.page_links is not empty %}
                                                                        <li class="d-flex flex-column">
                                                                            <span class="pr-megamenu-children-title fw-700 mb-2">{{ oct_page.page_group[language_id] }}</span>
                                                                            {% for page_link in oct_page.page_links %}
                                                                            <a href="{{ page_link[language_id].link }}" title="{{ page_link[language_id].title }}" class="pr-menu-list-landings-link fsz-14">{{ page_link[language_id].title }}</a>
                                                                            {% endfor %}
                                                                        </li>
                                                                        {% endif %}
                                                                    {% endfor %}
                                                                </ul>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            </li>
                                        {% endfor %}
                                        {% if oct_category.oct_pages and oct_category.view == '1' %}
                                            <li class="pr-menu-list-landings">
                                                <ul>
                                                    {% for oct_page in oct_category.oct_pages %}
                                                        {% if oct_page.page_links is not empty %}
                                                        <li class="d-flex flex-column">
                                                            <span class="pr-megamenu-children-title fw-700 mb-2">{{ oct_page.page_group[language_id] }}</span>
                                                            {% for page_link in oct_page.page_links %}
                                                            <a href="{{ page_link[language_id].link }}" title="{{ page_link[language_id].title }}" class="pr-menu-list-landings-link fsz-14">{{ page_link[language_id].title }}</a>
                                                            {% endfor %}
                                                        </li>
                                                        {% endif %}
                                                    {% endfor %}
                                                </ul>
                                            </li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        {% endif %}
                        {% if oct_category.children and oct_category.type == 'category' %}
                        <!-- 1 = menu list, 2 = menu grid -->
                            <div class="pr-menu-catalog{% if oct_category.view == '2' %} pr-menu-catalog-wide{% endif %}">
                                <div class="pr-menu-header d-flex d-lg-none align-items-center justify-content-between py-2 px-3">
                                    <div class="pr-menu-header-back fw-700 dark-text fsz-14 d-flex align-items-center" data-sidebar="catalogback">
                                        <button type="button" class="pr-sidebar-catalog-back button-close br-8" aria-label="Close catalog menu">
                                            <span class="icon-menu-back"></span>
                                        </button>
                                        {{ oct_category.name }}
                                    </div>
                                    <button type="button" class="pr-sidebar-catalog-close button-close br-8" aria-label="Close catalog menu">
                                        <span class="icon-menu-close"></span>
                                    </button>
                                </div>
                                <div class="pr-menu-catalog-inner">
                                    {% if oct_category.oct_pages and oct_category.view == '2' %}
                                        <div class="col-xl-3">
                                            {% for oct_pages in oct_category.oct_pages %}
                                                 {% for oct_page in oct_pages %}
                                                    <ul class="pr-menu-list-landings dark-text mb-4 pe-xl-3">
                                                        <li class="d-flex flex-column">
                                                            {% if oct_page.page_links is not empty %}
                                                                <span class="pr-megamenu-children-title fw-700 mb-2">{{ oct_page.page_group[language_id] }}</span>
                                                                {% for page_link in oct_page.page_links %}
                                                                    <a href="{{ page_link[language_id].link }}" title="{{ page_link[language_id].title }}" class="pr-menu-list-landings-link fsz-14">{{ page_link[language_id].title }}</a>
                                                                {% endfor %}
                                                            {% endif %}
                                                        </li>
                                                    </ul>
                                                {% endfor %}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <ul class="pr-menu-catalog-items br-12 p-0">
                                        {% for child in oct_category.children %}
                                            <li class="pr-menu-catalog-item d-flex align-items-center justify-content-between fw-500 dark-text {% if oct_category.view != '2' %} p-3{% endif %}">
                                                    <a href="{{ child.href }}" title="{{ child.name }}" class="d-flex gap-2 gap-xl-3 align-items-center">
                                                        {% if child.oct_image %}
                                                            <img src="{{ child.oct_image }}" alt="" width="{{ oct_category.subcat_image_width }}" height="{{ oct_category.subcat_image_height }}" loading="lazy" />
                                                        {% endif %}
                                                        {{ child.name }}
                                                    </a>
                                                {% if child.children or child.oct_pages %}
                                                    <span data-sidebar="children" class="pr-menu-catalog-item-arrow{% if oct_category.view == '2' %} d-lg-none{% endif %}">
                                                        <span class="icon-menu-toggle"></span>
                                                    </span>
                                                    <div class="pr-menu-catalog">
                                                        <div class="pr-menu-header d-flex d-lg-none align-items-center justify-content-between py-2 px-3">
                                                            <div class="pr-menu-header-back fw-700 dark-text fsz-14 d-flex align-items-center" data-sidebar="catalogback">
                                                                <button type="button" class="pr-sidebar-catalog-back button-close br-8" aria-label="Close catalog menu">
                                                                    <span class="icon-menu-back"></span>
                                                                </button>
                                                                {{ child.name }}
                                                            </div>
                                                            <button type="button" class="pr-sidebar-catalog-close button-close br-8" aria-label="Close catalog menu">
                                                                <span class="icon-menu-close"></span>
                                                            </button>
                                                        </div>
                                                        <div class="pr-menu-catalog-inner">
                                                            <ul class="pr-menu-catalog-items br-12 p-0">
                                                                {% for ch in child.children %}
                                                                    <li class="pr-menu-catalog-item d-flex align-items-center justify-content-between fw-500 dark-text {% if oct_category.view != '2' %} p-3{% endif %}">
                                                                        <a href="{{ ch.href }}">{{ ch.name }}</a>
                                                                        {% if oct_category.view == '1' %}
                                                                            {% if ch.children or ch.oct_pages %}
                                                                                <span data-sidebar="children" class="pr-menu-catalog-item-arrow{% if oct_category.view == '2' %} d-lg-none{% endif %}">
                                                                                    <span class="icon-menu-toggle"></span>
                                                                                </span>
                                                                                <div class="pr-menu-catalog">
                                                                                    <div class="pr-menu-header d-flex d-lg-none align-items-center justify-content-between py-2 px-3">
                                                                                        <div class="pr-menu-header-back fw-700 dark-text fsz-14 d-flex align-items-center" data-sidebar="catalogback">
                                                                                            <button type="button" class="pr-sidebar-catalog-back button-close br-8" aria-label="Close catalog menu">
                                                                                                <span class="icon-menu-back"></span>
                                                                                            </button>
                                                                                            {{ ch.name }}
                                                                                        </div>
                                                                                        <button type="button" class="pr-sidebar-catalog-close button-close br-8" aria-label="Close catalog menu">
                                                                                            <span class="icon-menu-close"></span>
                                                                                        </button>
                                                                                    </div>
                                                                                    <div class="pr-menu-catalog-inner">
                                                                                        <ul class="pr-menu-catalog-items br-12 p-0">
                                                                                            {% for child in ch.children %}
                                                                                                <li class="pr-menu-catalog-item d-flex align-items-center justify-content-between fw-500 dark-text {% if oct_category.view != '2' %} p-3{% endif %}">
                                                                                                    <a href="{{ child.href }}" class="flex-grow-1">{{ child.name }}</a>
                                                                                                </li>
                                                                                            {% endfor %}
                                                                                            {% if ch.oct_pages %}
                                                                                                <li class="pr-menu-list-landings">
                                                                                                    <ul>
                                                                                                        {% for oct_page in ch.oct_pages %}
                                                                                                            {% if oct_page.page_links is not empty %}
                                                                                                            <li class="d-flex flex-column">
                                                                                                                <span class="pr-megamenu-children-title fw-700 mb-2">{{ oct_page.page_group[language_id] }}</span>
                                                                                                                {% for page_link in oct_page.page_links %}
                                                                                                                <a href="{{ page_link[language_id].link }}" title="{{ page_link[language_id].title }}" class="pr-menu-list-landings-link fsz-14">{{ page_link[language_id].title }}</a>
                                                                                                                {% endfor %}
                                                                                                            </li>
                                                                                                            {% endif %}
                                                                                                        {% endfor %}
                                                                                                    </ul>
                                                                                                </li>
                                                                                            {% endif %}
                                                                                        </ul>
                                                                                    </div>
                                                                                </div>
                                                                            {% endif %}
                                                                        {% endif %}
                                                                    </li>
                                                                {% endfor %}
                                                                {% if child.oct_pages and oct_category.view == '1' %}
                                                                    <li class="pr-menu-list-landings">
                                                                        <ul>
                                                                            {% for oct_page in child.oct_pages %}
                                                                                {% if oct_page.page_links is not empty %}
                                                                                <li class="d-flex flex-column mb-4">
                                                                                    <span class="pr-megamenu-children-title fw-700 mb-2">{{ oct_page.page_group[language_id] }}</span>
                                                                                    {% for page_link in oct_page.page_links %}
                                                                                    <a href="{{ page_link[language_id].link }}" title="{{ page_link[language_id].title }}" class="pr-menu-list-landings-link fsz-14">{{ page_link[language_id].title }}</a>
                                                                                    {% endfor %}
                                                                                </li>
                                                                                {% endif %}
                                                                            {% endfor %}
                                                                        </ul>
                                                                    </li>
                                                                {% endif %}
                                                            </ul>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        {% elseif oct_category.type == 'link' %}
                            {% if oct_category.sub_links %}
                                <div class="pr-menu-catalog">
                                    <div class="pr-menu-header d-flex d-lg-none align-items-center justify-content-between py-2 px-3">
                                        <div class="pr-menu-header-back fw-700 dark-text fsz-14 d-flex align-items-center" data-sidebar="catalogback">
                                            <button type="button" class="pr-sidebar-catalog-back button-close br-8" aria-label="Close catalog menu">
                                                <span class="icon-menu-back"></span>
                                            </button>
                                            {{ oct_category.name }}
                                        </div>
                                        <button type="button" class="pr-sidebar-catalog-close button-close br-8" aria-label="Close catalog menu">
                                            <span class="icon-menu-close"></span>
                                        </button>
                                    </div>
                                    <div class="pr-menu-catalog-inner">
                                        <ul class="pr-menu-catalog-items br-12 p-0">
                                            {% for sub in oct_category.sub_links %}
                                                <li class="pr-menu-catalog-item d-flex align-items-center justify-content-between fw-500 dark-text p-3">
                                                    <a href="{{ sub.href }}" {{ oct_category.target|raw }}>
                                                        {{ sub.title }}
                                                    </a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            {% endif %}
                        {% elseif oct_category.children and oct_category.type == 'oct_blogcategory' %}
                            <div class="pr-menu-catalog">
                                <div class="pr-menu-header d-flex d-lg-none align-items-center justify-content-between py-2 px-3">
                                    <div class="pr-menu-header-back fw-700 dark-text fsz-14 d-flex align-items-center" data-sidebar="catalogback">
                                        <button type="button" class="pr-sidebar-catalog-back button-close br-8" aria-label="Close catalog menu">
                                            <span class="icon-menu-back"></span>
                                        </button>
                                        {{ oct_category.name }}
                                    </div>
                                    <button type="button" class="pr-sidebar-catalog-close button-close br-8" aria-label="Close catalog menu">
                                        <span class="icon-menu-close"></span>
                                    </button>
                                </div>
                                <div class="pr-menu-catalog-inner">
                                    <ul class="pr-menu-catalog-items br-12 p-0">
                                        {% for child in oct_category.children %}
                                            <li class="pr-menu-catalog-item d-flex align-items-center justify-content-between fw-500 dark-text p-3">
                                                <a href="{{ child.href }}">{{ child.name }}</a>
                                                {% if child.children %}
                                                    <span data-sidebar="children" class="pr-menu-catalog-item-arrow">
                                                        <span class="icon-menu-toggle"></span>
                                                    </span>
                                                    <div class="pr-menu-catalog">
                                                        <div class="pr-menu-header d-flex d-lg-none align-items-center justify-content-between py-2 px-3">
                                                            <div class="pr-menu-header-back fw-700 dark-text fsz-14 d-flex align-items-center" data-sidebar="catalogback">
                                                                <button type="button" class="pr-sidebar-catalog-back button-close br-8" aria-label="Close catalog menu">
                                                                    <span class="icon-menu-back"></span>
                                                                </button>
                                                                {{ child.name }}
                                                            </div>
                                                            <button type="button" class="pr-sidebar-catalog-close button-close br-8" aria-label="Close catalog menu">
                                                                <span class="icon-menu-close"></span>
                                                            </button>
                                                        </div>
                                                        <div class="pr-menu-catalog-inner">
                                                            <ul class="pr-menu-catalog-items br-12 p-0">
                                                                {% for ch in child.children %}
                                                                    <li class="pr-menu-catalog-item d-flex align-items-center justify-content-between fw-500 dark-text p-3">
                                                                        <a href="{{ ch.href }}">{{ ch.name }}</a>
                                                                    </li>
                                                                {% endfor %}
                                                            </ul>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        {% elseif oct_category.children and oct_category.type == 'manufacturer' %}
                            <div class="pr-menu-catalog{% if oct_category.show_image %} pr-menu-catalog-wide{% endif %}">
                                 <div class="pr-menu-header d-flex d-lg-none align-items-center justify-content-between py-2 px-3">
                                    <div class="pr-menu-header-back fw-700 dark-text fsz-14 d-flex align-items-center" data-sidebar="catalogback">
                                        <button type="button" class="pr-sidebar-catalog-back button-close br-8" aria-label="Close catalog menu">
                                            <span class="icon-menu-back"></span>
                                        </button>
                                        {{ oct_category.name }}
                                    </div>
                                    <button type="button" class="pr-sidebar-catalog-close button-close br-8" aria-label="Close catalog menu">
                                        <span class="icon-menu-close"></span>
                                    </button>
                                </div>
                                <div class="pr-menu-catalog-inner">
                                    {% if oct_category.show_image %}
                                        <div class="pr-menu-catalog-items br-12 pr-megamenu-children-manufacturers flex-grow-1 d-flex flex-wrap flex-column flex-xl-row dark-text">
                                            {% for child in oct_category.children %}
                                                <div class="pr-menu-catalog-item pr-megamenu-children-item pr-megamenu-children-manufacturers-item d-flex align-items-center justify-content-between fw-500 dark-text text-xl-center p-0 p-xl-3">
                                                    <a href="{{ child.href }}" title="{{ child.name }}" class="pr-megamenu-children-title fw-700 mb-0 d-flex flex-xl-column align-items-center p-3 p-xl-0">
                                                        {% if child.oct_image %}
                                                            <img class="my-xl-2 me-3 mx-xl-auto" src="{{ child.oct_image }}" alt="" width="{{ oct_category.subcat_image_width }}" height="{{ oct_category.subcat_image_height }}" loading="lazy" />
                                                        {% endif %}
                                                        <span class="flex-grow-1">{{ child.name }}</span>
                                                    </a>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    {% else %}
                                        <ul class="pr-menu-catalog-items br-12 p-0">
                                            {% for child in oct_category.children %}
                                                <li class="pr-menu-catalog-item d-flex align-items-center justify-content-between fsz-14 dark-text p-3">
                                                    <a class="flex-grow-1" href="{{ child.href }}">{{ child.name }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>
        </nav>
    </div>
{% endif %}
