<aside class="app-drawer js-drawer-settings">
	<div class="app-drawer-header">
		<div class="h4 mb-0">
			App Builder
		</div>
		<button type="button" class="btn btn-system ms-auto" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-drawer-settings" aria-label="Close">
			<svg class="sa-icon sa-icon-2x">
				<use href="/public/icons/sprite.svg#x"></use>
			</svg>
		</button>
	</div>

	<div class="custom-scrollbar h-100">

		<div class="info-container">
			Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
			<button type="button" class="btn btn-sm btn-outline-secondary ms-1" data-action="playsound" data-soundpath="/public/media/sound/" data-soundfile="settings-voice.mp3" aria-label="Play Settings Voice">
				<svg class="sa-icon">
					<use href="/public/icons/sprite.svg#volume-2"></use>
				</svg>
			</button>
		</div>

		<div class="d-flex justify-content-spaced w-100 app-fob-showcase-text" data-prefix="Preview">
			<div class="app-fob app-fob-lg app-fob-showcase">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>

		<div class="mod-status primary-mod" data-prefix="Primary Settings">
			<div class="form-check">
				<input class="form-check-input" type="checkbox" id="actionHeaderFixed" data-action="toggle" data-class="set-header-fixed">
				<label class="form-check-label" for="actionHeaderFixed">
					Header position fixed
				</label>
			</div>
			<div class="form-check d-none d-lg-block d-xl-block d-xxl-block">
				<input class="form-check-input" type="checkbox" id="actionNavFull" data-action="toggle" data-class="set-nav-full" data-codependence="set-nav-collapsed">
				<label class="form-check-label" for="actionNavFull">
					Navigation full height
				</label>
			</div>
		</div>

		<div class="mod-status d-none d-lg-block d-xl-block d-xxl-block" data-prefix="Addon Settings">
			<div class="form-check">
				<input class="form-check-input" type="checkbox" id="actionNavFixed" data-action="toggle" data-class="set-nav-fixed">
				<label class="form-check-label" for="actionNavFixed">
					Navigation position fixed
				</label>
			</div>
			<div class="form-check">
				<input class="form-check-input" type="checkbox" id="actionNavCollapsed" data-action="toggle" data-class="set-nav-collapsed" data-dependency="set-nav-full">
				<label class="form-check-label" for="actionNavCollapsed">
					Navigation collapsed
				</label>
			</div>
		</div>

		<div class="mod-status" data-prefix="Misc Settings">
			<div class="form-check d-none d-lg-block d-xl-block d-xxl-block">
				<input class="form-check-input" type="checkbox" id="actionNavMinified" data-action="toggle" data-class="set-nav-minified">
				<label class="form-check-label" for="actionNavMinified">
					Navigation Minified
				</label>
			</div>
			<div class="form-check">
				<input class="form-check-input" type="checkbox" id="darkNavigation" data-action="toggle" data-class="set-nav-dark">
				<label class="form-check-label" for="darkNavigation">
					Dark Navigation
				</label>
			</div>
		</div>

		<div class="mod-status" data-prefix="Aria Settings">
			<div class="form-check">
				<input class="form-check-input" type="checkbox" id="actionColorblindMode" data-action="toggle" data-class="set-colorblind-mode">
				<label class="form-check-label" for="actionColorblindMode">
					Colorblind Mode
				</label>
			</div>
			<div class="form-check">
				<input class="form-check-input" type="checkbox" id="actionHighContrastMode" data-action="toggle" data-class="set-high-contrast-mode">
				<label class="form-check-label" for="actionHighContrastMode">
					High Contrast Mode
				</label>
			</div>
		</div>

		<div class="mod-status app-themes" data-prefix="Themes">
			<div class="clickable-boxes">
				<!-- Default -->
				<input type="radio" id="option0" name="options" data-action="theme-style" data-theme-style="" checked>
				<label for="option0" data-prefix="Default" style="background: linear-gradient(135deg, #FF6A00, #F6A2D5, #4C91BF, #7A8B92, #AB7C9A);"></label>

				<!-- Nebula -->
				<input type="radio" id="option1" name="options" data-action="theme-style" data-theme-style="nebula">
				<label for="option1" data-prefix="Nebula" style="background: linear-gradient(135deg, #2a7dbf, #2a9d8f, #766cbc, #f4a261, #e76f51);"></label>

				<!-- Olive -->
				<input type="radio" id="option2" name="options" data-action="theme-style" data-theme-style="olive">
				<label for="option2" data-prefix="Olive" style="background: linear-gradient(135deg, #556B2F, #6B8E23, #8B9A3D, #A9B83E, #BDB76B);"></label>

				<!-- Solar -->
				<input type="radio" id="option3" name="options" data-action="theme-style" data-theme-style="solar">
				<label for="option3" data-prefix="Solar" style="background: linear-gradient(135deg, #FF8C00, #FFD700, #FF4500, #F1C40F, #F39C12);"></label>

				<!-- Lunar -->
				<input type="radio" id="option4" name="options" data-action="theme-style" data-theme-style="lunar">
				<label for="option4" data-prefix="Lunar" style="background: linear-gradient(135deg, #2C3E50, #34495E, #5F6368, #AAB7B8, #E6E6FA, #F1F3F4);"></label>

				<!-- Night -->
				<input type="radio" id="option5" name="options" data-action="theme-style" data-theme-style="night">
				<label for="option5" data-prefix="Night" style="background: linear-gradient(135deg, #1e2a47, #2b3654, #363d6c, #4f5d79, #717b91, #b6c4d1);"></label>

				<!-- Aurora -->
				<input type="radio" id="option6" name="options" data-action="theme-style" data-theme-style="aurora">
				<label for="option6" data-prefix="Aurora" style="background: linear-gradient(135deg, #337e7e, #527a4a, #63279b, #7FFF00, #87CEFA, #B0E0E6);"></label>

				<!-- Earth -->
				<input type="radio" id="option7" name="options" data-action="theme-style" data-theme-style="earth">
				<label for="option7" data-prefix="Earth" style="background: linear-gradient(135deg, #2198f3, #3173a5, #3f6888, #618d48, #52bf11);"></label>

				<!-- Flare -->
				<input type="radio" id="option8" name="options" data-action="theme-style" data-theme-style="flare">
				<label for="option8" data-prefix="Flare" style="background: linear-gradient(135deg, #FF4500, #FF6347, #F44336, #D32F2F, #B71C1C);"></label>

				<!-- Storm -->
				<input type="radio" id="option9" name="options" data-action="theme-style" data-theme-style="storm">
				<label for="option9" data-prefix="Storm" style="background: linear-gradient(135deg, #2F4F4F, #3B5360, #4B6A6E, #5A7980, #A9A9A9, #FFD700);"></label>

			</div>
		</div>

		<div class="d-flex" style="gap:10px">
			<button type="button" onclick="appDOM.resetStyle();" class="btn reset-button btn-outline-danger flex-grow-1"> <i class="sa sa-reload align-base me-1"></i> Factory Reset</button>
			<button type="button" onclick="resetPanelState();" class="btn btn-outline-secondary flex-grow-1"><i class="sa sa-reload align-base me-1"></i> Reset Panel</button>
		</div>
	</div>
</aside>

<div class="backdrop" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-drawer-settings"></div>