{% extends "base.html" %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Appointments <span class="page-count">({{ count }})</span></h1>
    </div>
    <a href="/appointments/new" class="btn btn-primary">+ New Appointment</a>
</div>

<!-- Filters -->
<div class="filters-bar">
    <a href="/appointments?timeframe=upcoming" class="btn {{ 'btn-primary' if timeframe == 'upcoming' else 'btn-secondary' }} btn-sm">Upcoming</a>
    <a href="/appointments?timeframe=past" class="btn {{ 'btn-primary' if timeframe == 'past' else 'btn-secondary' }} btn-sm">Past</a>
    <a href="/appointments?timeframe=all" class="btn {{ 'btn-primary' if timeframe == 'all' else 'btn-secondary' }} btn-sm">All</a>
</div>

{% if appointments %}
<div class="card">
    {% set current_date = namespace(value='') %}
    {% for appt in appointments %}
        {% set appt_date = appt.start_at.strftime('%A, %B %-d, %Y') if appt.start_at else 'No Date' %}
        {% if appt_date != current_date.value %}
            {% if not loop.first %}</div>{% endif %}
            <div class="date-group-label" style="padding: 12px 12px 4px; font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; {% if not loop.first %}border-top: 1px solid var(--border); margin-top: 4px;{% endif %}">
                {{ appt_date }}
            </div>
            <div>
            {% set current_date.value = appt_date %}
        {% endif %}

        <div class="list-row">
            <div style="flex-shrink: 0; min-width: 60px;">
                {% if appt.all_day %}
                    <span class="status-badge status-active" style="font-size: 0.72rem;">All Day</span>
                {% elif appt.start_at %}
                    <span style="font-size: 0.85rem; font-weight: 600; color: var(--text);">{{ appt.start_at.strftime('%-I:%M %p') }}</span>
                {% endif %}
            </div>
            <div class="row-title">
                <a href="/appointments/{{ appt.id }}">{{ appt.title }}</a>
            </div>
            {% if appt.location %}
                <span class="row-meta">{{ appt.location }}</span>
            {% endif %}
            {% if appt.recurrence %}
                <span class="row-tag">{{ appt.recurrence }}</span>
            {% endif %}
            {% if appt.contact_count and appt.contact_count > 0 %}
                <span class="row-meta">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: -2px;"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    {{ appt.contact_count }}
                </span>
            {% endif %}
            <div class="row-actions">
                <a href="/appointments/{{ appt.id }}/edit" class="btn btn-ghost btn-xs">Edit</a>
                <form method="POST" action="/appointments/{{ appt.id }}/delete" data-confirm="Delete this appointment?">
                    <button type="submit" class="btn btn-ghost btn-xs" style="color: var(--red);">Delete</button>
                </form>
            </div>
        </div>
    {% endfor %}
    </div>
</div>
{% else %}
<div class="empty-state">
    <div class="empty-state-icon">📅</div>
    <div class="empty-state-text">No appointments {{ 'upcoming' if timeframe == 'upcoming' else 'found' }}</div>
    <a href="/appointments/new" class="btn btn-primary">Schedule an Appointment</a>
</div>
{% endif %}
{% endblock %}