{% 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">
            <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 %}

{% 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 %}

<!-- Subtasks -->
<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>

<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 %}