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

<main class="puffergo-fullpage-layout puffergo-product-archive">
	<div class="mx-auto max-w-canvas px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
	<?php puffergo_render_component('breadcrumb', array('items' => $data->get_breadcrumb_items())); ?>
	<header class="mb-8">
		<h1 class="text-3xl md:text-4xl font-bold text-neutral-900 mb-2"><?php echo esc_html($data->page_title); ?></h1>
		<?php if ($data->is_category_page && $data->page_description) : ?>
			<div class="prose prose-gray max-w-none"><?php echo wp_kses_post($data->page_description); ?></div>
		<?php endif; ?>
	</header>

	<?php
ob_start();
puffergo_render_component('product-filter-sidebar', array('tree' => $data->category_tree, 'archive_url' => $data->archive_url, 'all_active' => ! $data->is_category_page, ));
$pgo_filter_html = ob_get_clean();
$pgo_has_filter = '' !== trim($pgo_filter_html); ?>

	<div
		<?php echo $pgo_has_filter ? 'x-data="{ filterOpen: false }"' : ''; ?>
		class="<?php echo $pgo_has_filter ? 'lg:flex lg:gap-8' : ''; ?>"
	>
		<?php if ($pgo_has_filter) : ?>
			<aside class="hidden lg:block lg:w-56 lg:flex-shrink-0">
				<?php echo $pgo_filter_html; ?>
			</aside>
		<?php endif; ?>

		<div class="lg:flex-1 lg:min-w-0">
		<?php if ($pgo_has_filter) : ?>
			<div class="lg:hidden mb-6">
				<button type="button" @click="filterOpen = true" class="inline-flex items-center gap-2 rounded-full border border-neutral-200 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-100 transition">
					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L14 14.414V19a1 1 0 01-.553.894l-4 2A1 1 0 018 21v-6.586L3.293 6.707A1 1 0 013 6V4z"></path></svg>
					<?php esc_html_e('Categories', 'puffergo'); ?>
				</button>
			</div>
		<?php endif; ?>

	<?php if (! empty($data->products)) : ?>
		<div class="product-list flex flex-col gap-4">
			<?php foreach ($data->products as $product) : ?>
				<article class="product-card-list relative flex flex-col sm:flex-row gap-4 bg-neutral-50 rounded-lg shadow-sm hover:shadow-md transition overflow-hidden group">
					<div class="flex sm:w-48 md:w-56 flex-shrink-0">
						<?php if ($product['image_id']) : ?>
							<div class="overflow-hidden relative aspect-square w-full">
								<?php echo wp_get_attachment_image($product['image_id'], 'medium', false, array('class' => 'w-full h-full object-cover group-hover:scale-105 transition duration-300')); ?>
							</div>
						<?php else : ?>
							<div class="w-full aspect-square bg-neutral-200 flex items-center justify-center">
								<svg class="w-8 h-8 text-neutral-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
								</svg>
							</div>
						<?php endif; ?>
					</div>
					<div class="flex-1 p-4 flex flex-col justify-between">
						<div>
							<h2 class="text-lg font-semibold mb-2">
								<a href="<?php echo esc_url($product['url']); ?>" class="text-neutral-900 group-hover:text-brand-600 transition after:absolute after:inset-0 after:content-['']"><?php echo esc_html($product['title']); ?></a>
							</h2>
							<?php if ($product['description']) : ?>
								<p class="text-sm text-neutral-600 line-clamp-2 mb-2"><?php echo wp_kses_post($product['description']); ?></p>
							<?php endif; ?>
						</div>
						<?php if ($product['price']) : ?>
							<p class="text-lg font-semibold text-brand-600"><?php echo esc_html($product['price']); ?></p>
						<?php endif; ?>
					</div>
				</article>
			<?php endforeach; ?>
		</div>

		<?php
puffergo_render_component('blog-pagination', array('current_page' => $data->paged, 'max_pages' => $data->max_pages, 'current_url' => $data->current_url, )); ?>

	<?php else : ?>
		<div class="no-products text-center py-12">
			<svg class="w-16 h-16 mx-auto text-neutral-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
			</svg>
			<p class="text-neutral-500"><?php esc_html_e('No products found.', 'puffergo'); ?></p>
		</div>
	<?php endif; ?>
		</div><!-- /.lg:flex-1 内容栏 -->

		<?php
if ($pgo_has_filter) {
    puffergo_render_component('mobile-panel', array('pgo_header_mobile_open_var' => 'filterOpen', 'pgo_header_mobile_panel_title' => __('Categories', 'puffergo'), 'pgo_header_mobile_panel_id' => 'puffergo-product-filter-panel', 'pgo_header_mobile_panel_content' => $pgo_filter_html, ));
} ?>
	</div><!-- /两栏容器 -->
	</div>
</main>
