<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th class="w-40 md:w-48 block">Date</th>

                {% if not talk_page %}
                    <th>Talk</th>
                {% endif %}

                <th>Event</th>

                {% if not upcoming %}
                    <th class="w-32">Feedback</th>
                {% endif %}
            </tr>
        </thead>
        <tbody>
            {% for talk in talks %}
                <tr>
                    <td class="w-40 md:w-48 whitespace-no-wrap xl:whitespace-normal">
                        <span class="block md:hidden">
                            {{ talk.event.date|date(talk.event.fuzzy_date ? 'M Y' : 'j M Y') }}
                        </span>
                        <span class="hidden md:block">
                            {{ talk.event.date|date(talk.event.fuzzy_date ? 'F Y' : 'j F Y') }}
                        </span>

                        {% if talk.event.time is defined %}
                            <div class="text-xs text-grey-dark">
                                {{ talk.event.time }}
                            </div>
                        {% endif %}
                    </td>

                    {% if not talk_page %}
                        <td class="whitespace-no-wrap xl:whitespace-normal">
                            {% if talk.talk.url is not empty %}
                                <a href="{{ talk.talk.url }}" class="link">
                                    {{ talk.talk.title }}
                                </a>
                            {% else %}
                                {{ talk.talk.title }}
                            {% endif %}

                            <div class="text-xs text-grey-dark">
                                {% if talk.talk.type %}
                                    {{ talk.talk.type }}
                                {% else %}
                                    {{ talk.event.type|default('Talk') }}
                                {% endif %}
                            </div>
                        </td>
                    {% endif %}

                    <td>
                        {% if talk.event.url is not empty %}
                            <a href="{{ talk.event.url }}" class="link">
                                {{ talk.event.name }}
                            </a>
                        {% else %}
                            {{ talk.event.name }}
                        {% endif %}

                        {% if talk.event.location is defined %}
                            <div class="text-xs text-grey-dark">
                                {{ talk.event.location }}
                            </div>
                        {% endif %}
                    </td>

                    {% if not upcoming %}
                        <td>
                            {% if talk.event.joindin and talk.event.date <= 'today'|date('Y-m-d') %}
                                <a
                                    href="{{ talk.event.joindin }}"
                                    class="button no-underline"
                                    title="Read or leave feedback for this talk"
                                >
                                    <i class="fa fa-comment-o"></i> joind.in
                                </a>
                            {% endif %}
                        </td>
                    {% endif %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>