@push('header')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
@endpush
@push('footer')
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    @if ($page->longitude && $page->latitude)
        <script>
            function initMap(){
                var map = L.map('map').setView([{{$page->longitude}}, {{$page->latitude}}], 13);
                map.scrollWheelZoom.disable();
                var marker = new L.Marker([{{$page->longitude}}, {{$page->latitude}}]);
                marker.addTo(map);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { subdomains: ['a', 'b', 'c'] }).addTo(map)
            }

            Livewire.on('tabChanged', (tab) => {
                if (tab === 'venue') {
                    initMap();
                }
            });

            initMap();

        </script>
    @endif
@endpush
<div id="layout-{{ $component['id'] }}">
    <x-content.common.preview-component-identifier :component="$component"/>
    <div class="container lg:max-w-screen-lg mx-auto bg-white">
        <div class="p-4 pt-8 pb-8">
            <h2 class="font-sans uppercase text-xs mb-2 border-l-8 border-techcapital-red pl-2 text-techcapital-gray-dark flex items-center">The Tech Capital</h2>
            <h2 class="font-altgothic uppercase text-3xl text-techcapital-gray-dark mb-8">Event Location</h2>
            <ul class="flex flex-col lg:flex-row mb-4 lg:border-b-4 lg:border-techcapital-red">
                @if (isset($component['venue']) && $page->venue)
                    <li class="mr-2 px-4 py-2 rounded-t-sm @if ($selected === 'venue') bg-techcapital-red text-white @else bg-techcapital-gray @endif"><button wire:click="changeTab('venue')">Venue</button></li>
                @endif
                @if (isset($component['travel']) && $page->travel)
                    <li class="mr-2 px-4 py-2 rounded-t-sm @if ($selected === 'travel') bg-techcapital-red text-white @else bg-techcapital-gray @endif"><button wire:click="changeTab('travel')">Travel Information</button></li>
                @endif
                @if (isset($component['accommodation']) && $page->accommodation)
                    <li class="mr-2 px-4 py-2 rounded-t-sm @if ($selected === 'accommodation') bg-techcapital-red text-white @else bg-techcapital-gray @endif"><button wire:click="changeTab('accommodation')">Accommodation</button></li>
                @endif
                @if (isset($component['things_to_do']) && $page->things_to_do)
                    <li class="mr-2 px-4 py-2 rounded-t-sm @if ($selected === 'things-to-do') bg-techcapital-red text-white @else bg-techcapital-gray @endif"><button wire:click="changeTab('things-to-do')">Things to Do</button></li>
                @endif
                @if ($page->restrictions)
                    <li class="mr-2 px-4 py-2 rounded-t-sm @if ($selected === 'restrictions') bg-techcapital-red text-white @else bg-techcapital-gray @endif"><button wire:click="changeTab('restrictions')">Entering {{$page->country}}</button></li>
                @endif
            </ul>
            <div>
                @if (isset($component['venue']) && $selected ===  'venue' && $page->venue)
                    <h2 class="font-altgothic uppercase text-xl text-techcapital-gray-dark mb-4">Venue</h2>                
                    <div class="block-content">
                        {!! Str::markdown($page->venue) !!}
                    </div>
                    @if ($page->longitude && $page->latitude)
                        <div id="map" class="w-full h-96 mt-4"></div>
                    @endif
                @endif
                @if (isset($component['travel']) && $selected ===  'travel' && $page->travel)
                    <h2 class="font-altgothic uppercase text-xl text-techcapital-gray-dark mb-4">Travel Information</h2>                
                    <div class="block-content"> 
                        {!! Str::markdown($page->travel) !!}
                        @if ($travels)
                            <div class="mt-4">
                                @foreach($travels as $travel)
                                    <h2 class="font-altgothic uppercase text-techcapital-gray-dark mb-4 flex">
                                        @if ($travel->website)
                                        <a href="{{$travel->website}}" title="Find out more on travel {{$travel->name}}" class="flex">
                                        @endif
                                        <span class="inline-block mr-4 text-techcapital-red">
                                            @if ($travel->icon === 'airplane')
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 256 256"><path d="M185.33,114.21l29.14-27.42.17-.17a32,32,0,0,0-45.26-45.26c0,.06-.11.11-.17.17L141.79,70.67l-83-30.2a8,8,0,0,0-8.39,1.86l-24,24a8,8,0,0,0,1.22,12.31l63.89,42.59L76.69,136H56a8,8,0,0,0-5.65,2.34l-24,24A8,8,0,0,0,29,175.42l36.82,14.73,14.7,36.75.06.16a8,8,0,0,0,13.18,2.47l23.87-23.88A8,8,0,0,0,120,200V179.31l14.76-14.76,42.59,63.89a8,8,0,0,0,12.31,1.22l24-24a8,8,0,0,0,1.86-8.39Zm-.07,97.23-42.59-63.88A8,8,0,0,0,136.8,144c-.27,0-.53,0-.79,0a8,8,0,0,0-5.66,2.35l-24,24A8,8,0,0,0,104,176v20.69L90.93,209.76,79.43,181A8,8,0,0,0,75,176.57l-28.74-11.5L59.32,152H80a8,8,0,0,0,5.66-2.34l24-24a8,8,0,0,0-1.22-12.32L44.56,70.74l13.5-13.49,83.22,30.26a8,8,0,0,0,8.56-2L180.78,52.6A16,16,0,0,1,203.4,75.23l-32.87,30.93a8,8,0,0,0-2,8.56l30.26,83.22Z" class="fill-current"></path></svg>                                        
                                            @endif
                                            @if ($travel->icon === 'bus')
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 256 256"><path d="M184,32H72A32,32,0,0,0,40,64V208a16,16,0,0,0,16,16H80a16,16,0,0,0,16-16V192h64v16a16,16,0,0,0,16,16h24a16,16,0,0,0,16-16V64A32,32,0,0,0,184,32ZM56,176V120H200v56Zm0-96H200v24H56ZM72,48H184a16,16,0,0,1,16,16H56A16,16,0,0,1,72,48Zm8,160H56V192H80Zm96,0V192h24v16Zm-72-60a12,12,0,1,1-12-12A12,12,0,0,1,104,148Zm72,0a12,12,0,1,1-12-12A12,12,0,0,1,176,148Zm72-68v24a8,8,0,0,1-16,0V80a8,8,0,0,1,16,0ZM24,80v24a8,8,0,0,1-16,0V80a8,8,0,0,1,16,0Z" class="fill-current"></path></svg>
                                            @endif
                                            @if ($travel->icon === 'car')
                                                <svg xmlns="http://www.w3.org/2000/svg"  class="h-6 w-6" viewBox="0 0 256 256"><path d="M240,112H229.2L201.42,49.5A16,16,0,0,0,186.8,40H69.2a16,16,0,0,0-14.62,9.5L26.8,112H16a8,8,0,0,0,0,16h8v80a16,16,0,0,0,16,16H64a16,16,0,0,0,16-16V192h96v16a16,16,0,0,0,16,16h24a16,16,0,0,0,16-16V128h8a8,8,0,0,0,0-16ZM69.2,56H186.8l24.89,56H44.31ZM64,208H40V192H64Zm128,0V192h24v16Zm24-32H40V128H216ZM56,152a8,8,0,0,1,8-8H80a8,8,0,0,1,0,16H64A8,8,0,0,1,56,152Zm112,0a8,8,0,0,1,8-8h16a8,8,0,0,1,0,16H176A8,8,0,0,1,168,152Z" class="fill-current"></path></svg>
                                            @endif
                                            @if ($travel->icon === 'train')
                                                <svg xmlns="http://www.w3.org/2000/svg"  class="h-6 w-6" viewBox="0 0 256 256"><path d="M184,24H72A32,32,0,0,0,40,56V184a32,32,0,0,0,32,32h8L65.6,235.2a8,8,0,1,0,12.8,9.6L100,216h56l21.6,28.8a8,8,0,1,0,12.8-9.6L176,216h8a32,32,0,0,0,32-32V56A32,32,0,0,0,184,24ZM56,120V80h64v40Zm80-40h64v40H136ZM72,40H184a16,16,0,0,1,16,16v8H56V56A16,16,0,0,1,72,40ZM184,200H72a16,16,0,0,1-16-16V136H200v48A16,16,0,0,1,184,200ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm88,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z" class="fill-current"></path></svg>
                                            @endif
                                            @if ($travel->icon === 'taxi')
                                                <svg xmlns="http://www.w3.org/2000/svg"  class="h-6 w-6" viewBox="0 0 256 256"><path d="M240,112H228.64L201.25,64.06A16,16,0,0,0,187.36,56H165.42l-12-29.94A15.93,15.93,0,0,0,138.58,16H117.42a15.93,15.93,0,0,0-14.86,10.06L90.58,56H68.64a16,16,0,0,0-13.89,8.06L27.36,112H16a8,8,0,0,0,0,16h8v80a16,16,0,0,0,16,16H64a16,16,0,0,0,16-16V192h96v16a16,16,0,0,0,16,16h24a16,16,0,0,0,16-16V128h8a8,8,0,0,0,0-16ZM117.42,32h21.16l9.6,24H107.82ZM68.64,72H187.36l22.85,40H45.79ZM64,208H40V192H64Zm128,0V192h24v16Zm24-32H40V128H216ZM56,152a8,8,0,0,1,8-8H80a8,8,0,0,1,0,16H64A8,8,0,0,1,56,152Zm112,0a8,8,0,0,1,8-8h16a8,8,0,0,1,0,16H176A8,8,0,0,1,168,152Z" class="fill-current"></path></svg>
                                            @endif
                                            @if ($travel->icon === 'bicycle')
                                                <svg xmlns="http://www.w3.org/2000/svg"  class="h-6 w-6" viewBox="0 0 256 256"><path d="M208,112a47.81,47.81,0,0,0-16.93,3.09L165.93,72H192a8,8,0,0,1,8,8,8,8,0,0,0,16,0,24,24,0,0,0-24-24H152a8,8,0,0,0-6.91,12l11.65,20H99.26L82.91,60A8,8,0,0,0,76,56H48a8,8,0,0,0,0,16H71.41L85.12,95.51,69.41,117.06a48.13,48.13,0,1,0,12.92,9.44l11.59-15.9L125.09,164A8,8,0,1,0,138.91,156l-30.32-52h57.48l11.19,19.17A48,48,0,1,0,208,112ZM80,160a32,32,0,1,1-20.21-29.74l-18.25,25a8,8,0,1,0,12.92,9.42l18.25-25A31.88,31.88,0,0,1,80,160Zm128,32a32,32,0,0,1-22.51-54.72L201.09,164A8,8,0,1,0,214.91,156L199.3,129.21A32,32,0,1,1,208,192Z" class="fill-current"></path></svg>
                                            @endif
                                        </span>
                                        {{$travel->name}}
                                        @if ($travel->website)
                                        </a>
                                        @endif
                                    </h2>
                                    {!! Str::markdown($travel->description) !!}                           
                                @endforeach
                            </div>
                        @endif
                    </div>
                @endif
                @if (isset($component['accommodation']) && $selected ===  'accommodation' && $page->accommodation)
                    <h2 class="font-altgothic uppercase text-xl text-techcapital-gray-dark mb-4">Accommodation</h2>                
                    <div class="block-content">
                        {!! Str::markdown($page->accommodation) !!}
                    </div>
                    @if ($hotels)
                        <div class="grid grid-cols-3 gap-4 mt-4">
                            @foreach($hotels as $hotel)
                                <div class="col-span-3 lg:col-span-1">
                                    <p class="mb-4">
                                        <img src="/image/{{ $hotel->filename }}/340/240" alt="{{$hotel->name}}" title="{{$hotel->name}}" class="w-full rounded-sm" loading="lazy">
                                    </p>
                                    <h2 class="font-altgothic uppercase text-techcapital-gray-dark flex items-center">
                                        {{$hotel->name}}
                                    </h2>
                                    <ul class="flex mb-4">
                                        @if ($hotel->website)
                                            <li class="mr-2">
                                                <a href="{{$hotel->website}}" target="_blank" class="text-techcapital-red flex items-center" rel="nofollow noopener">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM101.63,168h52.74C149,186.34,140,202.87,128,215.89,116,202.87,107,186.34,101.63,168ZM98,152a145.72,145.72,0,0,1,0-48h60a145.72,145.72,0,0,1,0,48ZM40,128a87.61,87.61,0,0,1,3.33-24H81.79a161.79,161.79,0,0,0,0,48H43.33A87.61,87.61,0,0,1,40,128ZM154.37,88H101.63C107,69.66,116,53.13,128,40.11,140,53.13,149,69.66,154.37,88Zm19.84,16h38.46a88.15,88.15,0,0,1,0,48H174.21a161.79,161.79,0,0,0,0-48Zm32.16-16H170.94a142.39,142.39,0,0,0-20.26-45A88.37,88.37,0,0,1,206.37,88ZM105.32,43A142.39,142.39,0,0,0,85.06,88H49.63A88.37,88.37,0,0,1,105.32,43ZM49.63,168H85.06a142.39,142.39,0,0,0,20.26,45A88.37,88.37,0,0,1,49.63,168Zm101.05,45a142.39,142.39,0,0,0,20.26-45h35.43A88.37,88.37,0,0,1,150.68,213Z" class="fill-current"></path></svg>
                                                    Website
                                                </a>
                                            </li>
                                        @endif
                                        @if ($hotel->map)
                                            <li>
                                                <a href="{{$hotel->map}}" target="_blank" class="text-techcapital-red flex items-center" rel="nofollow noopener">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" viewBox="0 0 256 256"><path d="M200,224H150.54A266.56,266.56,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25a88,88,0,0,0-176,0c0,31.4,14.51,64.68,42,96.25A266.56,266.56,0,0,0,105.46,224H56a8,8,0,0,0,0,16H200a8,8,0,0,0,0-16ZM56,104a72,72,0,0,1,144,0c0,57.23-55.47,105-72,118C111.47,209,56,161.23,56,104Zm112,0a40,40,0,1,0-40,40A40,40,0,0,0,168,104Zm-64,0a24,24,0,1,1,24,24A24,24,0,0,1,104,104Z" class="fill-current"></path></svg>
                                                    Map
                                                </a>
                                            </li>
                                        @endif                                              
                                    </ul>                                    
                                    <div class="block-content">
                                        {!! Str::markdown($hotel->description) !!}
                                    </div>                              
                                </div>
                            @endforeach
                        </div>
                    @endif
                @endif
                @if (isset($component['things_to_do']) && $selected ===  'things-to-do' && $page->things_to_do)
                    <h2 class="font-altgothic uppercase text-xl text-techcapital-gray-dark mb-4">Things To Do</h2>                
                    <div class="block-content">
                        {!! Str::markdown($page->things_to_do) !!}
                    </div>
                    <div class="grid grid-cols-12 gap-4 mt-4">
                        <div class="col-span-12 lg:col-span-2">
                            <ul>
                            @foreach($groups as $key => $value)
                                <li class="p-2 mb-1 text-sm rounded-sm @if ($group === $key) bg-techcapital-red text-white @else bg-techcapital-gray @endif"><button wire:click="changeGroup('{{$key}}')" title="{{$value}}">{{$value}}</button></li>
                            @endforeach
                            </ul>
                        </div>
                        <div class="col-span-12 lg:col-span-10">
                            @foreach($groups as $key => $value)
                                @if ($group === $key)
                                    <div>
                                        <h2 class="text-xl font-altgothic uppercase text-techcapital-gray-dark mb-4">{{$value}}</h2>
                                        <div class="grid grid-cols-12 gap-4">
                                            @forelse($toDos as $toDo)
                                                <div class="col-span-12 lg:col-span-3">
                                                    <img src="/image/{{ $toDo->filename }}/194/136" alt="{{ $toDo->name }}" title="{{ $toDo->name }}" class="rounded-sm" loading="lazy">
                                                </div>
                                                <div class="col-span-12 lg:col-span-9 flex items-center">
                                                    <div>
                                                        <h2 class="font-altgothic uppercase text-techcapital-gray-dark mb-4 flex">
                                                            <span class="grow">
                                                                {{$toDo->name}}
                                                            </span>
                                                            <span class="shrink flex items-center">
                                                                @if ($toDo->website)
                                                                    <a href="{{$toDo->website}}" target="_blank" class="text-techcapital-red flex items-center mr-2" rel="nofollow noopener">
                                                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM101.63,168h52.74C149,186.34,140,202.87,128,215.89,116,202.87,107,186.34,101.63,168ZM98,152a145.72,145.72,0,0,1,0-48h60a145.72,145.72,0,0,1,0,48ZM40,128a87.61,87.61,0,0,1,3.33-24H81.79a161.79,161.79,0,0,0,0,48H43.33A87.61,87.61,0,0,1,40,128ZM154.37,88H101.63C107,69.66,116,53.13,128,40.11,140,53.13,149,69.66,154.37,88Zm19.84,16h38.46a88.15,88.15,0,0,1,0,48H174.21a161.79,161.79,0,0,0,0-48Zm32.16-16H170.94a142.39,142.39,0,0,0-20.26-45A88.37,88.37,0,0,1,206.37,88ZM105.32,43A142.39,142.39,0,0,0,85.06,88H49.63A88.37,88.37,0,0,1,105.32,43ZM49.63,168H85.06a142.39,142.39,0,0,0,20.26,45A88.37,88.37,0,0,1,49.63,168Zm101.05,45a142.39,142.39,0,0,0,20.26-45h35.43A88.37,88.37,0,0,1,150.68,213Z" class="fill-current"></path></svg>
                                                                        Website
                                                                    </a>     
                                                                @endif
                                                                @if ($toDo->map)
                                                                    <a href="{{$toDo->map}}" target="_blank" class="text-techcapital-red flex items-center" rel="nofollow noopener">
                                                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" viewBox="0 0 256 256"><path d="M200,224H150.54A266.56,266.56,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25a88,88,0,0,0-176,0c0,31.4,14.51,64.68,42,96.25A266.56,266.56,0,0,0,105.46,224H56a8,8,0,0,0,0,16H200a8,8,0,0,0,0-16ZM56,104a72,72,0,0,1,144,0c0,57.23-55.47,105-72,118C111.47,209,56,161.23,56,104Zm112,0a40,40,0,1,0-40,40A40,40,0,0,0,168,104Zm-64,0a24,24,0,1,1,24,24A24,24,0,0,1,104,104Z" class="fill-current"></path></svg>
                                                                        Map
                                                                    </a>            
                                                                @endif                                               
                                                            </span>
                                                        </h2>
                                                        <div class="block-content">
                                                            {!! Str::markdown($toDo->description) !!}
                                                        </div>
                                                    </div>                                            
                                                </div>
                                            @empty
                                                <div class="col-span-12">
                                                    <p>Sorry, nothing found for {{ $value }}</p>
                                                </div>
                                            @endforelse
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                @endif
                @if ($selected ===  'restrictions' && $page->restrictions)
                    <h2 class="font-altgothic uppercase text-xl text-techcapital-gray-dark mb-4">Entering {{$page->country}}</h2>                
                    <div class="block-content">
                        {!! Str::markdown($page->restrictions) !!}
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>