<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Templates use local variables supplied by the render context.
if (!defined('ABSPATH')) {
    exit;
}

// [PRESERVED DYNAMIC VARIABLES]
$ui_labels = isset($ui_labels) && is_array($ui_labels) ? $ui_labels : [];
$map_title = sanitize_text_field((string) ($ui_labels['map_title'] ?? __('Map View', 'nexdirectory')));
$map_description = sanitize_text_field((string) ($ui_labels['map_description'] ?? __('Explore events by location with live filters and search-this-area discovery.', 'nexdirectory')));
$map_kicker = sanitize_text_field((string) $this->get_event_hero_kicker_text());
if ($map_kicker === '') {
    $map_kicker = $this->get_white_label_brand_name();
}
$plural_label = sanitize_text_field((string) ($ui_labels['plural'] ?? __('Events', 'nexdirectory')));
$singular_label = sanitize_text_field((string) ($ui_labels['singular'] ?? __('Event', 'nexdirectory')));
$plural_lower = sanitize_text_field((string) ($ui_labels['plural_lower'] ?? strtolower($plural_label)));
$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_price_label = sanitize_text_field((string) ($ui_labels['filter_price_label'] ?? __('Price Range', 'nexdirectory')));
$filter_price_all_label = sanitize_text_field((string) ($ui_labels['filter_price_all_label'] ?? __('All Price Ranges', 'nexdirectory')));
$near_me_label = sanitize_text_field((string) ($ui_labels['map_near_me_label'] ?? __('Find Near Me', 'nexdirectory')));
$classification_labels = method_exists($this, 'get_classification_labels') ? (array) $this->get_classification_labels() : [];

$map_page_id = absint((int) get_queried_object_id());
$map_featured_hero = '';
if ($map_page_id > 0 && has_post_thumbnail($map_page_id)) {
    $map_featured_candidate = get_the_post_thumbnail_url($map_page_id, 'full');
    if (is_string($map_featured_candidate) && $map_featured_candidate !== '') {
        $map_featured_hero = esc_url($map_featured_candidate);
    }
}
$map_fallback_hero = esc_url((string) get_option('nexdirectory_style_fallback_hero_url', ''));
$map_banner_hero = $map_featured_hero !== '' ? $map_featured_hero : $map_fallback_hero;
$map_banner_has_image = $map_banner_hero !== '';
$hero_img_src = $map_banner_has_image ? $map_banner_hero : plugins_url('assets/images/placeholder-hero.svg', NEXDIRECTORY_PLUGIN_FILE);

$layout = sanitize_key((string) $layout);
if ($layout === 'below') {
    $layout = 'below-list';
} elseif ($layout === 'sidebar') {
    $layout = 'three-column';
}
$layout = in_array($layout, ['three-column', 'below-list', 'below-grid', 'below-grid-large', 'grid-no-map', 'grid-no-map-large'], true) ? $layout : 'three-column';
$density = in_array((string) $density, ['comfortable', 'compact'], true) ? (string) $density : 'comfortable';
$show_map = !in_array($layout, ['grid-no-map', 'grid-no-map-large'], true);
?>
<?php $this->enqueue_local_style_asset('templates-frontend-mappage-triplecolumn-php-style-1', 'assets/generated/templates-frontend-mappage-triplecolumn-php-style-1.css'); ?>

