<?php // phpcs:ignoreFile ?>
<div
	:class="instanceClass"
	v-on:keyup.esc="escapeKeyHandler"
	v-on:keydown="handleMenuKeydown"
>
	<div
		class="jet-mobile-menu__toggle"
		role="button"
		ref="toggle"
		tabindex="0"
		aria-label="Open/Close Menu"
        aria-expanded="false"
		v-on:click="menuToggle"
		v-on:keyup.enter="menuToggle"
		v-on:keydown.space.prevent="menuToggle"
	>
		<div
			class="jet-mobile-menu__template-loader"
			v-if="toggleLoaderVisible"
		>
			<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="24px" height="25px" viewBox="0 0 128 128" xml:space="preserve">
				<g>
					<linearGradient :id="'linear-gradient-'+itemDataObject.itemId">
						<stop offset="0%" :stop-color="loaderColor" stop-opacity="0"/>
						<stop offset="100%" :stop-color="loaderColor" stop-opacity="1"/>
					</linearGradient>
				<path d="M63.85 0A63.85 63.85 0 1 1 0 63.85 63.85 63.85 0 0 1 63.85 0zm.65 19.5a44 44 0 1 1-44 44 44 44 0 0 1 44-44z" :fill="'url(#linear-gradient-'+itemDataObject.itemId+')'" fill-rule="evenodd"/>
				<animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1080ms" repeatCount="indefinite"></animateTransform>
				</g>
			</svg>
		</div>

		<div
			class="jet-mobile-menu__toggle-icon"
			v-if="!menuOpen && !toggleLoaderVisible"
			v-html="toggleClosedIcon"
		></div>
		<div
			class="jet-mobile-menu__toggle-icon"
			v-if="menuOpen && !toggleLoaderVisible"
			v-html="toggleOpenedIcon"
		></div>
		<span
			class="jet-mobile-menu__toggle-text"
			v-if="toggleText"
			v-html="toggleText"
		></span>

	</div>

	<transition name="cover-animation">
		<div
			class="jet-mobile-menu-cover"
			v-if="menuContainerVisible && coverVisible"
			v-on:click="closeMenu"
		></div>
	</transition>

	<transition
		:name="showAnimation"
		@before-enter="onContainerBeforeEnter"
		@after-enter="onContainerAfterEnter"
		@enter-cancelled="onContainerAfterEnter"
		@after-leave="onContainerAfterLeave"
		@leave-cancelled="onContainerAfterLeave"
	>
		<div
			class="jet-mobile-menu__container"
			ref="container"
			:style="containerStyle"
			v-if="menuContainerVisible"
		>
			<div
				class="jet-mobile-menu__container-inner"
				ref="menu-container-inner"
				tabindex="-1"
				:style="containerInnerStyle"
			>
				<div
					class="jet-mobile-menu__header-template"
					v-if="headerTemplateVisible"
				>
					<div
						class="jet-mobile-menu__header-template-content"
						ref="header-template-content"
						v-html="headerContent"
					></div>
				</div>

				<div
					class="jet-mobile-menu__controls"
                    v-if="isBreadcrumbs || isBack || isClose"
				>
					<div
						class="jet-mobile-menu__breadcrumbs"
						v-if="isBreadcrumbs"
					>
						<div
							class="jet-mobile-menu__breadcrumb"
							v-for="(item, index) in breadcrumbsPathData"
							:key="index"
						>
							<button
								v-if="isBreadcrumbInteractive(index)"
								class="breadcrumb-label"
								type="button"
								style="background: transparent; border: 0; padding: 0; margin: 0; appearance: none; -webkit-appearance: none;"
								v-on:click="breadcrumbHandle(index+1)"
								v-html="item"
							></button>
							<span
								v-else
								class="breadcrumb-label"
								v-html="item"
							></span>
							<div
								class="breadcrumb-divider"
								v-html="breadcrumbIcon"
								v-if="(breadcrumbIcon && index !== breadcrumbsPathData.length-1)"
							></div>
						</div>
					</div>
					<div
						class="jet-mobile-menu__back"
						role="button"
						ref="back"
						tabindex="0"
						aria-label="Close Menu"
                        aria-expanded="false"
						v-if="!isBack && isClose"
						v-html="closeIcon"
						v-on:click="menuToggle"
						v-on:keyup.enter="menuToggle"
						v-on:keydown.space.prevent="menuToggle"
					></div>
					<div
						class="jet-mobile-menu__back"
						role="button"
						ref="back"
						tabindex="0"
						aria-label="Back to Prev Items"
                        aria-expanded="false"
						v-if="isBack"
						v-html="backIcon"
						v-on:click="goBack"
						v-on:keyup.enter="goBack"
						v-on:keydown.space.prevent="goBack"
					></div>
				</div>

				<div
					class="jet-mobile-menu__before-template"
					v-if="beforeTemplateVisible"
				>
					<div
						class="jet-mobile-menu__before-template-content"
						ref="before-template-content"
						v-html="beforeContent"
					></div>
				</div>

				<div class="jet-mobile-menu__body" ref="menu-body">
					<transition :name="animation">
						<mobile-menu-list
							v-if="!templateVisible"
                            :key="'list-' + depth"
							:depth="depth"
							:children-object="itemsList"
						></mobile-menu-list>

						<div v-else
                             :key="'tpl-' + depth"
							class="jet-mobile-menu__template"
							ref="template-content"
						>
							<div
								class="jet-mobile-menu__template-content"
								v-html="itemTemplateContent"
							></div>
						</div>
					</transition>
				</div>

				<div
					class="jet-mobile-menu__after-template"
					v-if="afterTemplateVisible"
				>
					<div
						class="jet-mobile-menu__after-template-content"
						ref="after-template-content"
						v-html="afterContent"
					></div>
				</div>

			</div>
		</div>
	</transition>
</div>
