{% extends "base.html" %}
{% block content %}
<div class="breadcrumb">
    {% if domain %}<span style="color: {{ domain.color or '#4F6EF7' }}">{{ domain.name }}</span><span class="sep">/</span>{% endif %}
    {% if area %}<span>{{ area.name }}</span><span class="sep">/</span>{% endif %}
    <span>{{ item.name }}</span>
</div>

<div class="detail-header">
    <div class="flex items-center justify-between">
        <h1 class="detail-title">{{ item.name }}</h1>
        <div class="flex gap-2">
            <a href="/projects/{{ item.id }}/edit" class="btn btn-secondary btn-sm">Edit</a>
            <form action="/projects/{{ item.id }}/delete" method="post" data-confirm="Delete this project?" style="display:inline">
                <button class="btn btn-danger btn-sm">Delete</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 item.target_date %}<span class="detail-meta-item">Target: {{ item.target_date }}</span>{% endif %}
    </div>
    <div class="mt-2" style="max-width: 300px;">
        <div class="progress-bar"><div class="progress-fill" style="width: {{ progress }}%"></div></div>
        <div class="progress-text">{{ done_count }}/{{ task_count }} tasks complete ({{ progress }}%)</div>
    </div>
</div>

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

<!-- Tabs -->
<div class="tab-strip">
    <a href="/projects/{{ item.id }}?tab=tasks" class="tab-item {{ 'active' if tab == 'tasks' }}">Tasks ({{ tasks|length }})</a>
    <a href="/projects/{{ item.id }}?tab=notes" class="tab-item {{ 'active' if tab == 'notes' }}">Notes ({{ notes|length }})</a>
    <a href="/projects/{{ item.id }}?tab=links" class="tab-item {{ 'active' if tab == 'links' }}">Links ({{ links|length }})</a>
</div>

{% if tab == 'tasks' %}
<form class="quick-add" action="/tasks/quick-add" method="post">
    <input type="hidden" name="domain_id" value="{{ item.domain_id }}">
    <input type="hidden" name="project_id" value="{{ item.id }}">
    <input type="text" name="title" placeholder="Quick add task to this project..." required>
    <button type="submit" class="btn btn-primary btn-sm">Add</button>
</form>
<a href="/tasks/create?domain_id={{ item.domain_id }}&project_id={{ item.id }}" class="btn btn-ghost btn-sm mb-3">+ Full Task Form</a>

{% for t in tasks %}
<div class="list-row {{ 'completed' if t.status == 'done' }}">
    <div class="row-check">
        <form action="/tasks/{{ t.id }}/toggle" method="post" style="display:inline">
            <input type="checkbox" id="pt-{{ t.id }}" {{ 'checked' if t.status == 'done' }} onchange="this.form.submit()">
            <label for="pt-{{ t.id }}"></label>
        </form>
    </div>
    <span class="priority-dot priority-{{ t.priority }}"></span>
    <span class="row-title"><a href="/tasks/{{ t.id }}">{{ t.title }}</a></span>
    {% if t.due_date %}<span class="row-meta">{{ t.due_date }}</span>{% endif %}
    <span class="status-badge status-{{ t.status }}">{{ t.status|replace('_', ' ') }}</span>
    <div class="row-actions">
        <a href="/tasks/{{ t.id }}/edit" class="btn btn-ghost btn-xs">Edit</a>
    </div>
</div>
{% else %}
<div class="empty-state"><div class="empty-state-text">No tasks yet</div></div>
{% endfor %}

{% elif tab == 'notes' %}
<a href="/notes/create?domain_id={{ item.domain_id }}&project_id={{ item.id }}" class="btn btn-ghost btn-sm mb-3">+ New Note</a>
{% for n in notes %}
<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 yet</div></div>
{% endfor %}

{% elif tab == 'links' %}
<a href="/links/create?domain_id={{ item.domain_id }}&project_id={{ item.id }}" class="btn btn-ghost btn-sm mb-3">+ New Link</a>
{% for l in links %}
<div class="list-row">
    <span class="row-title"><a href="{{ l.url }}" target="_blank">{{ l.label }}</a></span>
    <span class="row-meta">{{ l.url[:50] }}{% if l.url|length > 50 %}...{% endif %}</span>
    <div class="row-actions">
        <a href="/links/{{ l.id }}/edit" class="btn btn-ghost btn-xs">Edit</a>
    </div>
</div>
{% else %}
<div class="empty-state"><div class="empty-state-text">No links yet</div></div>
{% endfor %}
{% endif %}
{% endblock %}