{% extends "base.html" %}

{% block content %}
<div class="breadcrumb">
    <a href="/appointments">Appointments</a>
    <span class="sep">/</span>
    <span>{{ appointment.title }}</span>
</div>

<div class="detail-header">
    <div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;">
        <div>
            <h1 class="detail-title">{{ appointment.title }}</h1>
            <div class="detail-meta">
                {% if appointment.all_day %}
                    <span class="detail-meta-item">
                        <span class="status-badge status-active">All Day</span>
                    </span>
                {% endif %}
                <span class="detail-meta-item">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                    {% if appointment.all_day %}
                        {{ appointment.start_at.strftime('%A, %B %-d, %Y') }}
                        {% if appointment.end_at and appointment.end_at.strftime('%Y-%m-%d') != appointment.start_at.strftime('%Y-%m-%d') %}
                            &ndash; {{ appointment.end_at.strftime('%A, %B %-d, %Y') }}
                        {% endif %}
                    {% else %}
                        {{ appointment.start_at.strftime('%A, %B %-d, %Y at %-I:%M %p') }}
                        {% if appointment.end_at %}
                            &ndash; {{ appointment.end_at.strftime('%-I:%M %p') }}
                        {% endif %}
                    {% endif %}
                </span>
                {% if appointment.location %}
                <span class="detail-meta-item">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                    {{ appointment.location }}
                </span>
                {% endif %}
                {% if appointment.recurrence %}
                <span class="detail-meta-item">
                    <span class="row-tag">{{ appointment.recurrence }}</span>
                </span>
                {% endif %}
            </div>
        </div>
        <div style="display: flex; gap: 8px; flex-shrink: 0;">
            <a href="/appointments/{{ appointment.id }}/edit" class="btn btn-secondary btn-sm">Edit</a>
            <form method="POST" action="/appointments/{{ appointment.id }}/delete" data-confirm="Delete this appointment?">
                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
            </form>
        </div>
    </div>
</div>

{% if appointment.description %}
<div class="card mb-4">
    <div class="card-title mb-2">Description</div>
    <div class="detail-body">{{ appointment.description }}</div>
</div>
{% endif %}

{% if appointment.tags %}
<div style="display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;">
    {% for tag in appointment.tags %}
    <span class="row-tag">{{ tag }}</span>
    {% endfor %}
</div>
{% endif %}

<!-- Attendees -->
<div class="card">
    <div class="card-header">
        <span class="card-title">Attendees ({{ contacts | length }})</span>
    </div>
    {% if contacts %}
        {% for c in contacts %}
        <div class="list-row">
            <div class="row-title">
                <a href="/contacts/{{ c.id }}">{{ c.first_name }} {{ c.last_name or '' }}</a>
            </div>
            {% if c.company %}
                <span class="row-meta">{{ c.company }}</span>
            {% endif %}
            {% if c.email %}
                <span class="row-meta">{{ c.email }}</span>
            {% endif %}
            {% if c.role %}
                <span class="row-tag">{{ c.role }}</span>
            {% endif %}
        </div>
        {% endfor %}
    {% else %}
        <div class="empty-state" style="padding: 24px;">
            <div class="text-muted text-sm">No attendees added</div>
        </div>
    {% endif %}
</div>

<div class="text-muted text-xs mt-3">
    Created {{ appointment.created_at.strftime('%B %-d, %Y') }}
    {% if appointment.updated_at and appointment.updated_at != appointment.created_at %}
        &middot; Updated {{ appointment.updated_at.strftime('%B %-d, %Y') }}
    {% endif %}
</div>
{% endblock %}