<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Templates use local variables supplied by the render context.
if (!defined('ABSPATH')) {
    exit;
}
// phpcs:disable WordPress.Security.NonceVerification.Recommended -- Archive template reads query parameters only to adjust display state.

$ui_labels = isset($ui_labels) && is_array($ui_labels) ? $ui_labels : [];
$archive_title = sanitize_text_field((string) ($ui_labels['archive_title'] ?? __('View Events', 'nexdirectory')));
$archive_description = sanitize_text_field((string) ($ui_labels['archive_description'] ?? __('Discover official and community events around the world.', 'nexdirectory')));
$archive_kicker = sanitize_text_field((string) $this->get_event_hero_kicker_text());

if ($archive_kicker === '') {
    $archive_kicker = $this->get_white_label_brand_name();
}

$plural_label = sanitize_text_field((string) ($ui_labels['plural'] ?? __('Events', 'nexdirectory')));
$type_label = sanitize_text_field((string) ($ui_labels['taxonomy_type_singular'] ?? __('Event Type', 'nexdirectory')));
$mode_label = sanitize_text_field((string) ($ui_labels['taxonomy_mode_singular'] ?? __('Event Mode', 'nexdirectory')));
$tag_label = sanitize_text_field((string) ($ui_labels['taxonomy_tag_singular'] ?? __('Tag', 'nexdirectory')));
$type_plural = sanitize_text_field((string) ($ui_labels['taxonomy_type_plural'] ?? __('Types', 'nexdirectory')));
$mode_plural = sanitize_text_field((string) ($ui_labels['taxonomy_mode_plural'] ?? __('Modes', 'nexdirectory')));
$tag_plural = sanitize_text_field((string) ($ui_labels['taxonomy_tag_plural'] ?? __('Tags', 'nexdirectory')));
$filter_search_label = sanitize_text_field((string) ($ui_labels['filter_search_label'] ?? __('Search', 'nexdirectory')));
$filter_price_label = sanitize_text_field((string) ($ui_labels['filter_price_label'] ?? __('Price Range', 'nexdirectory')));
$filter_price_any_label = sanitize_text_field((string) ($ui_labels['filter_price_any_label'] ?? __('Any Price', 'nexdirectory')));
$filter_city_label = sanitize_text_field((string) ($ui_labels['filter_city_label'] ?? __('City', 'nexdirectory')));
$filter_from_date_label = sanitize_text_field((string) ($ui_labels['filter_from_date_label'] ?? __('From Date', 'nexdirectory')));
$city = sanitize_text_field((string) ($city ?? ''));

$classification_labels = method_exists($this, 'get_classification_labels') ? (array) $this->get_classification_labels() : [];
$official_filter_label = sanitize_text_field((string) ($ui_labels['classification_label'] ?? __('Classification', 'nexdirectory')));
$official_option_label = sanitize_text_field((string) ($classification_labels['official'] ?? __('Official', 'nexdirectory')));
$unofficial_option_label = sanitize_text_field((string) ($classification_labels['unofficial'] ?? __('Unofficial', 'nexdirectory')));

$show_search_filter = isset($show_search_filter) ? (bool) $show_search_filter : true;
$show_type_filter = isset($show_type_filter) ? (bool) $show_type_filter : true;
$show_mode_filter = isset($show_mode_filter) ? (bool) $show_mode_filter : true;
$show_tag_filter = isset($show_tag_filter) ? (bool) $show_tag_filter : false;
$show_date_filter = isset($show_date_filter) ? (bool) $show_date_filter : true;
$show_price_filter = isset($show_price_filter) ? (bool) $show_price_filter : true;
$show_official_filter = isset($show_official_filter) ? (bool) $show_official_filter : true;

$archive_popular_categories = [];
if ($show_type_filter) {
    $archive_popular_terms = get_terms([
        'taxonomy' => $this::TAX_TYPE,
        'hide_empty' => true,
        'orderby' => 'count',
        'order' => 'DESC',
        'number' => 6,
    ]);
    if (!is_wp_error($archive_popular_terms) && is_array($archive_popular_terms)) {
        foreach ($archive_popular_terms as $archive_popular_term) {
            if (!$archive_popular_term instanceof WP_Term) {
                continue;
            }
            $archive_popular_slug = sanitize_key((string) $archive_popular_term->slug);
            $archive_popular_name = sanitize_text_field((string) $archive_popular_term->name);
            if ($archive_popular_slug === '' || $archive_popular_name === '') {
                continue;
            }
            $archive_popular_categories[] = [
                'slug' => $archive_popular_slug,
                'name' => $archive_popular_name,
            ];
        }
    }
}

