@if (count($programmes) > 0)
    <div id="agenda" 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 mb-8 text-techcapital-gray-dark ">Event Agenda</h2>
            <div class="grid grid-cols-12 gap-4">
                @foreach($programmes as $programme)
                    <div class="col-span-12 lg:col-span-1">
                        <h2 class="font-altgothic text-sm uppercase text-techcapital-red">{{ $programme->starts_at->format('H:i')}}-{{ $programme->ends_at->format('H:i') }}</h2>
                    </div>  
                    <div class="col-span-12 lg:col-span-11">
                        <h2 class="font-altgothic text-sm uppercase text-techcapital-gray-dark">{{$programme->title}}</h2>
                        <div class="full-content text-sm text-techcapital-gray-dark">
                            {!! nl2p($programme->description) !!}
                        </div>
                        @if ($programme->speakers()->count() > 0)
                            <div class="mt-2">
                                <div class="grid grid-cols-3 gap-4">
                                @foreach($programme->speakers()->get() as $speaker)
                                    <div class="col-span-3 md:col-span-1">
                                        <div class="grid grid-cols-12">
                                            <div class="col-span-3">
                                                <img src="/image/{{ $speaker->filename }}/120/120" alt="{{ $speaker->name }}" title="{{ $speaker->name }}" class="rounded-full w-14 h-14 border border-techcapital-gray-ultra p-0.5 filter grayscale" loading="lazy">
                                            </div>
                                            <div class="col-span-9 flex items-center">
                                                <div>
                                                    <h2 class="font-serif text-techcapital-gray-dark text-sm">{{ $speaker->name }}</h2>
                                                    <p class="font-sans text-xxs text-techcapital-red uppercase">{{ $speaker->company }}<span class="block">{{ $speaker->position }}</span></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>           
        </div>
    </div>
@endif