{% extends "base.html" %}
{% block content %}
<div class="breadcrumb">
    <a href="/meetings">Meetings</a>
    <span class="sep">/</span>
    <span>{{ item.title }}</span>
</div>

<div class="detail-header">
    <h1 class="detail-title">{{ item.title }}</h1>
    <div class="flex gap-2">
        <a href="/meetings/{{ item.id }}/edit" class="btn btn-secondary btn-sm">Edit</a>
        <form action="/meetings/{{ item.id }}/delete" method="post" data-confirm="Delete this meeting?" style="display:inline">
            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
        </form>
    </div>
</div>

<div class="detail-meta mt-2">
    <span class="detail-meta-item">{{ item.meeting_date }}</span>
    <span class="status-badge status-{{ item.status }}">{{ item.status }}</span>
    {% if item.location %}<span class="detail-meta-item">{{ item.location }}</span>{% endif %}
    {% if item.start_at and item.end_at %}
    <span class="detail-meta-item">{{ item.start_at.strftime('%H:%M') }} - {{ item.end_at.strftime('%H:%M') }}</span>
    {% endif %}
    {% if item.tags %}
    <div class="mt-1">{% for tag in item.tags %}<span class="row-tag">{{ tag }}</span>{% endfor %}</div>
    {% endif %}
</div>

<!-- Agenda -->
{% if item.agenda %}
<div class="card mt-3">
    <div class="card-header"><h3 class="card-title">Agenda</h3></div>
    <div class="detail-body" style="padding: 12px 16px;">{{ item.agenda }}</div>
</div>
{% endif %}

<!-- Meeting Notes -->
{% if item.notes_body %}
<div class="card mt-3">
    <div class="card-header"><h3 class="card-title">Notes</h3></div>
    <div class="detail-body" style="padding: 12px 16px;">{{ item.notes_body }}</div>
</div>
{% endif %}

<!-- Transcript -->
{% if item.transcript %}
<div class="card mt-3">
    <div class="card-header"><h3 class="card-title">Transcript</h3></div>
    <div class="detail-body" style="padding: 12px 16px; font-family: var(--font-mono); font-size: 0.82rem; white-space: pre-wrap;">{{ item.transcript }}</div>
</div>
{% endif %}

<!-- Action Items -->
<div class="card mt-3">
    <div class="card-header">
        <h3 class="card-title">Action Items<span class="page-count">{{ action_items|length }}</span></h3>
    </div>

    <!-- Quick add action item -->
    <form class="quick-add" action="/meetings/{{ item.id }}/action-item" method="post" style="border-bottom: 1px solid var(--border);">
        <input type="text" name="title" placeholder="Add action item..." required>
        <select name="domain_id" class="filter-select" required style="width: auto;">
            {% for d in domains %}
            <option value="{{ d.id }}">{{ d.name }}</option>
            {% endfor %}
        </select>
        <button type="submit" class="btn btn-primary btn-sm">Add</button>
    </form>

    {% for task in action_items %}
    <div class="list-row {{ 'completed' if task.status == 'done' }}">
        <div class="row-check">
            <form action="/tasks/{{ task.id }}/toggle" method="post" style="display:inline">
                <input type="checkbox" id="mt-{{ task.id }}" {{ 'checked' if task.status == 'done' }}
                    onchange="this.form.submit()">
                <label for="mt-{{ task.id }}"></label>
            </form>
        </div>
        <span class="priority-dot priority-{{ task.priority }}"></span>
        <span class="row-title"><a href="/tasks/{{ task.id }}">{{ task.title }}</a></span>
        {% if task.project_name %}<span class="row-tag">{{ task.project_name }}</span>{% endif %}
        <span class="status-badge status-{{ task.status }}">{{ task.status|replace('_', ' ') }}</span>
    </div>
    {% endfor %}

    {% if not action_items %}
    <div style="padding: 16px; color: var(--muted); font-size: 0.85rem;">No action items yet</div>
    {% endif %}
</div>

<!-- Decisions -->
{% if decisions %}
<div class="card mt-3">
    <div class="card-header"><h3 class="card-title">Decisions<span class="page-count">{{ decisions|length }}</span></h3></div>
    {% for dec in decisions %}
    <div class="list-row">
        <span class="row-title"><a href="/decisions/{{ dec.id }}">{{ dec.title }}</a></span>
        <span class="status-badge status-{{ dec.status }}">{{ dec.status }}</span>
        <span class="row-tag">{{ dec.impact }}</span>
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Attendees -->
{% if attendees %}
<div class="card mt-3">
    <div class="card-header"><h3 class="card-title">Attendees<span class="page-count">{{ attendees|length }}</span></h3></div>
    {% for att in attendees %}
    <div class="list-row">
        <span class="row-title"><a href="/contacts/{{ att.id }}">{{ att.first_name }} {{ att.last_name or '' }}</a></span>
        {% if att.role %}<span class="row-tag">{{ att.role }}</span>{% endif %}
    </div>
    {% endfor %}
</div>
{% endif %}
{% endblock %}