$archive_recovery_config = [
    /* translators: %s: Plural directory content label, such as events or listings. */
    'title' => sprintf(__('No matching %s yet', 'nexdirectory'), strtolower($plural_label)),
    'description' => __('A small change can open up more results. Remove one filter, search every location, or start with a popular category.', 'nexdirectory'),
    /* translators: %s: Plural directory content label, such as events or listings. */
    'noFiltersDescription' => sprintf(__('There are no published %s to show here yet. Try a popular category or check back soon.', 'nexdirectory'), strtolower($plural_label)),
    'removeHeading' => __('Try removing a filter', 'nexdirectory'),
    'removeLabel' => __('Remove filter', 'nexdirectory'),
    'alternativesHeading' => __('Broaden your search', 'nexdirectory'),
    'clearAll' => __('Clear filters and browse all', 'nexdirectory'),
    'everywhere' => __('Search every location', 'nexdirectory'),
    'anyDate' => __('Show any date', 'nexdirectory'),
    'popularHeading' => __('Popular categories', 'nexdirectory'),
    'browseLabel' => __('Browse', 'nexdirectory'),
    /* translators: %s: Plural directory content label, such as events or listings. */
    'resultsLabel' => sprintf(__('%s search results', 'nexdirectory'), $plural_label),
    'filterLabels' => [
        's' => $filter_search_label,
        'event_type' => $type_label,
        'event_mode' => $mode_label,
        'event_price' => $filter_price_label,
        'event_tag' => $tag_label,
        'city' => $filter_city_label,
        'date_from' => $filter_from_date_label,
        'official' => $official_filter_label,
    ],
    'popularCategories' => $archive_popular_categories,
];

$resolve_filter_option_name = static function (array $options, $slug) {
    $slug = sanitize_key((string) $slug);
    if ($slug === '') {
        return '';
    }
    foreach ($options as $option) {
        if (!is_array($option)) {
            continue;
        }
        $option_slug = sanitize_key((string) ($option['slug'] ?? ''));
        if ($option_slug !== '' && $option_slug === $slug) {
            $name = sanitize_text_field((string) ($option['name'] ?? ''));
            if ($name !== '') {
                return $name;
            }
            break;
        }
    }
    return sanitize_text_field(ucwords(str_replace(['-', '_'], ' ', $slug)));
};

$active_hero_taxonomy_name = '';
$active_hero_filter_kind = '';
if (!empty($tag)) {
    $active_hero_taxonomy_name = $resolve_filter_option_name((array) ($filter_options['event_tag'] ?? []), $tag);
    $active_hero_filter_kind = 'tag';
} elseif (!empty($type)) {
    $active_hero_taxonomy_name = $resolve_filter_option_name((array) ($filter_options['event_type'] ?? []), $type);
    $active_hero_filter_kind = 'type';
} elseif (!empty($mode)) {
    $active_hero_taxonomy_name = $resolve_filter_option_name((array) ($filter_options['event_mode'] ?? []), $mode);
    $active_hero_filter_kind = 'mode';
} elseif (!empty($price_range)) {
    $active_hero_taxonomy_name = $resolve_filter_option_name((array) ($filter_options['event_price'] ?? []), $price_range);
    $active_hero_filter_kind = 'price';
}

if ($active_hero_taxonomy_name !== '') {
    $archive_title = trim($active_hero_taxonomy_name . ' ' . $plural_label);
    if ($active_hero_filter_kind === 'tag') {
        $archive_description = sprintf(
            /* translators: 1: Placeholder value 1, 2: Placeholder value 2. */
            __('Showing %1$s tagged as %2$s.', 'nexdirectory'),
            strtolower($plural_label),
            $active_hero_taxonomy_name
        );
    } elseif ($active_hero_filter_kind === 'type') {
        $archive_description = sprintf(
            /* translators: 1: Placeholder value 1, 2: Placeholder value 2. */
            __('Showing %1$s in the %2$s category.', 'nexdirectory'),
            strtolower($plural_label),
            $active_hero_taxonomy_name
        );
    } elseif ($active_hero_filter_kind === 'mode') {
        $archive_description = sprintf(
            /* translators: 1: Placeholder value 1, 2: Placeholder value 2. */
            __('Showing %1$s in %2$s mode.', 'nexdirectory'),
            strtolower($plural_label),
            $active_hero_taxonomy_name
        );
    } elseif ($active_hero_filter_kind === 'price') {
        $archive_description = sprintf(
            /* translators: 1: Placeholder value 1, 2: Placeholder value 2. */
            __('Showing %1$s for the %2$s price range.', 'nexdirectory'),
            strtolower($plural_label),
            $active_hero_taxonomy_name
        );
    }
}

