@extends('eventmie::layouts.app')

{{-- Page title --}}
@section('title')
    @lang('eventmie-pro::em.events')
@endsection

@section('content')
    <main>
        @if ($extra['featured_events']->isNotEmpty())
            <div class="mt-8">
                <event-slider 
                    :banners="{{ json_encode($extra['featured_events'], JSON_HEX_APOS) }}"
                    :date_format="{{ json_encode(
                        [
                            'vue_date_format' => format_js_date(),
                            'vue_time_format' => format_js_time(),
                        ],
                        JSON_HEX_APOS,
                    ) }}"
                    :currency="{{ json_encode($extra['currency'], JSON_HEX_APOS) }}"
                >
                </event-slider>
            </div>
        @else
            <div class="mt-8"></div>
        @endif
        
        <div class="lgx-page-wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        @component('eventmie::skeleton.event') @endcomponent
                    </div>
                </div>
            </div>
            <router-view
                :date_format="{{ json_encode(
                    [
                        'vue_date_format' => format_js_date(),
                        'vue_time_format' => format_js_time(),
                    ],
                    JSON_HEX_APOS,
                ) }}">
            </router-view>
        </div>
    </main>
@endsection

@section('javascript')

    <script>
        var path = {!! json_encode($path, JSON_HEX_TAG) !!};
        var events_slider = false;
        var venue_path = {!! json_encode($extra['venue_path'], JSON_HEX_TAG) !!};
        var venue_id = {!! json_encode($extra['venue_id']) !!}
        console.log(venue_path, 'venue_path', venue_id);
    </script>
    
    @Vite('resources/js/vendor/eventmie-pro/events_listing/index.js')
@stop