{% extends "base.html" %}
{% block content %}
<div class="page-header">
    <h1 class="page-title">Meetings<span class="page-count">{{ items|length }}</span></h1>
    <a href="/meetings/create" class="btn btn-primary">+ New Meeting</a>
</div>

<form class="filters-bar" method="get" action="/meetings">
    <select name="status" class="filter-select" onchange="this.form.submit()">
        <option value="">All Statuses</option>
        <option value="scheduled" {{ 'selected' if current_status == 'scheduled' }}>Scheduled</option>
        <option value="completed" {{ 'selected' if current_status == 'completed' }}>Completed</option>
        <option value="cancelled" {{ 'selected' if current_status == 'cancelled' }}>Cancelled</option>
    </select>
</form>

{% if items %}
<div class="card mt-3">
    {% for item in items %}
    <div class="list-row">
        {% with reorder_url="/meetings/reorder", item_id=item.id %}
        {% include 'partials/reorder_arrows.html' %}
        {% endwith %}
        <span class="row-title"><a href="/meetings/{{ item.id }}">{{ item.title }}</a></span>
        <span class="row-meta">{{ item.meeting_date }}</span>
        {% if item.location %}
        <span class="row-tag">{{ item.location }}</span>
        {% endif %}
        {% if item.action_count %}
        <span class="row-meta">{{ item.action_count }} action{{ 's' if item.action_count != 1 }}</span>
        {% endif %}
        <span class="status-badge status-{{ item.status }}">{{ item.status }}</span>
        <div class="row-actions">
            <a href="/meetings/{{ item.id }}/edit" class="btn btn-ghost btn-xs">Edit</a>
            <form action="/meetings/{{ item.id }}/delete" method="post" data-confirm="Delete this meeting?" style="display:inline">
                <button type="submit" class="btn btn-ghost btn-xs" style="color: var(--red)">Del</button>
            </form>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state mt-3">
    <div class="empty-state-icon">&#128197;</div>
    <div class="empty-state-text">No meetings yet</div>
    <a href="/meetings/create" class="btn btn-primary">Schedule First Meeting</a>
</div>
{% endif %}
{% endblock %}