<div id="nexdirectory-map-triple-wrapper"
      data-nexdirectory-alpine-root="1"
      data-nexdirectory-map-template="MapPage-tripleColumn.php"
      data-nexdirectory-map-layout="<?php echo esc_attr($layout); ?>"
      data-nexdirectory-map-density="<?php echo esc_attr($density); ?>"
      class="bg-gray-50 text-gray-800 font-sans antialiased overflow-x-hidden h-[calc(100dvh-60px)] md:h-[calc(100dvh-64px)] flex flex-col"
      x-data="{ 
          isMobile: window.innerWidth < 1024,
          view: '<?php echo $show_map ? 'map' : 'list'; ?>',
          filtersOpen: false 
      }" 
      @resize.window="isMobile = window.innerWidth < 1024; if(!isMobile) filtersOpen = false"
      x-init="$watch('view', () => setTimeout(() => window.dispatchEvent(new Event('resize')), 100))">

    <?php echo wp_kses_post($this->render_notice()); ?>

    <div class="lg:hidden flex-none bg-white border-b border-gray-200 px-4 py-3 z-40 relative shrink-0">
        <div class="flex items-center justify-between gap-4">
            <div class="bg-gray-100 p-1 rounded-xl flex items-center shadow-inner flex-1">
                <?php if ($show_list) : ?>
                <button type="button" @click="view = 'list'" aria-label="<?php esc_attr_e('Show results as a list', 'nexdirectory'); ?>" :aria-pressed="view === 'list'" :class="view === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'" class="flex-1 py-1.5 rounded-lg text-sm font-semibold transition-all">
                    List
                </button>
                <?php endif; ?>
                <?php if ($show_map) : ?>
                <button type="button" @click="view = 'map'" aria-label="<?php esc_attr_e('Show results on the map', 'nexdirectory'); ?>" :aria-pressed="view === 'map'" :class="view === 'map' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'" class="flex-1 py-1.5 rounded-lg text-sm font-semibold transition-all">
                    Map
                </button>
                <?php endif; ?>
            </div>
            <button type="button" id="nexdirectory-map-filters-open" aria-label="<?php esc_attr_e('Open filters', 'nexdirectory'); ?>" :aria-expanded="filtersOpen" aria-controls="nexdirectory-map-sidebar-panel" @click="filtersOpen = true" class="p-2.5 bg-gray-50 hover:bg-gray-100 border border-gray-200 rounded-xl text-gray-700 transition-colors relative shrink-0">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
            </button>
        </div>
    </div>

    <main class="nexdirectory-map-content-row flex-1 flex w-full max-w-screen-2xl mx-auto overflow-hidden lg:overflow-visible relative" data-nexdirectory-map-layout="1" data-nexdirectory-mobile-filter-mode="<?php echo esc_attr($mobile_filter_mode); ?>" data-nexdirectory-map-max-events="<?php echo esc_attr((string) $max_events); ?>">
        
        <?php if ($show_sidebar) : ?>
        <div x-show="!isMobile || filtersOpen" data-nexdirectory-map-sidebar-shell="1" style="display: none;" class="nexdirectory-map-sticky-shell flex flex-col w-full lg:w-[320px] bg-white border-r border-gray-200 shrink-0 h-full lg:h-[calc(100vh-5rem)] lg:self-start lg:sticky lg:top-24 relative z-20"
             :class="isMobile ? 'absolute inset-0 z-[100] flex flex-col justify-end pointer-events-none' : ''">
            
            <div x-show="isMobile && filtersOpen" 
                 x-transition:enter="transition-opacity ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" 
                 x-transition:leave="transition-opacity ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" 
                 @click="filtersOpen = false" id="nexdirectory-map-sidebar-backdrop" class="absolute inset-0 bg-gray-900/60 backdrop-blur-sm pointer-events-auto lg:hidden"></div>

            <aside x-show="!isMobile || filtersOpen" class="h-full overflow-y-auto no-scrollbar"
                   x-transition:enter="transition transform ease-out duration-300" x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0" 
                   x-transition:leave="transition transform ease-in duration-200" x-transition:leave-start="translate-y-0" x-transition:leave-end="translate-y-full" 
                   :class="isMobile ? 'relative bg-white w-full rounded-t-3xl shadow-2xl flex flex-col max-h-[85dvh] pointer-events-auto mt-auto pb-safe' : ''"
                   id="nexdirectory-map-sidebar-panel">
                
                <div x-show="isMobile" class="w-full flex justify-center pt-3 pb-1" @click="filtersOpen = false">
                    <div class="w-12 h-1.5 bg-gray-300 rounded-full"></div>
                </div>

                <div class="px-6 py-4 flex items-center justify-between border-b border-gray-100">
                    <h2 class="text-xl font-bold text-gray-900 flex items-center gap-2">
                        <?php /* translators: %s: Placeholder value. */ ?>
                        <?php echo esc_html(sprintf(__('Filter %s', 'nexdirectory'), $plural_label)); ?>
                    </h2>
                    <button type="button" x-show="!isMobile" class="text-xs font-semibold text-gray-400 hover:text-brand-500 transition-colors uppercase tracking-wider" id="nexdirectory-map-reset-head"><?php esc_html_e('Reset', 'nexdirectory'); ?></button>
                    <button type="button" x-show="isMobile" id="nexdirectory-map-filters-close" @click="filtersOpen = false" aria-label="<?php esc_attr_e('Close filters', 'nexdirectory'); ?>" class="p-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-600 transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>

                <div class="p-6 space-y-5 overflow-y-auto no-scrollbar" :class="isMobile ? '' : 'flex-1'">
                    <?php if ($show_search) : ?>
                    <div class="relative group">
                        <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none transition-colors group-focus-within:text-brand-500">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                        </div>
                        <input id="nexdirectory-map-search" type="text" aria-label="<?php esc_attr_e('Search', 'nexdirectory'); ?>" placeholder="<?php esc_attr_e('Keywords...', 'nexdirectory'); ?>" class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all placeholder-gray-400 text-gray-800">
                    </div>
                    <?php endif; ?>

                    <?php if ($show_type) : ?>
                    <div>
                        <label for="nexdirectory-map-type" class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php echo esc_html($type_label); ?></label>
                        <select id="nexdirectory-map-type" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                            <?php /* translators: %s: Placeholder value. */ ?>
                            <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $type_plural)); ?></option>
                            <?php foreach (get_terms(['taxonomy' => $this::TAX_TYPE, 'hide_empty' => true]) as $term) : ?>
                                <option value="<?php echo esc_attr((string) $term->slug); ?>"><?php echo esc_html($term->name); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <?php endif; ?>

                    <?php if ($show_mode) : ?>
                    <div>
                        <label for="nexdirectory-map-mode" class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php echo esc_html($mode_label); ?></label>
                        <select id="nexdirectory-map-mode" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                            <?php /* translators: %s: Placeholder value. */ ?>
                            <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $mode_plural)); ?></option>
                            <?php foreach (get_terms(['taxonomy' => $this::TAX_MODE, 'hide_empty' => true]) as $term) : ?>
                                <option value="<?php echo esc_attr((string) $term->slug); ?>"><?php echo esc_html($term->name); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <?php endif; ?>

                    <?php if ($show_tag) : ?>
                    <div>
                        <label for="nexdirectory-map-tag" class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php echo esc_html($tag_label); ?></label>
                        <select id="nexdirectory-map-tag" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                            <?php /* translators: %s: Placeholder value. */ ?>
                            <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $tag_plural)); ?></option>
                            <?php foreach (get_terms(['taxonomy' => $this::TAX_TAG, 'hide_empty' => true]) as $term) : ?>
                                <option value="<?php echo esc_attr((string) $term->slug); ?>"><?php echo esc_html($term->name); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <?php endif; ?>

                    <?php if ($show_price) : ?>
                    <div>
                        <label for="nexdirectory-map-price" class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php echo esc_html($filter_price_label); ?></label>
                        <select id="nexdirectory-map-price" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                            <option value=""><?php echo esc_html($filter_price_all_label); ?></option>
                            <?php foreach (get_terms(['taxonomy' => $this::TAX_PRICE, 'hide_empty' => true]) as $term) : ?>
                                <option value="<?php echo esc_attr((string) $term->slug); ?>"><?php echo esc_html($term->name); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <?php endif; ?>

                    <?php if ($show_official) : ?>
                    <div>
                        <label for="nexdirectory-map-official" class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php esc_html_e('Classification', 'nexdirectory'); ?></label>
                        <select id="nexdirectory-map-official" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                            <?php /* translators: %s: Placeholder value. */ ?>
                            <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $plural_label)); ?></option>
                            <option value="1"><?php echo esc_html((string) ($classification_labels['official'] ?? __('Official', 'nexdirectory'))); ?></option>
                            <option value="0"><?php echo esc_html((string) ($classification_labels['unofficial'] ?? __('Unofficial', 'nexdirectory'))); ?></option>
                        </select>
                    </div>
                    <?php endif; ?>

                    <?php if ($show_date) : ?>
                    <div>
                        <label for="nexdirectory-map-date" class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php esc_html_e('Date', 'nexdirectory'); ?></label>
                        <input id="nexdirectory-map-date" type="date" aria-label="<?php esc_attr_e('Filter by date', 'nexdirectory'); ?>" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all">
                    </div>
                    <?php endif; ?>

                    <?php if ($show_distance) : ?>
                    <div>
                        <label for="nexdirectory-map-distance" class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php esc_html_e('Radius', 'nexdirectory'); ?></label>
                        <select id="nexdirectory-map-distance" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                            <option value=""><?php esc_html_e('Any Distance', 'nexdirectory'); ?></option>
                            <option value="10"><?php esc_html_e('Within 10 km', 'nexdirectory'); ?></option>
                            <option value="25"><?php esc_html_e('Within 25 km', 'nexdirectory'); ?></option>
                            <option value="50"><?php esc_html_e('Within 50 km', 'nexdirectory'); ?></option>
                            <option value="100"><?php esc_html_e('Within 100 km', 'nexdirectory'); ?></option>
                        </select>
                    </div>
                    <?php endif; ?>

                    <?php
                    $nexdirectory_checkin_controls = NEXDIRECTORY_Escaping::prepare_markup_for_wp_kses((string) $this->render_builder_checkin_filter_controls('map', 'events-map-triple-column'));
                    echo wp_kses($nexdirectory_checkin_controls, NEXDIRECTORY_Escaping::allowed_html($nexdirectory_checkin_controls));
                    ?>
                    
                    <div class="pt-4 space-y-3 border-t border-gray-100 hidden lg:block">
                        <button type="button" id="nexdirectory-map-apply" class="w-full flex items-center justify-center gap-2 py-3.5 px-4 bg-brand-500 hover:bg-brand-600 text-white font-semibold rounded-xl text-sm transition-colors shadow-sm">
                            <?php esc_html_e('Apply Filters', 'nexdirectory'); ?>
                        </button>
                        <div class="grid grid-cols-1 gap-3">
                            <button type="button" id="nexdirectory-map-use-location" class="w-full flex items-center justify-center gap-2 py-3.5 px-4 min-h-[52px] bg-gray-50 hover:bg-gray-100 border border-gray-200 text-gray-700 font-medium rounded-xl text-sm transition-colors group text-center">
                                <svg class="w-4 h-4 text-gray-400 group-hover:text-brand-500 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                                <span data-nexdirectory-map-location-label><?php echo esc_html($near_me_label); ?></span>
                            </button>
                            <?php if ($show_map) : ?>
                            <button type="button" id="nexdirectory-map-search-area" class="w-full flex items-center justify-center gap-2 py-3.5 px-4 min-h-[52px] bg-gray-50 hover:bg-gray-100 border border-gray-200 text-gray-700 font-medium rounded-xl text-sm transition-colors group text-center">
                                <svg class="w-4 h-4 text-gray-400 group-hover:text-brand-500 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                                <span><?php esc_html_e('Search This Area', 'nexdirectory'); ?></span>
                            </button>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                
                <div x-show="isMobile" class="p-6 border-t border-gray-100 bg-white shadow-[0_-4px_6px_-1px_rgb(0,0,0,0.05)] pb-8">
                    <button type="button" @click="filtersOpen = false" id="nexdirectory-map-filters-apply" class="w-full py-4 bg-brand-500 active:bg-brand-600 text-white font-semibold rounded-xl shadow-md transition-colors text-lg tracking-wide">
                        <?php esc_html_e('Apply & View Results', 'nexdirectory'); ?>
                    </button>
                </div>
            </aside>
        </div>
        <?php endif; ?>

        <?php if ($show_list) : ?>
        <section x-show="!isMobile || view === 'list'"
                 class="w-full lg:w-[500px] xl:w-[600px] flex-shrink-0 flex flex-col h-full bg-gray-50 z-20 absolute lg:relative inset-0"
                 x-transition:enter="transition-transform ease-out duration-300" x-transition:enter-start="-translate-x-full lg:translate-x-0" x-transition:enter-end="translate-x-0"
                 x-transition:leave="transition-transform ease-in duration-200" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full lg:translate-x-0">
            
            <p class="sr-only" id="nexdirectory-map-help"><?php esc_html_e('Map keyboard controls: arrow keys pan, plus/minus zoom, Home resets view.', 'nexdirectory'); ?></p>

            <div class="h-full overflow-y-auto no-scrollbar relative flex flex-col">
                
                <div class="hidden lg:block relative shrink-0 p-6 pb-0">
                    <div class="relative rounded-2xl overflow-hidden shadow-sm group h-[200px]">
                        <img src="<?php echo esc_url($hero_img_src); ?>" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" <?php echo $map_banner_has_image ? ' data-nexdirectory-hero-parallax="1"' : ''; ?> alt="<?php echo esc_attr($map_title); ?>">
                        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/90 via-gray-900/40 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 p-6">
                            <h1 class="text-3xl font-bold text-white mb-2 tracking-tight"><?php echo esc_html($map_title); ?></h1>
                            <p class="text-gray-200 text-sm"><?php echo esc_html($map_description); ?></p>
                        </div>
                    </div>
                </div>

                <div class="sticky top-0 bg-gray-50/95 backdrop-blur z-30 px-4 lg:px-6 py-4 flex items-center justify-between border-b border-gray-200">
	                    <h2 class="text-lg font-bold text-gray-900"
	                        id="nexdirectory-map-results-count"
	                        data-singular="<?php echo esc_attr($singular_label); ?>"
	                        data-plural="<?php echo esc_attr($plural_label); ?>"
	                        aria-live="polite">
	                        <?php /* translators: %s: Plural directory content label, such as events or listings. */ ?>
	                        <?php echo esc_html(sprintf(__('0 %s found', 'nexdirectory'), $plural_lower)); ?>
	                    </h2>
                    <select id="nexdirectory-map-sort" aria-label="<?php esc_attr_e('Sort Results', 'nexdirectory'); ?>" class="px-3 py-1.5 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-brand-500/20 shadow-sm cursor-pointer">
                        <option value="nearest"><?php esc_html_e('Nearest', 'nexdirectory'); ?></option>
                        <option value="date_desc"><?php esc_html_e('Newest', 'nexdirectory'); ?></option>
                        <option value="title_asc"><?php esc_html_e('Name (A-Z)', 'nexdirectory'); ?></option>
                    </select>
                </div>

                <div class="p-4 lg:p-6 pb-24
                    [&_[data-map-results-list]]:flex [&_[data-map-results-list]]:flex-col [&_[data-map-results-list]]:gap-4
                    
                    [&_[data-map-results-list]>article]:bg-white [&_[data-map-results-list]>article]:rounded-2xl [&_[data-map-results-list]>article]:border [&_[data-map-results-list]>article]:border-gray-200 [&_[data-map-results-list]>article]:overflow-hidden [&_[data-map-results-list]>article]:transition-all [&_[data-map-results-list]>article]:duration-300 hover:[&_[data-map-results-list]>article]:shadow-lg hover:[&_[data-map-results-list]>article]:border-brand-300 [&_[data-map-results-list]>article]:group [&_[data-map-results-list]>article]:flex [&_[data-map-results-list]>article]:flex-col lg:[&_[data-map-results-list]>article]:flex-row [&_[data-map-results-list]>article]:shadow-sm
                    [&_[data-map-results-list]>div]:bg-white [&_[data-map-results-list]>div]:rounded-2xl [&_[data-map-results-list]>div]:border [&_[data-map-results-list]>div]:border-gray-200 [&_[data-map-results-list]>div]:overflow-hidden [&_[data-map-results-list]>div]:transition-all [&_[data-map-results-list]>div]:duration-300 hover:[&_[data-map-results-list]>div]:shadow-lg hover:[&_[data-map-results-list]>div]:border-brand-300 [&_[data-map-results-list]>div]:group [&_[data-map-results-list]>div]:flex [&_[data-map-results-list]>div]:flex-col lg:[&_[data-map-results-list]>div]:flex-row [&_[data-map-results-list]>div]:shadow-sm
                    
                    [&_.nexdirectory-card-img-wrap]:relative [&_.nexdirectory-card-img-wrap]:h-48 lg:[&_.nexdirectory-card-img-wrap]:h-auto lg:[&_.nexdirectory-card-img-wrap]:w-[42%] [&_.nexdirectory-card-img-wrap]:overflow-hidden [&_.nexdirectory-card-img-wrap]:shrink-0 [&_.nexdirectory-card-img-wrap]:bg-gray-100
                    [&_img.nexdirectory-card-img]:w-full [&_img.nexdirectory-card-img]:h-full [&_img.nexdirectory-card-img]:object-cover [&_img.nexdirectory-card-img]:transition-transform [&_img.nexdirectory-card-img]:duration-700
                    
                    [&_.nexdirectory-card-body]:p-5 [&_.nexdirectory-card-body]:flex [&_.nexdirectory-card-body]:flex-col [&_.nexdirectory-card-body]:grow [&_.nexdirectory-card-body]:justify-center [&_.nexdirectory-card-body]:min-w-0
                    [&_.nexdirectory-event-content]:p-5 [&_.nexdirectory-event-content]:flex [&_.nexdirectory-event-content]:flex-col [&_.nexdirectory-event-content]:grow [&_.nexdirectory-event-content]:justify-center [&_.nexdirectory-event-content]:min-w-0
                    
                    [&_.nexdirectory-card-body_h3]:font-bold [&_.nexdirectory-card-body_h3]:text-gray-900 [&_.nexdirectory-card-body_h3]:text-lg [&_.nexdirectory-card-body_h3]:leading-tight [&_.nexdirectory-card-body_h3]:mb-2 [&_.nexdirectory-card-body_h3]:line-clamp-2 [&_.nexdirectory-card-body_h3]:transition-colors
                    [&_.nexdirectory-card-body_p]:text-sm [&_.nexdirectory-card-body_p]:text-gray-500 [&_.nexdirectory-card-body_p]:flex [&_.nexdirectory-card-body_p]:items-center [&_.nexdirectory-card-body_p]:mb-1.5 last:[&_.nexdirectory-card-body_p]:mb-4
                    
                    [&_.nexdirectory-card-footer]:mt-auto [&_.nexdirectory-card-footer]:w-full [&_.nexdirectory-button-wrap]:mt-auto [&_.nexdirectory-button-wrap]:w-full
                    
                    [&_a.nexdirectory-btn]:inline-flex [&_a.nexdirectory-btn]:items-center [&_a.nexdirectory-btn]:justify-center [&_a.nexdirectory-btn]:py-2 [&_a.nexdirectory-btn]:px-4 [&_a.nexdirectory-btn]:bg-gray-50 hover:[&_a.nexdirectory-btn]:bg-brand-50 [&_a.nexdirectory-btn]:border [&_a.nexdirectory-btn]:border-gray-200 hover:[&_a.nexdirectory-btn]:border-brand-200 [&_a.nexdirectory-btn]:text-gray-800 hover:[&_a.nexdirectory-btn]:text-brand-700 [&_a.nexdirectory-btn]:font-medium [&_a.nexdirectory-btn]:rounded-xl [&_a.nexdirectory-btn]:transition-colors [&_a.nexdirectory-btn]:text-sm [&_a.nexdirectory-btn]:w-full
                ">
                    <div id="map-results-list" data-map-results-list class="w-full" aria-live="polite"></div>
                </div>
            </div>
        </section>
        <?php endif; ?>

        <?php if ($show_map) : ?>
        <section x-show="!isMobile || view === 'map'" class="flex-1 relative h-full w-full bg-gray-100 z-10" data-nexdirectory-map-panel="1">
            <?php /* translators: %s: Placeholder value. */ ?>
            <div id="nexdirectory-events-map" role="region" tabindex="0" aria-label="<?php echo esc_attr(sprintf(__('%s locations map', 'nexdirectory'), $plural_label)); ?>" aria-describedby="nexdirectory-map-help" class="absolute inset-0 z-0"></div>

            <div x-show="isMobile" 
                 x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="translate-y-12 opacity-0" x-transition:enter-end="translate-y-0 opacity-100"
                 x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="translate-y-0 opacity-100" x-transition:leave-end="translate-y-12 opacity-0"
                 style="display: none;" 
                 class="absolute bottom-6 left-0 right-0 z-20 pointer-events-none">
                
                <div class="flex overflow-x-auto snap-x snap-mandatory gap-4 px-4 pb-2 no-scrollbar pointer-events-auto" id="nexdirectory-mobile-slider-container">
                    </div>
            </div>
        </section>
        <?php endif; ?>

    </main>

</div>
