{% extends 'base.html' %}

{% block title %}Talks - NooK Feedback{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="h3 mb-0">Talks</h1>
    {% if current_user and current_user.is_authenticated and '/nook-feedback' in current_user.groups %}
        <a href="{{ url_for('talks.create_talk') }}" class="btn btn-success">New Talk</a>
    {% else %}
        <button class="btn btn-success" disabled>New Talk</button>
    {% endif %}
</div>

{# Event filter #}
<div class="mb-3">
    <form method="get" action="{{ url_for('talks.list_talks') }}" class="row g-2 align-items-end">
        <div class="col-auto">
            <label for="event_filter" class="form-label mb-1">Filter by Event:</label>
            <select name="event_id" id="event_filter" class="form-select" onchange="this.form.submit()">
                <option value="">All Events</option>
                {% for event in events %}
                    <option value="{{ event.id }}" {% if selected_event_id == event.id %}selected{% endif %}>
                        {{ event.name }}
                    </option>
                {% endfor %}
            </select>
        </div>
        {% if selected_event_id %}
        <div class="col-auto">
            <a href="{{ url_for('talks.list_talks') }}" class="btn btn-secondary">Clear Filter</a>
        </div>
        {% endif %}
    </form>
</div>

<table class="table table-sm table-hover align-middle">
    <thead>
        <tr>
            <th scope="col">Title</th>
            <th scope="col">Event</th>
            <th scope="col">Speaker</th>
            <th scope="col" style="width: 90px;">Duration</th>
            <th scope="col" style="width: 160px;">Actions</th>
        </tr>
    </thead>
    <tbody>
    {% for talk in talks %}
        {% include 'components/talk_row.html' %}
    {% endfor %}
    </tbody>
</table>
{% endblock %}