<?php // phpcs:ignoreFile ?>
<li
	:id="'jet-mobile-menu-item-'+itemDataObject.itemId"
	:class="itemClasses"
>
	<div
		class="jet-mobile-menu__item-inner"
		:style="itemInnerStyle"
		v-on:click="itemSubHandler"
		v-on:focusin="handleFocusIn"
		v-on:focusout="handleFocusOut"
	>
		<a
			:class="itemLinkClasses"
			:href="itemDataObject.url"
			:rel="itemDataObject.xfn || null"
			:title="itemDataObject.attrTitle || null"
			:target="itemDataObject.target || null"
			:style="itemLinkStyle"
			:aria-haspopup="isSub && 'item' === effectiveSubTrigger ? 'true' : null"
			:aria-expanded="isSub && 'item' === effectiveSubTrigger ? submenuExpandedState : null"
			v-on:keydown.space.prevent="itemSpaceHandler"
		>
			<div class="jet-menu-item-wrapper">
				<div
					class="jet-menu-icon"
					v-if="isIconVisible"
					v-html="itemIconHtml"
				></div>
				<div class="jet-menu-name">
					<span
						class="jet-menu-label"
						v-if="isLabelVisible"
						v-html="itemDataObject.name"
					></span>
					<small
						class="jet-menu-desc"
						v-if="isDescVisible"
						v-html="itemDataObject.description"
					></small>
				</div>
				<div
					class="jet-menu-badge"
					v-if="isBadgeVisible"
				>
					<div class="jet-menu-badge__inner" v-html="itemDataObject.badgeContent"></div>
				</div>
			</div>
		</a>
		<button
			class="jet-dropdown-arrow"
			v-if="isSub && !templateLoadStatus && showSubmenuButton"
			v-html="dropdownIconHtml"
			type="button"
			:style="submenuButtonStyle"
			:aria-label="'Toggle submenu for ' + itemDataObject.name"
			:aria-expanded="submenuExpandedState"
			:aria-haspopup="isSub ? 'true' : null"
			v-on:click="markerSubHandler"
		>
		</button>
		<span
			class="jet-dropdown-arrow"
			v-else-if="isSub && !templateLoadStatus"
			v-html="dropdownIconHtml"
			aria-hidden="true"
		>
		</span>
		<div
			class="jet-mobile-menu__template-loader"
			v-if="templateLoadStatus"
		>
			<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>

	<transition name="menu-container-expand-animation">
		<mobile-menu-list
			v-if="isDropdownLayout && subDropdownVisible"
			:depth="depth+1"
			:children-object="itemDataObject.children"
		></mobile-menu-list>
	</transition>

</li>
