{% extends 'default' %}

{% block content_wrapper %}
    <h1 class="text-3xl font-bold text-center md:text-left">{{ page.name }}</h1>

    <div class="mt-6">
        <img
            alt="Photo of {{ page.name }}"
            class="object-cover flex-shrink-0 rounded-full shadow-lg size-40"
            src="{{ page.imageUrl }}"
        />
    </div>

    <div class="mt-10">
        <em>{{ block('content') }}</em>
    </div>

    {% set talks = site.talks|filter(talk => talk.speaker == page.name) %}
    {% if talks is not empty %}
        <section class="mt-10">
            <h2 class="text-2xl font-bold">Talks <span class="sr-only"> by {{ page.name }}</span></h2>

            <div class="mt-6">
                <ul class="pl-4 list-disc">
                    {% for talk in talks %}
                        <li>
                            <a class="hover:underline" href="#0">{{ talk.title }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </section>
    {% endif %}
{% endblock %}