{% if speakers is not empty %}
    <section>
        <h2 class="text-3xl font-bold text-center">Speakers</h2>

        <div class="mt-8">
            <div class="grid grid-cols-2 gap-10 px-4 mx-auto max-w-sm md:grid-cols-3 md:max-w-md lg:grid-cols-4 lg:gap-8 lg:max-w-full xl:grid-cols-6">
                {% set speakersAndDates = [] %}

                {% for speaker in speakers %}
                    {% set talksForSpeaker = talks|default([])|filter(talk => talk.speaker == speaker.name) %}
                    {% set mostRecentTalk = talksForSpeaker|first %}

                    {% set speakersAndDates = speakersAndDates|merge([{
                        date: mostRecentTalk.date,
                        speaker,
                    }]) %}
                {% endfor %}

                {% set sortedSpeakers = speakersAndDates|sort((a, b) => b.date <=> a.date) %}

                {% for speaker in sortedSpeakers|column('speaker') %}
                    <div>
                        <a href="{{ speaker.url }}" class="flex flex-col-reverse gap-3 items-center group">
                            <div class="text-center">
                                <p class="text-base group-hover:underline">{{ speaker.name }}</p>
                            </div>

                            <div>
                                <img
                                    alt="Photo of {{ speaker.name }}"
                                    class="object-cover flex-shrink-0 rounded-full shadow-lg size-20 lg:size-32 xl:size-24"
                                    src="{{ speaker.imageUrl }}"
                                />
                            </div>
                        </a>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
{% endif %}