$archive_cols_raw = filter_input(INPUT_GET, 'nexdirectory_cols', FILTER_SANITIZE_NUMBER_INT);
$archive_cols = $archive_cols_raw !== null && $archive_cols_raw !== false ? absint((int) $archive_cols_raw) : 3;
if (!in_array($archive_cols, [2, 3, 4], true)) {
    $archive_cols = 3;
}
$archive_orderby_raw = filter_input(INPUT_GET, 'orderby', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$archive_orderby = $archive_orderby_raw !== null && $archive_orderby_raw !== false ? sanitize_key((string) $archive_orderby_raw) : 'meta_value';
if (!in_array($archive_orderby, ['meta_value', 'date'], true)) {
    $archive_orderby = 'meta_value';
}

$archive_page_id = absint((int) get_queried_object_id());
$archive_featured_hero = '';
if ($archive_page_id > 0 && has_post_thumbnail($archive_page_id)) {
    $archive_featured_candidate = get_the_post_thumbnail_url($archive_page_id, 'full');
    if (is_string($archive_featured_candidate) && $archive_featured_candidate !== '') {
        $archive_featured_hero = esc_url($archive_featured_candidate);
    }
}
$archive_fallback_hero = esc_url((string) get_option('nexdirectory_style_fallback_hero_url', ''));
$archive_banner_hero = $archive_featured_hero !== '' ? $archive_featured_hero : $archive_fallback_hero;
$archive_banner_has_image = $archive_banner_hero !== '';
$archive_hero_img_src = $archive_banner_has_image
    ? $archive_banner_hero
    : plugins_url('assets/images/placeholder-hero.svg', NEXDIRECTORY_PLUGIN_FILE);
?>

<?php $this->enqueue_local_style_asset('templates-frontend-events-archive-php-style-1', 'assets/generated/templates-frontend-events-archive-php-style-1.css'); ?>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 nexdirectory-animate-fade">
    <?php echo wp_kses_post($this->render_notice()); ?>
</div>
<?php
$nexdirectory_breadcrumb_markup = NEXDIRECTORY_Escaping::prepare_markup_for_wp_kses((string) $this->render_platform_breadcrumbs($archive_title));
echo wp_kses($nexdirectory_breadcrumb_markup, NEXDIRECTORY_Escaping::allowed_html($nexdirectory_breadcrumb_markup));
?>

<div class="nexdirectory-archive-page bg-gray-50 text-gray-800 font-sans antialiased selection:bg-brand-100 selection:text-brand-700 pb-20 md:pb-8 min-h-screen">
    
    <main class="max-w-7xl mx-auto px-0 sm:px-6 lg:px-8">
        
        <div class="nexdirectory-animate-fade relative sm:rounded-2xl overflow-hidden mb-6 sm:mb-8 shadow-sm group bg-gray-900 flex flex-col justify-end min-h-[40vh] sm:min-h-[350px]">
            
            <img src="<?php echo esc_url($archive_hero_img_src); ?>" alt="<?php echo esc_attr($archive_title); ?>" class="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 sm:group-hover:scale-105 opacity-80 sm:opacity-100" data-nexdirectory-hero-parallax="1">
            
            <div class="absolute inset-0 bg-gradient-to-t from-gray-950 via-gray-900/70 to-transparent"></div>
            
            <div class="relative z-10 p-6 sm:p-8 lg:p-12 w-full mt-auto">
                <div class="flex flex-wrap items-center gap-2 mb-3">
                    <span class="inline-flex items-center px-3 py-1 rounded-full bg-brand-500/20 text-white text-[10px] sm:text-xs font-semibold uppercase tracking-wider backdrop-blur-sm border border-brand-500/30" style="color:#ffffff!important;">
                        <?php echo esc_html($archive_kicker); ?>
                    </span>
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full bg-white/10 text-white text-[10px] sm:text-xs font-semibold uppercase tracking-wider backdrop-blur-sm border border-white/20 flex items-center gap-1.5">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                        <?php echo esc_html($plural_label); ?>
                    </span>
                </div>
                
                <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-3 sm:mb-4 leading-tight tracking-tight drop-shadow-md">
                    <?php echo esc_html($archive_title); ?>
                </h1>
                
                <?php if ($archive_description !== '') : ?>
                    <p class="text-gray-300 text-base sm:text-lg max-w-2xl leading-relaxed">
                        <?php echo esc_html($archive_description); ?>
                    </p>
                <?php endif; ?>
            </div>
        </div>

        <?php if ($show_type_filter) : ?>
            <div class="lg:hidden w-full overflow-x-auto no-scrollbar bg-gray-50 border-b border-gray-200 sticky top-16 z-30 nexdirectory-animate-fade" style="animation-delay: 0.1s;">
                <div class="flex gap-2 px-4 py-3 min-w-max">
                    <a href="<?php echo esc_url(get_permalink()); ?>" class="<?php echo empty($type) ? 'bg-brand-500 !text-white border border-brand-500 [&,*]:!text-white' : 'bg-white border border-gray-300 text-gray-700 hover:bg-gray-50'; ?> px-4 py-1.5 rounded-full text-sm font-medium shadow-sm" <?php echo empty($type) ? 'style="color:#fff!important;-webkit-text-fill-color:#fff!important;background:var(--nexdirectory-primary)!important;border-color:var(--nexdirectory-primary)!important;"' : ''; ?>>
                        <?php esc_html_e('All', 'nexdirectory'); ?>
                    </a>
                    <?php foreach ((array) ($filter_options['event_type'] ?? []) as $option) : ?>
                        <a href="<?php echo esc_url(nexdirectory_add_query_arg('event_type', $option['slug'], get_permalink())); ?>" class="<?php echo ($type === $option['slug']) ? 'bg-brand-500 !text-white border border-brand-500 [&,*]:!text-white' : 'bg-white border border-gray-300 text-gray-700 hover:bg-gray-50'; ?> px-4 py-1.5 rounded-full text-sm font-medium" <?php echo ($type === $option['slug']) ? 'style="color:#fff!important;-webkit-text-fill-color:#fff!important;background:var(--nexdirectory-primary)!important;border-color:var(--nexdirectory-primary)!important;"' : ''; ?>>
                            <?php echo esc_html((string) ($option['name'] ?? '')); ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
        <?php endif; ?>

        <div class="nexdirectory-animate-fade py-6 flex flex-col lg:flex-row gap-8 items-start" style="animation-delay: 0.15s;" x-data="{
            filtersSheetOpen: false,
            filtersTrigger: null,
            closeFiltersSheet() {
                this.filtersSheetOpen = false;
                document.body.classList.remove('nexdirectory-filter-dialog-open');
                this.$nextTick(() => {
                    if (this.filtersTrigger && typeof this.filtersTrigger.focus === 'function') {
                        this.filtersTrigger.focus();
                    }
                });
            }
        }" @keydown.escape.window="if (filtersSheetOpen) closeFiltersSheet()">
            
            <?php if ($show_sidebar) : ?>
            <aside class="hidden lg:block w-72 flex-shrink-0 sticky top-24 bg-white p-6 rounded-2xl shadow-sm border border-gray-200">
                <div class="flex items-center gap-3 mb-6 pb-4 border-b border-gray-100">
                    <div class="w-10 h-10 bg-brand-50 rounded-xl flex items-center justify-center text-brand-500">
                        <svg class="w-4 h-4" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h18M6 12h12M10 19h4"></path>
                        </svg>
                    </div>
                    <?php /* translators: %s: Placeholder value. */ ?>
                    <h2 class="font-bold text-lg text-gray-900"><?php echo esc_html(sprintf(__('Filter %s', 'nexdirectory'), $plural_label)); ?></h2>
                </div>
                
                <form method="get" class="space-y-5 nexdirectory-archive-filter-form">
                    <input type="hidden" name="paged" value="1">
                    <input type="hidden" name="organizer" value="<?php echo esc_attr((string) $organizer_id); ?>">
                    <input type="hidden" name="posts_per_page" value="<?php echo esc_attr((string) $posts_per_page); ?>">
                    <input type="hidden" name="nexdirectory_cols" class="nexdirectory-archive-cols-input" value="<?php echo esc_attr((string) $archive_cols); ?>">
                    <input type="hidden" name="orderby" value="<?php echo esc_attr($archive_orderby); ?>">

                    <?php if ($show_search_filter) : ?>
                        <div>
                            <label for="nexdirectory-archive-search" class="block text-sm font-semibold text-gray-700 mb-2"><?php echo esc_html($filter_search_label); ?></label>
                            <input type="text" id="nexdirectory-archive-search" name="nexdirectory_search" value="<?php echo esc_attr($search); ?>" placeholder="<?php esc_attr_e('Keywords...', 'nexdirectory'); ?>" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 outline-none">
                        </div>
                    <?php endif; ?>

                    <div>
                        <label for="nexdirectory-archive-city" class="block text-sm font-semibold text-gray-700 mb-2"><?php echo esc_html($filter_city_label); ?></label>
                        <input type="text" id="nexdirectory-archive-city" name="city" value="<?php echo esc_attr((string) $city); ?>" placeholder="<?php esc_attr_e('Enter a city', 'nexdirectory'); ?>" autocomplete="address-level2" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 outline-none">
                    </div>
                    
                    <?php if ($show_type_filter) : ?>
                        <div>
                            <label for="nexdirectory-archive-type" class="block text-sm font-semibold text-gray-700 mb-2"><?php echo esc_html($type_label); ?></label>
                            <select id="nexdirectory-archive-type" name="event_type" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm outline-none">
                                <?php /* translators: %s: Placeholder value. */ ?>
                                <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $type_plural)); ?></option>
                                <?php foreach ((array) ($filter_options['event_type'] ?? []) as $option) : ?>
                                    <option value="<?php echo esc_attr((string) ($option['slug'] ?? '')); ?>" <?php selected($type, (string) ($option['slug'] ?? '')); ?>>
                                        <?php echo esc_html((string) ($option['name'] ?? '')); ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    <?php endif; ?>

                    <?php if ($show_mode_filter) : ?>
                        <div>
                            <label for="nexdirectory-archive-mode" class="block text-sm font-semibold text-gray-700 mb-2"><?php echo esc_html($mode_label); ?></label>
                            <select id="nexdirectory-archive-mode" name="event_mode" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm outline-none">
                                <?php /* translators: %s: Placeholder value. */ ?>
                                <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $mode_plural)); ?></option>
                                <?php foreach ((array) ($filter_options['event_mode'] ?? []) as $option) : ?>
                                    <option value="<?php echo esc_attr((string) ($option['slug'] ?? '')); ?>" <?php selected($mode, (string) ($option['slug'] ?? '')); ?>>
                                        <?php echo esc_html((string) ($option['name'] ?? '')); ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    <?php endif; ?>

                    <?php if ($show_tag_filter) : ?>
                        <div>
                            <label for="nexdirectory-archive-tag" class="block text-sm font-semibold text-gray-700 mb-2"><?php echo esc_html($tag_label); ?></label>
                            <select id="nexdirectory-archive-tag" name="event_tag" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm outline-none">
                                <?php /* translators: %s: Placeholder value. */ ?>
                                <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $tag_plural)); ?></option>
                                <?php foreach ((array) ($filter_options['event_tag'] ?? []) as $option) : ?>
                                    <option value="<?php echo esc_attr((string) ($option['slug'] ?? '')); ?>" <?php selected($tag, (string) ($option['slug'] ?? '')); ?>>
                                        <?php echo esc_html((string) ($option['name'] ?? '')); ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    <?php endif; ?>

                    <?php if ($show_price_filter) : ?>
                        <div>
                            <label for="nexdirectory-archive-price" class="block text-sm font-semibold text-gray-700 mb-2"><?php echo esc_html($filter_price_label); ?></label>
                            <select id="nexdirectory-archive-price" name="event_price" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm outline-none">
                                <option value=""><?php echo esc_html($filter_price_any_label); ?></option>
                                <?php foreach ((array) ($filter_options['event_price'] ?? []) as $option) : ?>
                                    <option value="<?php echo esc_attr((string) ($option['slug'] ?? '')); ?>" <?php selected($price_range, (string) ($option['slug'] ?? '')); ?>>
                                        <?php echo esc_html((string) ($option['name'] ?? '')); ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    <?php endif; ?>

                    <?php if ($show_date_filter) : ?>
                        <div>
                            <label for="nexdirectory-archive-date" class="block text-sm font-semibold text-gray-700 mb-2"><?php echo esc_html($filter_from_date_label); ?></label>
                            <input type="date" id="nexdirectory-archive-date" name="date_from" value="<?php echo esc_attr($date_from); ?>" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm outline-none">
                        </div>
                    <?php endif; ?>

                    <?php if ($show_official_filter) : ?>
                        <div>
                            <label for="nexdirectory-archive-official" class="block text-sm font-semibold text-gray-700 mb-2"><?php echo esc_html($official_filter_label); ?></label>
                            <select id="nexdirectory-archive-official" name="official" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm outline-none">
                                <option value=""><?php esc_html_e('All', 'nexdirectory'); ?></option>
                                <option value="1" <?php selected((string) $official, '1'); ?>><?php echo esc_html($official_option_label); ?></option>
                                <option value="0" <?php selected((string) $official, '0'); ?>><?php echo esc_html($unofficial_option_label); ?></option>
                            </select>
                        </div>
                    <?php endif; ?>

                    <?php
                    $nexdirectory_checkin_controls = NEXDIRECTORY_Escaping::prepare_markup_for_wp_kses((string) $this->render_builder_checkin_filter_controls('archive', 'events-archive-desktop'));
                    echo wp_kses($nexdirectory_checkin_controls, NEXDIRECTORY_Escaping::allowed_html($nexdirectory_checkin_controls));
                    ?>

                    <button type="submit" class="w-full py-3 rounded-xl bg-brand-500 text-white font-medium hover:bg-brand-600 shadow-sm transition-all text-sm">
                        <?php esc_html_e('Apply Filters', 'nexdirectory'); ?>
                    </button>
                    
                    <?php if (!empty($has_active_filters)) : ?>
                        <a href="<?php echo esc_url(get_permalink()); ?>" class="nexdirectory-archive-clear-btn block w-full py-3 mt-2 rounded-xl border border-gray-200 bg-white text-gray-600 font-medium hover:bg-gray-50 text-center text-sm">
                            <?php esc_html_e('Clear all', 'nexdirectory'); ?>
                        </a>
                    <?php endif; ?>
                </form>
            </aside>
            <?php endif; ?>

            <section class="flex-1 w-full min-w-0 bg-white sm:rounded-2xl shadow-sm border-y sm:border border-gray-100 overflow-hidden relative">
                
                <div class="h-1.5 w-full bg-gradient-to-r from-brand-400 to-brand-600"></div>
                
                <div class="p-4 sm:p-6 lg:p-8">
                    <div class="flex items-center justify-between mb-4 lg:mb-6 pb-4 border-b border-gray-100">
                        <p class="text-sm font-medium text-gray-500">
                            <span class="text-gray-900 font-bold" data-nexdirectory-archive-visible-count><?php echo isset($query->found_posts) ? esc_html($query->found_posts) : '0'; ?></span> <?php echo esc_html(strtolower($plural_label)); ?> <?php esc_html_e('found', 'nexdirectory'); ?>
                        </p>
                        <div class="hidden lg:flex items-center gap-4 text-sm">
                            <div class="flex items-center gap-2">
                                <span class="text-gray-500">Sort:</span>
                                <select aria-label="<?php esc_attr_e('Sort results', 'nexdirectory'); ?>" class="bg-transparent font-bold text-gray-900 outline-none cursor-pointer" onchange="var url=new URL(window.location.href);url.searchParams.set('orderby',this.value);url.searchParams.delete('paged');window.location.href=url.toString();">
                                    <option value="meta_value" <?php selected($archive_orderby, 'meta_value'); ?>><?php esc_html_e('Upcoming', 'nexdirectory'); ?></option>
                                    <option value="date" <?php selected($archive_orderby, 'date'); ?>><?php esc_html_e('Newest Added', 'nexdirectory'); ?></option>
                                </select>
                            </div>
                            <div class="flex items-center gap-2">
                                <label for="nexdirectory-archive-cols-desktop" class="text-gray-500"><?php esc_html_e('Columns:', 'nexdirectory'); ?></label>
                                <select id="nexdirectory-archive-cols-desktop" class="nexdirectory-archive-columns-select bg-transparent font-bold text-gray-900 outline-none cursor-pointer">
                                    <option value="2" <?php selected($archive_cols, 2); ?>>2</option>
                                    <option value="3" <?php selected($archive_cols, 3); ?>>3</option>
                                    <option value="4" <?php selected($archive_cols, 4); ?>>4</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <?php if ($show_sidebar) : ?>
                    <button type="button" @click="filtersTrigger = $event.currentTarget; filtersSheetOpen = true; document.body.classList.add('nexdirectory-filter-dialog-open'); $nextTick(() => $refs.filtersClose && $refs.filtersClose.focus())" aria-controls="nexdirectory-archive-filter-dialog" :aria-expanded="filtersSheetOpen" class="nexdirectory-archive-filters-toggle lg:hidden w-full mb-6 flex items-center justify-center gap-2 bg-brand-500 border border-brand-500 rounded-xl px-4 py-3 text-sm font-semibold !text-white shadow-sm transition-all active:scale-[0.98]" style="color:#fff!important;-webkit-text-fill-color:#fff!important;background:var(--nexdirectory-primary)!important;border-color:var(--nexdirectory-primary)!important;">
                        <svg class="w-4 h-4 text-white" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h10m4 0h2M4 17h2m4 0h10M14 5v4M8 15v4"></path>
                        </svg>
                        <?php esc_html_e('Toggle Filters', 'nexdirectory'); ?>
                    </button>
                    <?php endif; ?>

                    <div id="nexdirectory-archive-results"
                         class="w-full"
                         data-nexdirectory-cols="<?php echo esc_attr((string) $archive_cols); ?>"
                         data-posts-per-page="<?php echo esc_attr((string) $posts_per_page); ?>"
                         data-organizer="<?php echo esc_attr((string) $organizer_id); ?>"
                         data-nexdirectory-recovery="<?php echo esc_attr((string) wp_json_encode($archive_recovery_config)); ?>"
                         role="region"
                         aria-label="<?php echo esc_attr((string) $archive_recovery_config['resultsLabel']); ?>"
                         aria-live="polite"
                         tabindex="-1">
                        
                        <?php 
                            // This outputs the legacy cards & pagination
                            echo wp_kses((string) $this->render_archive_results_markup($query, $paged, $filters, $organizer_id), NEXDIRECTORY_Escaping::allowed_html()); ?>
                    </div>
                </div>
            </section>

            <?php if ($show_sidebar) : ?>
            <div id="nexdirectory-archive-filter-dialog" x-cloak x-show="filtersSheetOpen" class="lg:hidden relative z-50" aria-labelledby="nexdirectory-archive-filter-title" role="dialog" aria-modal="true">
                <div x-show="filtersSheetOpen" x-transition.opacity @click="closeFiltersSheet()" class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm transition-opacity"></div>

                <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
                    <div class="flex min-h-full items-end justify-center text-center">
                        <form method="get" x-show="filtersSheetOpen" 
                             x-transition:enter="transform transition ease-out duration-300" 
                             x-transition:enter-start="translate-y-full" 
                             x-transition:enter-end="translate-y-0" 
                             x-transition:leave="transform transition ease-in duration-200" 
                             x-transition:leave-start="translate-y-0" 
                             x-transition:leave-end="translate-y-full" 
                             @click.away="closeFiltersSheet()"
                             class="nexdirectory-archive-filter-form relative w-full max-h-[90vh] bg-white rounded-t-3xl text-left shadow-xl overflow-hidden flex flex-col">
                            
                            <input type="hidden" name="paged" value="1">
                            <input type="hidden" name="organizer" value="<?php echo esc_attr((string) $organizer_id); ?>">
                            <input type="hidden" name="posts_per_page" value="<?php echo esc_attr((string) $posts_per_page); ?>">
                            <input type="hidden" name="nexdirectory_cols" class="nexdirectory-archive-cols-input" value="<?php echo esc_attr((string) $archive_cols); ?>">

                            <div class="bg-white px-4 py-4 border-b border-gray-100 sticky top-0 z-10 flex items-center justify-between">
                                <a href="<?php echo esc_url(get_permalink()); ?>" class="nexdirectory-archive-clear-btn text-sm font-semibold text-gray-500 hover:text-gray-900">Clear all</a>
                                <h3 id="nexdirectory-archive-filter-title" class="text-lg font-bold text-gray-900">Filters</h3>
                                <button type="button" x-ref="filtersClose" @click="closeFiltersSheet()" aria-label="<?php esc_attr_e('Close filters', 'nexdirectory'); ?>" class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>

                            <div class="overflow-y-auto p-5 space-y-6 pb-24">
                                
                                <div>
                                    <label class="block text-base font-bold text-gray-900 mb-3">Sort By</label>
                                    <div class="grid grid-cols-2 gap-3">
                                        <label class="cursor-pointer">
                                            <input type="radio" name="orderby" value="meta_value" class="peer sr-only" <?php checked($archive_orderby, 'meta_value'); ?>>
                                            <div class="py-3 border-2 border-gray-200 bg-white text-gray-600 rounded-xl font-semibold text-sm text-center peer-checked:border-brand-500 peer-checked:bg-brand-50 peer-checked:text-brand-600">Upcoming</div>
                                        </label>
                                        <label class="cursor-pointer">
                                            <input type="radio" name="orderby" value="date" class="peer sr-only" <?php checked($archive_orderby, 'date'); ?>>
                                            <div class="py-3 border-2 border-gray-200 bg-white text-gray-600 rounded-xl font-semibold text-sm text-center peer-checked:border-brand-500 peer-checked:bg-brand-50 peer-checked:text-brand-600">Newest Added</div>
                                        </label>
                                    </div>
                                </div>

                                <?php if ($show_search_filter) : ?>
                                    <div>
                                        <label for="nexdirectory-archive-mobile-search" class="block text-base font-bold text-gray-900 mb-3"><?php esc_html_e('Search Keywords', 'nexdirectory'); ?></label>
                                        <div class="relative">
                                            <svg class="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-gray-400" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <circle cx="11" cy="11" r="7" stroke-width="2"></circle>
                                                <path stroke-linecap="round" stroke-width="2" d="m20 20-3.5-3.5"></path>
                                            </svg>
                                            <input type="text" id="nexdirectory-archive-mobile-search" name="nexdirectory_search" value="<?php echo esc_attr($search); ?>" placeholder="<?php esc_attr_e('Design, Tech, etc.', 'nexdirectory'); ?>" class="w-full pl-11 pr-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl text-base outline-none focus:border-brand-500">
                                        </div>
                                    </div>
                                <?php endif; ?>

                                <div>
                                    <label for="nexdirectory-archive-mobile-city" class="block text-base font-bold text-gray-900 mb-3"><?php echo esc_html($filter_city_label); ?></label>
                                    <input type="text" id="nexdirectory-archive-mobile-city" name="city" value="<?php echo esc_attr((string) $city); ?>" placeholder="<?php esc_attr_e('Enter a city', 'nexdirectory'); ?>" autocomplete="address-level2" class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl text-base outline-none focus:border-brand-500">
                                </div>

                                <?php if ($show_type_filter) : ?>
                                    <div>
                                        <label for="nexdirectory-archive-mobile-type" class="block text-base font-bold text-gray-900 mb-3"><?php echo esc_html($type_label); ?></label>
                                        <select id="nexdirectory-archive-mobile-type" name="event_type" class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl text-base outline-none appearance-none cursor-pointer">
                                            <option value="">All Types</option>
                                            <?php foreach ((array) ($filter_options['event_type'] ?? []) as $option) : ?>
                                                <option value="<?php echo esc_attr((string) ($option['slug'] ?? '')); ?>" <?php selected($type, (string) ($option['slug'] ?? '')); ?>>
                                                    <?php echo esc_html((string) ($option['name'] ?? '')); ?>
                                                </option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                <?php endif; ?>

                                <?php if ($show_mode_filter) : ?>
                                    <div>
                                        <label class="block text-base font-bold text-gray-900 mb-3">Mode</label>
                                        <div class="flex flex-wrap gap-2">
                                            <label class="px-4 py-2 bg-gray-50 border border-gray-200 rounded-full text-sm font-medium flex items-center gap-2 cursor-pointer has-[:checked]:bg-brand-50 has-[:checked]:border-brand-500 has-[:checked]:text-brand-600">
                                                <input type="radio" name="event_mode" value="" class="sr-only" <?php checked($mode, ''); ?>> All
                                            </label>
                                            <?php foreach ((array) ($filter_options['event_mode'] ?? []) as $option) : ?>
                                                <label class="px-4 py-2 bg-gray-50 border border-gray-200 rounded-full text-sm font-medium flex items-center gap-2 cursor-pointer has-[:checked]:bg-brand-50 has-[:checked]:border-brand-500 has-[:checked]:text-brand-600">
                                                    <input type="radio" name="event_mode" value="<?php echo esc_attr((string) ($option['slug'] ?? '')); ?>" class="sr-only" <?php checked($mode, (string) ($option['slug'] ?? '')); ?>> <?php echo esc_html((string) ($option['name'] ?? '')); ?>
                                                </label>
                                            <?php endforeach; ?>
                                        </div>
                                    </div>
                                <?php endif; ?>

                                <?php if ($show_tag_filter) : ?>
                                    <div>
                                        <label for="nexdirectory-archive-mobile-tag" class="block text-base font-bold text-gray-900 mb-3"><?php echo esc_html($tag_label); ?></label>
                                        <select id="nexdirectory-archive-mobile-tag" name="event_tag" class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl text-base outline-none appearance-none cursor-pointer">
                                            <?php /* translators: %s: Placeholder value. */ ?>
                                            <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $tag_plural)); ?></option>
                                            <?php foreach ((array) ($filter_options['event_tag'] ?? []) as $option) : ?>
                                                <option value="<?php echo esc_attr((string) ($option['slug'] ?? '')); ?>" <?php selected($tag, (string) ($option['slug'] ?? '')); ?>>
                                                    <?php echo esc_html((string) ($option['name'] ?? '')); ?>
                                                </option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                <?php endif; ?>

                                <?php if ($show_price_filter) : ?>
                                    <div>
                                        <label for="nexdirectory-archive-mobile-price" class="block text-base font-bold text-gray-900 mb-3"><?php echo esc_html($filter_price_label); ?></label>
                                        <select id="nexdirectory-archive-mobile-price" name="event_price" class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl text-base outline-none appearance-none cursor-pointer">
                                            <option value=""><?php echo esc_html($filter_price_any_label); ?></option>
                                            <?php foreach ((array) ($filter_options['event_price'] ?? []) as $option) : ?>
                                                <option value="<?php echo esc_attr((string) ($option['slug'] ?? '')); ?>" <?php selected($price_range, (string) ($option['slug'] ?? '')); ?>>
                                                    <?php echo esc_html((string) ($option['name'] ?? '')); ?>
                                                </option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                <?php endif; ?>

                                <?php if ($show_date_filter) : ?>
                                    <div>
                                        <label for="nexdirectory-archive-mobile-date" class="block text-base font-bold text-gray-900 mb-3"><?php echo esc_html($filter_from_date_label); ?></label>
                                        <input type="date" id="nexdirectory-archive-mobile-date" name="date_from" value="<?php echo esc_attr($date_from); ?>" class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl text-base outline-none focus:border-brand-500">
                                    </div>
                                <?php endif; ?>

                                <?php if ($show_official_filter) : ?>
                                    <div>
                                        <label for="nexdirectory-archive-mobile-official" class="block text-base font-bold text-gray-900 mb-3"><?php echo esc_html($official_filter_label); ?></label>
                                        <select id="nexdirectory-archive-mobile-official" name="official" class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl text-base outline-none appearance-none cursor-pointer">
                                            <option value=""><?php esc_html_e('All', 'nexdirectory'); ?></option>
                                            <option value="1" <?php selected((string) $official, '1'); ?>><?php echo esc_html($official_option_label); ?></option>
                                            <option value="0" <?php selected((string) $official, '0'); ?>><?php echo esc_html($unofficial_option_label); ?></option>
                                        </select>
                                    </div>
                                <?php endif; ?>

                                <?php
                                $nexdirectory_checkin_controls = NEXDIRECTORY_Escaping::prepare_markup_for_wp_kses((string) $this->render_builder_checkin_filter_controls('archive', 'events-archive-mobile'));
                                echo wp_kses($nexdirectory_checkin_controls, NEXDIRECTORY_Escaping::allowed_html($nexdirectory_checkin_controls));
                                ?>
                            </div>

                            <div class="bg-white border-t border-gray-100 p-4 sticky bottom-0 z-10">
                                <button type="submit" class="w-full py-4 rounded-xl bg-brand-500 text-white font-bold text-base shadow-[0_4px_14px_0_rgba(var(--nexdirectory-primary-rgb),0.39)] hover:bg-brand-600 transition-colors">
                                    Show Results
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </main>
</div>

<?php $this->enqueue_local_script_asset('templates-frontend-events-archive-php-script-1', 'assets/generated/templates-frontend-events-archive-php-script-1.js'); ?>
