{% if categories %}
	<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">
					<svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14" fill="none">
						<path d="M7 1L1 7L7 13" stroke="#4F5F99" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					</svg>
				</button>
				{{ oct_menu_catalog }}
			</div>
			<button type="button" class="pr-sidebar-catalog-close button-close br-8" aria-label="Close catalog menu">
				<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
					<path d="M1 1L13 13M13 1L1 13" stroke="#4F5F99" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
				</svg>
			</button>
		</div>
		<nav class="pr-menu-catalog-inner">
			<ul class="pr-menu-catalog-items d-flex flex-column br-12">
				{% for category in categories %}
					<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 category.oct_image %}
								<img class="pr-menu-catalog-item-img" src="{{ category.oct_image }}" alt="" width="24" height="24" decoding="async">
	                        {% endif %}
							{% if category.href %}
								<a href="{{ category.href }}" {{ category.target }}>{{ category.name }}</a>
							{% else %}
								<span>{{ category.name }}</span>
							{% endif %}
						</span>
						{% if category.children or category.oct_pages %}
							<span data-sidebar="children" class="pr-menu-catalog-item-arrow px-3">
								<svg xmlns="http://www.w3.org/2000/svg" width="5" height="8" viewBox="0 0 5 8" fill="none">
									<path d="M1 7L4 4L1 1" stroke="var(--pr-black-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
								</svg>
							</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">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14" fill="none">
                                                <path d="M7 1L1 7L7 13" stroke="#4F5F99" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </button>
										{{ oct_menu_catalog }}
									</div>
									<button type="button" class="pr-sidebar-catalog-close button-close br-8" aria-label="Close catalog menu">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                            <path d="M1 1L13 13M13 1L1 13" stroke="#4F5F99" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                    </button>
								</div>
								<div class="pr-menu-catalog-inner">
									<ul class="pr-menu-catalog-items br-12 p-0">
										{% if category.oct_pages %}
											<li class="pr-menu-list-landings">
												<ul>
													{% for oct_page in 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-12">{{ page_link[language_id].title }}</a>
															{% endfor %}
														</li>
														{% endif %}
													{% endfor %}
												</ul>
											</li>
										{% endif %}
										{% for child in 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 or child.oct_pages %}
													<span data-sidebar="children" class="pr-menu-catalog-item-arrow px-3">
														<svg xmlns="http://www.w3.org/2000/svg" width="5" height="8" viewBox="0 0 5 8" fill="none">
															<path d="M1 7L4 4L1 1" stroke="var(--pr-black-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
														</svg>
													</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">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14" fill="none">
                                                                        <path d="M7 1L1 7L7 13" stroke="#4F5F99" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                                    </svg>
                                                                </button>
																{{ child.name }}
															</div>
															<button type="button" class="pr-sidebar-catalog-close button-close br-8" aria-label="Close catalog menu">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                                                    <path d="M1 1L13 13M13 1L1 13" stroke="#4F5F99" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                                </svg>
                                                            </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>
																		{% if ch.children or ch.oct_pages %}
																			<span data-sidebar="children" class="pr-menu-catalog-item-arrow px-3">
																				<svg xmlns="http://www.w3.org/2000/svg" width="5" height="8" viewBox="0 0 5 8" fill="none">
																					<path d="M1 7L4 4L1 1" stroke="var(--pr-black-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
																				</svg>
																			</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">
																							<svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14" fill="none">
																								<path d="M7 1L1 7L7 13" stroke="#4F5F99" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
																							</svg>
																						</button>
																						{{ ch.name }}
																					</div>
																					<button type="button" class="pr-sidebar-catalog-close button-close br-8" aria-label="Close catalog menu">
																						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
																							<path d="M1 1L13 13M13 1L1 13" stroke="#4F5F99" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
																						</svg>
																					</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 }}">
																									{{ 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-12">{{ page_link[language_id].title }}</a>
																											{% endfor %}
																										</li>
																										{% endif %}
																									{% endfor %}
																								</ul>
																							</li>
																						{% endif %}
																					</ul>
																				</div>
																			</div>
																		{% endif %}
																	</li>
																{% endfor %}
																{% if child.oct_pages %}
																	<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-12">{{ page_link[language_id].title }}</a>
																					{% endfor %}
																				</li>
																				{% endif %}
																			{% endfor %}
																		</ul>
																	</li>
																{% endif %}
															</ul>
														</div>
													</div>
												{% endif %}
											</li>
										{% endfor %}
									</ul>
								</div>
							</div>
						{% endif %}
					</li>
				{% endfor %}
			</ul>
		</nav>
	</div>
{% endif %}
