<template>
    <div class="page" data-name="discover">


        <!-- Top Navbar -->
        <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
                <div class="left">
                    <a href="#" class="link icon-only panel-open" data-panel="left">
                        <i class="icon f7-icons">bars</i>
                    </a>
                </div>
                <div class="middle">
                    <div class="header-logo"><img src="assets/img/logo-dark.png" /></div>
                </div>
                <div class="right">
                    
                    <a href="/notifications/" class="link icon-only">
                        <div class="notification-count"></div>
                        <i class="icon f7-icons">bell</i>
                    </a>
                </div>
            </div>
        </div>

        <!-- Page content-->
        <div class="page-content discover-page infinite-scroll-content ptr-content ptr-watch-scrollable"
            data-ptr-distance="130" data-ptr-mousewheel="true">
            <div class="ptr-preloader">
                <div class="preloader"></div>
                <div class="ptr-arrow"></div>
            </div>

            <div class="discovery-wrap">
                <form class="searchbar">
                    <div class="searchbar-inner">
                        <div class="searchbar-input-wrap">
                            <input type="search" placeholder="Search" class="discover-search" />
                            <i class="searchbar-icon"></i>
                            <!-- <span class="input-clear-button"></span> -->
                        </div>
                        <span class="searchbar-disable-button if-not-aurora">Cancel</span>
                    </div>
                </form>

                <div class="tabbar-nav pt-1">
                    <ul>
                        <li><a href="#featured" class="tab-link tab-link-active" data-id="featured">Featured</a></li>
                        <li><a href="#events" class="tab-link" data-id="events">Events</a></li>
                        <li><a href="#venues" class="tab-link" data-id="venues">Venues</a></li>
                        <li><a href="#users_vehicles" class="tab-link" data-id="users-vehicles">Users & Vehicles</a>
                        </li>
                    </ul>
                </div>

                <div class="container mt-15 mb-15">
                    <div class="tabs">
                        <div class="tab tab-active" id="featured">
                            <div class="featured-section">
                                <swiper-container slides-per-view="1" loop="true">
                                    <swiper-slide>
                                        <div class="featured-item">
                                            <div class="featured-img"
                                                style="background-image:url(\'https://www.carevents.com/uk/wp-content/uploads/sites/3/2023/12/3d7fe3f3-a748-4e98-b366-bc93bb51e3ed-1024x576.jpg\')">
                                            </div>
                                            <div class="featured-content">
                                                <h2>Kwik Fit British Touring Car Championship – Brands Hatch</h2>
                                                <p>5th-6th Oct 24</p>
                                                <a href="/discover-view-event/91937" class="btn  btn-primary ">See
                                                    More</a>
                                            </div>
                                        </div>
                                    </swiper-slide>
                                </swiper-container>
                            </div>

                            <div class="trending-section">
                                <h2 class="section-title mt-3 mb-2">Trending Events</h2>
                                <swiper-container class="event-listing" slides-per-view="2" loop="true"
                                    id="trending-events">
                                    <div class="infinite-scroll-preloader">
                                        <div class="preloader"></div>
                                    </div>
                                </swiper-container>
                            </div>

                            <div class="trending-section">
                                <h2 class="section-title mt-3 mb-2">Trending Venues</h2>
                                <swiper-container class="event-listing" slides-per-view="2" loop="true"
                                    id="trending-venues">
                                    <div class="infinite-scroll-preloader">
                                        <div class="preloader"></div>
                                    </div>
                                </swiper-container>
                            </div>
                        </div>

                        <div class="tab" id="events">
                            <div class="filter-bar mb-2">
                                <div class="filter-item popup-open" data-popup=".filter-bydate-popup">
                                    <span>Date</span>
                                    <i class="icon f7-icons">chevron_down</i>
                                </div>
                                <div class="filter-item popup-open" data-popup=".filter-bycategory-popup">
                                    <span>Category </span>
                                    <i class="icon f7-icons">chevron_down</i>
                                </div>
                                <div class="filter-item popup-open" data-popup=".filter-bylocation-popup">
                                    <span>Location </span>
                                    <i class="icon f7-icons">chevron_down</i>
                                </div>
                            </div>

                            <div class="trending-section">
                                <div class="grid grid-cols-2 event-listing" id="filtered-events-tab">
                                    <!-- content populates here -->
                                </div>
                            </div>

                            <br />

                            <div class="infinite-scroll-preloader events-tab">
                                <div class="preloader"></div>
                            </div>
                        </div>

                        <div class="tab" id="venues">
                            <div class="filter-bar mb-2">
                                <div class="filter-item popup-open" data-popup=".filter-bylocation-popup">
                                    <span>Location </span>
                                    <i class="icon f7-icons">chevron_down</i>
                                </div>
                            </div>
                            <div class="trending-section">
                                <div class="grid grid-cols-2 event-listing" id="filtered-venues-tab">

                                </div>
                            </div>

                            <br />
                            <div class="infinite-scroll-preloader venues-tab">
                                <div class="preloader"></div>
                            </div>
                        </div>

                        <div class="tab" id="users_vehicles">
                            <div class="list list-outline-ios list-strong-ios list-dividers-ios mt-2">
                                <ul id="users-vehicles-tab">

                                </ul>
                                <br />
                                <div class="infinite-scroll-preloader users-tab">
                                    <div class="preloader"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filter - Date - Slider -->
            <div class="popup filter-bydate-popup three-quarter-popup">
                <div class="view view-init tab" data-name="filter-bydate" data-url="/discover/">
                    <div class="page">
                        <div class="navbar">
                            <div class="navbar-inner">
                                <div class="title">Filter by Date</div>
                                <div class="right">
                                    <!-- Link to close popup -->
                                    <a class="link popup-close"><i class="icon f7-icons">xmark</i></a>
                                </div>
                            </div>
                        </div>
                        <div class="page-content">

                            <div class="block-title">Quick Options</div>
                            <div class="list" id="date-filters">
                                <ul>
                                    <li>
                                        <label class="item-checkbox item-content">
                                            <input type="checkbox" name="anytime" value="anytime" checked />
                                            <i class="icon icon-checkbox"></i>
                                            <div class="item-inner">
                                                <div class="item-title">Anytime</div>
                                            </div>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="item-checkbox item-content">
                                            <input type="checkbox" name="today" value="today" />
                                            <i class="icon icon-checkbox"></i>
                                            <div class="item-inner">
                                                <div class="item-title">Today</div>
                                            </div>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="item-checkbox item-content">
                                            <input type="checkbox" name="tomorrow" value="tomorrow" />
                                            <i class="icon icon-checkbox"></i>
                                            <div class="item-inner">
                                                <div class="item-title">Tomorrow</div>
                                            </div>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="item-checkbox item-content">
                                            <input type="checkbox" name="this_weekend" value="this-weekend" />
                                            <i class="icon icon-checkbox"></i>
                                            <div class="item-inner">
                                                <div class="item-title">This Weekend</div>
                                            </div>
                                        </label>
                                    </li>
                                </ul>
                            </div>

                            <div class="block-title">Select Date Range</div>
                            <div class="list">
                                <ul>
                                    <li>
                                        <div class="item-content item-input">
                                            <div class="item-inner">
                                                <div class="item-title item-label">Owned From</div>
                                                <div class="item-input-wrap">
                                                    <input type="text" placeholder="Select date" readonly="readonly"
                                                        id="date_from" name="date_from" />
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="item-content item-input">
                                            <div class="item-inner">
                                                <div class="item-title item-label">Owned To</div>
                                                <div class="item-input-wrap">
                                                    <input type="text" placeholder="Select date" readonly="readonly"
                                                        id="date_to" name="date_to" />
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <div class="popup-lower-button">
                                <button class="button button-large button-fill margin-bottom apply-filters">Apply
                                    Filters</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- * Filter - Date - Slider -->

            <!-- Filter - Category - Slider -->
            <div class="popup filter-bycategory-popup three-quarter-popup">
                <div class="view view-init tab" data-name="filter-bycategory" data-url="/discover/">
                    <div class="page">
                        <div class="navbar">
                            <div class="navbar-inner">
                                <div class="title">Filter by Category</div>
                                <div class="right">
                                    <!-- Link to close popup -->
                                    <a class="link popup-close"><i class="icon f7-icons">xmark</i></a>
                                </div>
                            </div>
                        </div>
                        <div class="page-content">
                            <form class="list mt-2" id="category-filters">
                                <ul>
                                    <li>
                                        <label class="item-checkbox item-content">
                                            <input type="checkbox" name="all" value="0" checked />
                                            <i class="icon icon-checkbox"></i>
                                            <div class="item-inner">
                                                <div class="item-title">All</div>
                                            </div>
                                        </label>
                                    </li>
                                </ul>
                            </form>
                            <div class="popup-lower-button">
                                <button class="button button-large button-fill margin-bottom apply-filters">Apply
                                    Filters</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- * Filter - Category - Slider -->

            <!-- Filter - Location - Slider -->
            <div class="popup filter-bylocation-popup three-quarter-popup">
                <div class="view view-init tab" data-name="filter-bylocation" data-url="/discover/">
                    <div class="page">
                        <div class="navbar">
                            <div class="navbar-inner">
                                <div class="title">Filter by Location</div>
                                <div class="right">
                                    <!-- Link to close popup -->
                                    <a class="link popup-close"><i class="icon f7-icons">xmark</i></a>
                                </div>
                            </div>
                        </div>
                        <div class="page-content">
                            <div class="block location-field">
                                <p>Location</p>
                                <input type="text" placeholder="Enter Location" id="autocomplete" />
                                <input type="hidden" id="lat" />
                                <input type="hidden" id="lng" />
                            </div>

                            <div class="list mt2" id="location-filters">
                                <ul>
                                    <li>
                                        <label class="item-radio item-radio-icon-start item-content">
                                            <input type="radio" name="location" value="national" checked />
                                            <i class="icon icon-radio"></i>
                                            <div class="item-inner">
                                                <div class="item-title">National</div>
                                            </div>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="item-radio item-radio-icon-start item-content">
                                            <input type="radio" name="location" value="near-me" />
                                            <i class="icon icon-radio"></i>
                                            <div class="item-inner">
                                                <div class="item-title">Nearby</div>
                                            </div>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="item-radio item-radio-icon-start item-content">
                                            <input type="radio" name="location" value="25-miles" />
                                            <i class="icon icon-radio"></i>
                                            <div class="item-inner">
                                                <div class="item-title">25 Miles</div>
                                            </div>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="item-radio item-radio-icon-start item-content">
                                            <input type="radio" name="location" value="50-miles" />
                                            <i class="icon icon-radio"></i>
                                            <div class="item-inner">
                                                <div class="item-title">50 Miles</div>
                                            </div>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="item-radio item-radio-icon-start item-content">
                                            <input type="radio" name="location" value="100-miles" />
                                            <i class="icon icon-radio"></i>
                                            <div class="item-inner">
                                                <div class="item-title">100 Miles</div>
                                            </div>
                                        </label>
                                    </li>


                                </ul>
                            </div>

                            <div class="popup-lower-button">
                                <button class="button button-large button-fill margin-bottom apply-filters">Apply
                                    Filters</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- * Filter - Location - Slider -->
        </div>
    </div>
