@if (count($speakers) > 0)
    <div id="speakers" class="container lg:max-w-screen-lg mx-auto bg-white">
        <div class="p-4 pt-8 pb-8">
            <div class="grid grid-cols-12 gap-4">
                <div class="col-span-12 lg:col-span-4">
                    <div>
                        <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>
                        @if ($page->slug === 'the-tech-capital-global-awards-2024')
                            <h2 class="font-altgothic uppercase text-3xl mb-8 text-techcapital-gray-dark ">Judges</h2>
                        @else 
                            <h2 class="font-altgothic uppercase text-3xl mb-8 text-techcapital-gray-dark ">Featured Speakers</h2>
                        @endif
                        <div class="mb-8">
                            <ul>
                                <li class="inline-block mr-4">
                                    <a href="https://www.linkedin.com/company/the-tech-capital" target="_blank" rel="noopener" title="Connect on LinkedIn">
                                        <img src="{{ asset('/svg/linkedin.svg') }}" alt="Connect on LinkedIn" title="Connect on LinkedIn" class="w-4 h-4" loading="lazy"/>    
                                    </a>
                                </li>
                                <li class="inline-block mr-4">
                                    <a href="https://twitter.com/thetechcapital_" target="_blank" rel="noopener" title="Follow us on Twitter">
                                        <img src="{{ asset('/svg/twitter.svg') }}" alt="Follow us on Twitter" title="Follow us on Twitter" class="w-4 h-4" loading="lazy"/>
                                    </a>
                                </li>
                                <li class="inline-block mr-4">
                                    <a href="https://instagram.com/thetechcapital_" target="_blank" rel="noopener" title="Follow us on Instagram">
                                        <img src="{{ asset('/svg/instagram.svg') }}" alt="Follow us on Instagram" title="Follow us on Instagram" class="w-4 h-4" loading="lazy"/>    
                                    </a>
                                </li>                                
                                <li class="inline-block mr-4">
                                    <a href="https://www.facebook.com/The-Tech-Capital-101679965480510" target="_blank" rel="noopener" title="Friend us on Facebook">
                                        <img src="{{ asset('/svg/facebook.svg') }}" alt="Friend us on Facebook" title="Friend us on Facebook" class="w-4 h-4" loading="lazy"/>    
                                    </a>
                                </li>                                
                                <li class="inline-block mr-4">
                                    <a href="https://www.youtube.com/channel/UCPZ8yuPvtECZCwV2g9OkX1w" target="_blank" rel="noopener" title="Watch us on YouTube">
                                        <img src="{{ asset('/svg/youtube.svg') }}" alt="Watch us on YouTube" title="Watch us on YouTube" class="w-4 h-4" loading="lazy"/>    
                                    </a>
                                </li>    
                            </ul>
                        </div>
                        <x-article :page="$page"/>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-8">
                    <div class="grid grid-cols-2 lg:grid-cols-12 gap-4">
                        @foreach($speakers as $speaker)
                            <div class="col-span-1 lg:col-span-4 text-center">
                                <a href="" wire:click.prevent="toggleSpeakerPopup('{{$speaker->name}}')">
                                    <img src="/image/{{ $speaker->filename }}/240/240" alt="{{ $speaker->name }}" title="{{ $speaker->name }}" class="rounded-full w-24 h-24 mx-auto border border-techcapital-gray-ultra p-1 mb-2 filter grayscale" loading="lazy"/>
                                </a>
                                <h2 class="font-serif text-techcapital-gray-dark font-bold text-sm">
                                    <a href="" wire:click.prevent="toggleSpeakerPopup('{{$speaker->name}}')">{{ $speaker->name }}</a>                                    
                                </h2>
                                <p class="font-sans text-xs text-techcapital-gray-dark uppercase">{{ $speaker->company }}</p>
                                <p class="font-sans text-xs text-techcapital-red uppercase">{{ $speaker->position }}</p>
                            </div>
                        @endforeach
                    </div>  
                </div>
            </div>              
        </div>
    </div>
@endif