<?php
if (! defined('ABSPATH')) {
    exit;
}

if (isset($args) && is_array($args)) {
    $pgo_header_mobile_open_var = isset($args['pgo_header_mobile_open_var']) ? $args['pgo_header_mobile_open_var'] : 'mobileOpen';
    $pgo_header_mobile_panel_title = isset($args['pgo_header_mobile_panel_title']) ? $args['pgo_header_mobile_panel_title'] : __('Menu', 'puffergo');
    $pgo_header_mobile_panel_content = isset($args['pgo_header_mobile_panel_content']) ? $args['pgo_header_mobile_panel_content'] : '';
    $pgo_header_mobile_panel_id = isset($args['pgo_header_mobile_panel_id']) ? $args['pgo_header_mobile_panel_id'] : 'puffergo-mobile-menu-panel';
} else {
    if (! isset($pgo_header_mobile_open_var)) {
        $pgo_header_mobile_open_var = 'mobileOpen';
    }

if (! isset($pgo_header_mobile_panel_title)) {
        $pgo_header_mobile_panel_title = __('Menu', 'puffergo');
    }

if (! isset($pgo_header_mobile_panel_content)) {
        $pgo_header_mobile_panel_content = '';
    }

if (! isset($pgo_header_mobile_panel_id)) {
        $pgo_header_mobile_panel_id = 'puffergo-mobile-menu-panel';
    }
} ?>
<div
	id="<?php echo esc_attr($pgo_header_mobile_panel_id); ?>"
	class="fixed inset-0 z-50 lg:hidden"
	x-show="<?php echo esc_attr($pgo_header_mobile_open_var); ?>"
	x-cloak
	role="dialog"
	aria-modal="true"
	:aria-hidden="<?php echo esc_attr($pgo_header_mobile_open_var); ?> ? 'false' : 'true'"
	x-transition:enter="transition ease-out duration-200"
	x-transition:enter-start="opacity-0"
	x-transition:enter-end="opacity-100"
	x-transition:leave="transition ease-in duration-150"
	x-transition:leave-start="opacity-100"
	x-transition:leave-end="opacity-0"
>
	<div class="fixed inset-0 bg-neutral-900/20" @click="<?php echo esc_attr($pgo_header_mobile_open_var); ?> = false" aria-hidden="true"></div>
	<div
		class="fixed inset-y-0 right-0 z-50 w-full max-w-sm overflow-y-auto p-6 shadow-xl"
		style="background-color: var(--puffergo-header-bg, #f9fafb); border-left: 1px solid color-mix(in srgb, var(--puffergo-header-text, #1a1a1a) 12%, transparent);"
		@click.stop
	>
		<div class="flex items-center justify-between">
			<span class="text-base font-semibold" style="color: var(--puffergo-header-text, #1a1a1a);"><?php echo esc_html($pgo_header_mobile_panel_title); ?></span>
			<button
				type="button"
				class="puffergo-header-mobile-close -m-2.5 inline-flex items-center justify-center rounded-md p-2.5"
				style="color: color-mix(in srgb, var(--puffergo-header-text, #1a1a1a) 80%, transparent);"
				@mouseover="$el.style.backgroundColor = 'color-mix(in srgb, var(--puffergo-header-text) 10%, transparent)'"
				@mouseout="$el.style.backgroundColor = 'transparent'"
				@click="<?php echo esc_attr($pgo_header_mobile_open_var); ?> = false"
				aria-label="<?php esc_attr_e('Close menu', 'puffergo'); ?>"
			>
				<span class="sr-only"><?php esc_html_e('Close menu', 'puffergo'); ?></span>
				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true" class="size-6">
					<path d="M6 18 18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
				</svg>
			</button>
		</div>
		<div class="mt-6 flex flex-col gap-0">
			<?php
echo $pgo_header_mobile_panel_content; ?>
		</div>
	</div>
</div>