</template>

Array
(
    [div] => Array
        (
            [class] => Array
                (
                    [0] => page
                    [1] => navbar
                    [2] => navbar-bg
                    [3] => navbar-inner
                    [4] => left
                    [5] => middle
                    [6] => header-logo
                    [7] => right
                    [8] => notification-count
                    [9] => page-content discover-page infinite-scroll-content ptr-content ptr-watch-scrollable
                    [10] => ptr-preloader
                    [11] => preloader
                    [12] => ptr-arrow
                    [13] => discovery-wrap
                    [14] => searchbar-inner
                    [15] => searchbar-input-wrap
                    [16] => tabbar-nav pt-1
                    [17] => container mt-15 mb-15
                    [18] => tabs
                    [19] => tab tab-active
                    [20] => featured-section
                    [21] => featured-item
                    [22] => featured-img
                    [23] => featured-content
                    [24] => trending-section
                    [25] => infinite-scroll-preloader
                    [26] => preloader
                    [27] => trending-section
                    [28] => infinite-scroll-preloader
                    [29] => preloader
                    [30] => tab
                    [31] => filter-bar mb-2
                    [32] => filter-item popup-open
                    [33] => filter-item popup-open
                    [34] => filter-item popup-open
                    [35] => trending-section
                    [36] => grid grid-cols-2 event-listing
                    [37] => infinite-scroll-preloader events-tab
                    [38] => preloader
                    [39] => tab
                    [40] => filter-bar mb-2
                    [41] => filter-item popup-open
                    [42] => trending-section
                    [43] => grid grid-cols-2 event-listing
                    [44] => infinite-scroll-preloader venues-tab
                    [45] => preloader
                    [46] => tab
                    [47] => list list-outline-ios list-strong-ios list-dividers-ios mt-2
                    [48] => infinite-scroll-preloader users-tab
                    [49] => preloader
                    [50] => popup filter-bydate-popup three-quarter-popup
                    [51] => view view-init tab
                    [52] => page
                    [53] => navbar
                    [54] => navbar-inner
                    [55] => title
                    [56] => right
                    [57] => page-content
                    [58] => block-title
                    [59] => list
                    [60] => item-inner
                    [61] => item-title
                    [62] => item-inner
                    [63] => item-title
                    [64] => item-inner
                    [65] => item-title
                    [66] => item-inner
                    [67] => item-title
                    [68] => block-title
                    [69] => list
                    [70] => item-content item-input
                    [71] => item-inner
                    [72] => item-title item-label
                    [73] => item-input-wrap
                    [74] => item-content item-input
                    [75] => item-inner
                    [76] => item-title item-label
                    [77] => item-input-wrap
                    [78] => popup-lower-button
                    [79] => popup filter-bycategory-popup three-quarter-popup
                    [80] => view view-init tab
                    [81] => page
                    [82] => navbar
                    [83] => navbar-inner
                    [84] => title
                    [85] => right
                    [86] => page-content
                    [87] => item-inner
                    [88] => item-title
                    [89] => popup-lower-button
                    [90] => popup filter-bylocation-popup three-quarter-popup
                    [91] => view view-init tab
                    [92] => page
                    [93] => navbar
                    [94] => navbar-inner
                    [95] => title
                    [96] => right
                    [97] => page-content
                    [98] => block location-field
                    [99] => list mt2
                    [100] => item-inner
                    [101] => item-title
                    [102] => item-inner
                    [103] => item-title
                    [104] => item-inner
                    [105] => item-title
                    [106] => item-inner
                    [107] => item-title
                    [108] => item-inner
                    [109] => item-title
                    [110] => popup-lower-button
                )

            [data-name] => Array
                (
                    [0] => discover
                    [1] => filter-bydate
                    [2] => filter-bycategory
                    [3] => filter-bylocation
                )

            [data-ptr-distance] => Array
                (
                    [0] => 130
                )

            [data-ptr-mousewheel] => Array
                (
                    [0] => true
                )

            [id] => Array
                (
                    [0] => featured
                    [1] => events
                    [2] => filtered-events-tab
                    [3] => venues
                    [4] => filtered-venues-tab
                    [5] => users_vehicles
                    [6] => date-filters
                    [7] => location-filters
                )

            [style] => Array
                (
                    [0] => background-image:url(\'https://www.carevents.com/uk/wp-content/uploads/sites/3/2023/12/3d7fe3f3-a748-4e98-b366-bc93bb51e3ed-1024x576.jpg\')
                )

            [data-popup] => Array
                (
                    [0] => .filter-bydate-popup
                    [1] => .filter-bycategory-popup
                    [2] => .filter-bylocation-popup
                    [3] => .filter-bylocation-popup
                )

            [data-url] => Array
                (
                    [0] => /discover/
                    [1] => /discover/
                    [2] => /discover/
                )

        )

    [a] => Array
        (
            [href] => Array
                (
                    [0] => #
                    [1] => /notifications/
                    [2] => #featured
                    [3] => #events
                    [4] => #venues
                    [5] => #users_vehicles
                    [6] => /discover-view-event/91937
                )

            [class] => Array
                (
                    [0] => link icon-only panel-open
                    [1] => link icon-only
                    [2] => tab-link tab-link-active
                    [3] => tab-link
                    [4] => tab-link
                    [5] => tab-link
                    [6] => btn  btn-primary
                    [7] => link popup-close
                    [8] => link popup-close
                    [9] => link popup-close
                )

            [data-panel] => Array
                (
                    [0] => left
                )

            [data-id] => Array
                (
                    [0] => featured
                    [1] => events
                    [2] => venues
                    [3] => users-vehicles
                )

        )

    [form] => Array
        (
            [class] => Array
                (
                    [0] => searchbar
                    [1] => list mt-2
                )

            [id] => Array
                (
                    [0] => category-filters
                )

        )

    [input] => Array
        (
            [type] => Array
                (
                    [0] => search
                    [1] => checkbox
                    [2] => checkbox
                    [3] => checkbox
                    [4] => checkbox
                    [5] => text
                    [6] => text
                    [7] => checkbox
                    [8] => text
                    [9] => hidden
                    [10] => hidden
                    [11] => radio
                    [12] => radio
                    [13] => radio
                    [14] => radio
                    [15] => radio
                )

            [placeholder] => Array
                (
                    [0] => Search
                    [1] => Select date
                    [2] => Select date
                    [3] => Enter Location
                )

            [class] => Array
                (
                    [0] => discover-search
                )

            [name] => Array
                (
                    [0] => anytime
                    [1] => today
                    [2] => tomorrow
                    [3] => this_weekend
                    [4] => date_from
                    [5] => date_to
                    [6] => all
                    [7] => location
                    [8] => location
                    [9] => location
                    [10] => location
                    [11] => location
                )

            [value] => Array
                (
                    [0] => anytime
                    [1] => today
                    [2] => tomorrow
                    [3] => this-weekend
                    [4] => 0
                    [5] => national
                    [6] => near-me
                    [7] => 25-miles
                    [8] => 50-miles
                    [9] => 100-miles
                )

            [checked] => Array
                (
                    [0] => 1
                    [1] => 1
                    [2] => 1
                )

            [readonly] => Array
                (
                    [0] => readonly
                    [1] => readonly
                )

            [id] => Array
                (
                    [0] => date_from
                    [1] => date_to
                    [2] => autocomplete
                    [3] => lat
                    [4] => lng
                )

        )

    [button] => Array
        (
            [class] => Array
                (
                    [0] => button button-large button-fill margin-bottom apply-filters
                    [1] => button button-large button-fill margin-bottom apply-filters
                    [2] => button button-large button-fill margin-bottom apply-filters
                )

        )

)