{% extends "base.html" %}
{% block content %}
<div class="breadcrumb">
    {% if domain %}<a href="/tasks?domain_id={{ item.domain_id }}">{{ domain.name }}</a><span class="sep">/</span>{% endif %}
    {% if project %}<a href="/projects/{{ project.id }}">{{ project.name }}</a><span class="sep">/</span>{% endif %}
    <span>{{ item.title }}</span>
</div>

<div class="detail-header">
    <div class="flex items-center justify-between">
        <h1 class="detail-title">{{ item.title }}</h1>
        <div class="flex gap-2">
            {% if item.status not in ['done', 'cancelled'] %}
                {% if running_task_id and item.id|string == running_task_id %}
                <form action="/time/stop" method="post" style="display:inline">
                    <button class="btn btn-sm timer-detail-btn timer-detail-stop" title="Stop timer">&#9632; Stop Timer</button>
                </form>
                {% else %}
                <form action="/time/start" method="post" style="display:inline">
                    <input type="hidden" name="task_id" value="{{ item.id }}">
                    <button class="btn btn-sm timer-detail-btn timer-detail-play" title="Start timer">&#9654; Start Timer</button>
                </form>
                {% endif %}
            {% endif %}
            <a href="/tasks/{{ item.id }}/edit" class="btn btn-secondary btn-sm">Edit</a>
            <form action="/tasks/{{ item.id }}/toggle" method="post" style="display:inline">
                <button class="btn {{ 'btn-secondary' if item.status == 'done' else 'btn-primary' }} btn-sm">
                    {{ 'Reopen' if item.status == 'done' else 'Complete' }}
                </button>
            </form>
        </div>
    </div>
    <div class="detail-meta mt-2">
        <span class="status-badge status-{{ item.status }}">{{ item.status|replace('_', ' ') }}</span>
        <span class="detail-meta-item"><span class="priority-dot priority-{{ item.priority }}"></span> P{{ item.priority }}</span>
        {% if domain %}<span class="row-domain-tag" style="background: {{ domain.color or '#4F6EF7' }}22; color: {{ domain.color or '#4F6EF7' }}">{{ domain.name }}</span>{% endif %}
        {% if project %}<span class="row-tag">{{ project.name }}</span>{% endif %}
        {% if item.due_date %}<span class="detail-meta-item">Due: {{ item.due_date }}</span>{% endif %}
        {% if item.context %}<span class="detail-meta-item">@{{ item.context }}</span>{% endif %}
        {% if item.estimated_minutes %}<span class="detail-meta-item">~{{ item.estimated_minutes }}min</span>{% endif %}
        {% if item.energy_required %}<span class="detail-meta-item">Energy: {{ item.energy_required }}</span>{% endif %}
    </div>
</div>

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

{% if item.tags %}
<div class="flex gap-2 mb-4">
    {% for tag in item.tags %}<span class="row-tag">{{ tag }}</span>{% endfor %}
</div>
{% endif %}

<!-- Tabs -->
<div class="tab-strip">
    <a href="/tasks/{{ item.id }}?tab=overview" class="tab-item {{ 'active' if tab == 'overview' }}">Overview{% if counts.overview %} ({{ counts.overview }}){% endif %}</a>
    <a href="/tasks/{{ item.id }}?tab=notes" class="tab-item {{ 'active' if tab == 'notes' }}">Notes{% if counts.notes %} ({{ counts.notes }}){% endif %}</a>
    <a href="/tasks/{{ item.id }}?tab=links" class="tab-item {{ 'active' if tab == 'links' }}">Links{% if counts.links %} ({{ counts.links }}){% endif %}</a>
    <a href="/tasks/{{ item.id }}?tab=files" class="tab-item {{ 'active' if tab == 'files' }}">Files{% if counts.files %} ({{ counts.files }}){% endif %}</a>
    <a href="/tasks/{{ item.id }}?tab=lists" class="tab-item {{ 'active' if tab == 'lists' }}">Lists{% if counts.lists %} ({{ counts.lists }}){% endif %}</a>
    <a href="/tasks/{{ item.id }}?tab=decisions" class="tab-item {{ 'active' if tab == 'decisions' }}">Decisions{% if counts.decisions %} ({{ counts.decisions }}){% endif %}</a>
    <a href="/tasks/{{ item.id }}?tab=processes" class="tab-item {{ 'active' if tab == 'processes' }}">Processes</a>
    <a href="/tasks/{{ item.id }}?tab=contacts" class="tab-item {{ 'active' if tab == 'contacts' }}">Contacts{% if counts.contacts %} ({{ counts.contacts }}){% endif %}</a>
</div>

{% if tab == 'overview' %}
{% if parent %}
<div class="card mb-4">
    <div class="card-title text-sm">Parent Task</div>
    <a href="/tasks/{{ parent.id }}">{{ parent.title }}</a>
</div>
{% endif %}

<div class="card">
    <div class="card-header">
        <h2 class="card-title">Subtasks<span class="page-count">{{ subtasks|length }}</span></h2>
        <a href="/tasks/create?parent_id={{ item.id }}&domain_id={{ item.domain_id }}&project_id={{ item.project_id or '' }}" class="btn btn-ghost btn-sm">+ Add Subtask</a>
    </div>
    {% for sub in subtasks %}
    <div class="list-row {{ 'completed' if sub.status == 'done' }}">
        <div class="row-check">
            <form action="/tasks/{{ sub.id }}/toggle" method="post" style="display:inline">
                <input type="checkbox" id="sub-{{ sub.id }}" {{ 'checked' if sub.status == 'done' }} onchange="this.form.submit()">
                <label for="sub-{{ sub.id }}"></label>
            </form>
        </div>
        <span class="priority-dot priority-{{ sub.priority }}"></span>
        <span class="row-title"><a href="/tasks/{{ sub.id }}">{{ sub.title }}</a></span>
        <span class="status-badge status-{{ sub.status }}">{{ sub.status|replace('_', ' ') }}</span>
    </div>
    {% else %}
    <div class="text-sm text-muted" style="padding: 12px;">No subtasks</div>
    {% endfor %}
