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

if (! function_exists('puffergo_render_menu_branch_mobile')) {
    function puffergo_render_menu_branch_mobile(array $pgo_items, $pgo_depth, $pgo_path)
    {
        $max_depth = 2;
        $indent_rem = $pgo_depth * 0.75;

        foreach ($pgo_items as $pgo_i => $pgo_item) {
            $pgo_item_path = $pgo_path . '-' . $pgo_i;
            $pgo_has_kids = ! empty($pgo_item->children) && is_array($pgo_item->children);
            $pgo_can_expand = $pgo_has_kids && $pgo_depth < $max_depth;

            if ($pgo_can_expand) { ?>
				<div class="-mx-3" style="padding-left: <?php echo esc_attr($indent_rem); ?>rem;">
					<?php if (puffergo_is_clickable_parent($pgo_item)) : ?>
						<div class="flex items-center justify-between">
							<a href="<?php echo esc_url($pgo_item->url); ?>" class="pgo-header-mobile-parent-link">
								<?php echo esc_html($pgo_item->title); ?>
							</a>
							<button
								type="button"
								class="pgo-header-mobile-parent-toggle"
								@click="pgoMobileToggle('<?php echo esc_js($pgo_item_path); ?>')"
								:aria-expanded="pgoMobileIsOpen('<?php echo esc_js($pgo_item_path); ?>') ? 'true' : 'false'"
								aria-label="<?php echo esc_attr(sprintf(__('Toggle %s submenu', 'puffergo'), $pgo_item->title)); ?>"
							>
								<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-5 flex-none opacity-50" :class="pgoMobileIsOpen('<?php echo esc_js($pgo_item_path); ?>') ? 'rotate-180' : ''">
									<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
								</svg>
							</button>
						</div>
					<?php else : ?>
						<button
							type="button"
							class="pgo-header-mobile-parent"
							@click="pgoMobileToggle('<?php echo esc_js($pgo_item_path); ?>')"
							:aria-expanded="pgoMobileIsOpen('<?php echo esc_js($pgo_item_path); ?>') ? 'true' : 'false'"
						>
							<?php echo esc_html($pgo_item->title); ?>
							<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-5 flex-none opacity-50" :class="pgoMobileIsOpen('<?php echo esc_js($pgo_item_path); ?>') ? 'rotate-180' : ''">
								<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
							</svg>
						</button>
					<?php endif; ?>
					<div x-cloak x-show="pgoMobileIsOpen('<?php echo esc_js($pgo_item_path); ?>')" class="mt-2 space-y-2">
						<?php puffergo_render_menu_branch_mobile($pgo_item->children, $pgo_depth + 1, $pgo_item_path); ?>
					</div>
				</div>
				<?php
            } else { ?>
				<a href="<?php echo esc_url($pgo_item->url); ?>" class="pgo-header-mobile-child-link" style="padding-left: <?php echo esc_attr($indent_rem + 0.5); ?>rem;">
					<span class="flex items-center gap-3">
						<?php
            $pgo_icon = puffergo_get_menu_icon_markup($pgo_item->icon, 'size-5 shrink-0 opacity-50');

                if ('' !== $pgo_icon) {
                    echo $pgo_icon;
                } ?>
						<span><?php echo esc_html($pgo_item->title); ?></span>
					</span>
				</a>
				<?php
            }
        }
    }
} puffergo_render_menu_branch_mobile($pgo_branch_items, $pgo_branch_depth, $pgo_branch_path);