</div>

{% elif tab == 'notes' %}
<a href="/notes/create?task_id={{ item.id }}&domain_id={{ item.domain_id }}" class="btn btn-ghost btn-sm mb-3">+ New Note</a>
{% for n in tab_data %}
<div class="list-row">
    <span class="row-title"><a href="/notes/{{ n.id }}">{{ n.title }}</a></span>
    <span class="row-meta">{{ n.updated_at.strftime('%Y-%m-%d') if n.updated_at else '' }}</span>
</div>
{% else %}
<div class="empty-state"><div class="empty-state-text">No notes linked to this task</div></div>
{% endfor %}

{% elif tab == 'links' %}
<a href="/links/create?task_id={{ item.id }}" class="btn btn-ghost btn-sm mb-3">+ New Link</a>
{% for w in tab_data %}
<div class="list-row">
    <span class="row-title"><a href="{{ w.url }}" target="_blank">{{ w.label }}</a></span>
    <span class="row-meta">{{ w.url[:50] }}{% if w.url|length > 50 %}...{% endif %}</span>
</div>
{% else %}
<div class="empty-state"><div class="empty-state-text">No links linked to this task</div></div>
{% endfor %}

{% elif tab == 'files' %}
<a href="/files/upload?context_type=task&context_id={{ item.id }}" class="btn btn-ghost btn-sm mb-3">+ Upload File</a>
{% for f in tab_data %}
<div class="list-row">
    <span class="row-title"><a href="/files/{{ f.id }}">{{ f.original_filename }}</a></span>
    <span class="row-meta">{{ f.created_at.strftime('%Y-%m-%d') if f.created_at else '' }}</span>
</div>
{% else %}
<div class="empty-state"><div class="empty-state-text">No files attached to this task</div></div>
{% endfor %}

{% elif tab == 'lists' %}
<a href="/lists/create?task_id={{ item.id }}&domain_id={{ item.domain_id }}" class="btn btn-ghost btn-sm mb-3">+ New List</a>
{% for l in tab_data %}
<div class="list-row">
    <span class="row-title"><a href="/lists/{{ l.id }}">{{ l.name }}</a></span>
    <span class="row-meta">{{ l.item_count }} items</span>
</div>
{% else %}
<div class="empty-state"><div class="empty-state-text">No lists linked to this task</div></div>
{% endfor %}

{% elif tab == 'decisions' %}
<a href="/decisions/create?task_id={{ item.id }}" class="btn btn-ghost btn-sm mb-3">+ New Decision</a>
{% for d in tab_data %}
<div class="list-row">
    <span class="row-title"><a href="/decisions/{{ d.id }}">{{ d.title }}</a></span>
    <span class="status-badge status-{{ d.status }}">{{ d.status }}</span>
</div>
{% else %}
<div class="empty-state"><div class="empty-state-text">No decisions linked to this task</div></div>
{% endfor %}

{% elif tab == 'processes' %}
<div class="empty-state"><div class="empty-state-text">Process management coming soon</div></div>

{% elif tab == 'contacts' %}
<div class="card mb-4">
    <form action="/tasks/{{ item.id }}/contacts/add" method="post" class="flex gap-2 items-end" style="padding: 12px;">
        <div class="form-group" style="flex:1; margin:0;">
            <label class="form-label">Contact</label>
            <select name="contact_id" class="form-select" required>
                <option value="">Select contact...</option>
                {% for c in all_contacts %}
                <option value="{{ c.id }}">{{ c.first_name }} {{ c.last_name or '' }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="form-group" style="flex:1; margin:0;">
            <label class="form-label">Role</label>
            <input type="text" name="role" class="form-input" placeholder="e.g. reviewer, assignee...">
        </div>
        <button type="submit" class="btn btn-primary btn-sm">Add</button>
    </form>
</div>
{% for c in tab_data %}
<div class="list-row">
    <span class="row-title"><a href="/contacts/{{ c.id }}">{{ c.first_name }} {{ c.last_name or '' }}</a></span>
    {% if c.role %}<span class="row-tag">{{ c.role }}</span>{% endif %}
    <span class="row-meta">{{ c.linked_at.strftime('%Y-%m-%d') if c.linked_at else '' }}</span>
    <div class="row-actions">
        <form action="/tasks/{{ item.id }}/contacts/{{ c.id }}/remove" method="post" style="display:inline">
            <button class="btn btn-ghost btn-xs" title="Remove">Remove</button>
        </form>
    </div>
</div>
{% else %}
<div class="empty-state"><div class="empty-state-text">No contacts linked to this task</div></div>
{% endfor %}
{% endif %}

<div class="text-xs text-muted mt-4">
    Created {{ item.created_at.strftime('%Y-%m-%d %H:%M') if item.created_at else '' }}
    {% if item.completed_at %} | Completed {{ item.completed_at.strftime('%Y-%m-%d %H:%M') }}{% endif %}
</div>
{% endblock %}