{% extends "base.html" %}
{% block content %}
<!-- Breadcrumb -->
<div class="breadcrumb">
    <a href="/lists">Lists</a>
    <span class="sep">/</span>
    {% if domain %}<span style="color: {{ domain.color or 'var(--accent)' }}">{{ domain.name }}</span><span class="sep">/</span>{% endif %}
    {% if project %}<a href="/projects/{{ project.id }}">{{ project.name }}</a><span class="sep">/</span>{% endif %}
    <span>{{ item.name }}</span>
</div>

<div class="detail-header">
    <h1 class="detail-title">{{ item.name }}</h1>
    <div class="flex gap-2">
        <a href="/lists/{{ item.id }}/edit" class="btn btn-secondary btn-sm">Edit</a>
        <form action="/lists/{{ item.id }}/delete" method="post" data-confirm="Delete this list?" 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">
        <span class="row-tag">{{ item.list_type }}</span>
    </span>
    {% if item.description %}
    <p class="text-secondary mt-1">{{ item.description }}</p>
    {% endif %}
    {% if item.tags %}
    <div class="mt-1">
        {% for tag in item.tags %}
        <span class="row-tag">{{ tag }}</span>
        {% endfor %}
    </div>
    {% endif %}
</div>

<!-- Add item form -->
<form class="quick-add mt-3" action="/lists/{{ item.id }}/items/add" method="post">
    <input type="text" name="content" placeholder="Add item..." required>
    <button type="submit" class="btn btn-primary btn-sm">Add</button>
</form>

<!-- List items -->
{% if list_items %}
<div class="card mt-2">
    {% for li in list_items %}
    <div class="list-row {{ 'completed' if li.completed }}">
        {% with reorder_url="/lists/" ~ item.id ~ "/items/reorder", item_id=li.id %}
        {% include 'partials/reorder_arrows.html' %}
        {% endwith %}
        {% if item.list_type == 'checklist' %}
        <div class="row-check">
            <form action="/lists/{{ item.id }}/items/{{ li.id }}/toggle" method="post" style="display:inline">
                <input type="checkbox" id="li-{{ li.id }}" {{ 'checked' if li.completed }}
                    onchange="this.form.submit()">
                <label for="li-{{ li.id }}"></label>
            </form>
        </div>
        {% endif %}
        <span class="row-title" style="{{ 'text-decoration: line-through; opacity: 0.6;' if li.completed }}">
            {{ li.content }}
        </span>
        <div class="row-actions">
            <form action="/lists/{{ item.id }}/items/{{ li.id }}/delete" method="post" style="display:inline">
                <button type="submit" class="btn btn-ghost btn-xs" style="color: var(--red)">Del</button>
            </form>
        </div>
    </div>

    <!-- Child items -->
    {% for child in child_map.get(li.id|string, []) %}
    <div class="list-row {{ 'completed' if child.completed }}" style="padding-left: 48px;">
        {% with reorder_url="/lists/" ~ item.id ~ "/items/reorder", item_id=child.id, extra_fields={"parent_id": li.id|string} %}
        {% include 'partials/reorder_arrows.html' %}
        {% endwith %}
        {% if item.list_type == 'checklist' %}
        <div class="row-check">
            <form action="/lists/{{ item.id }}/items/{{ child.id }}/toggle" method="post" style="display:inline">
                <input type="checkbox" id="li-{{ child.id }}" {{ 'checked' if child.completed }}
                    onchange="this.form.submit()">
                <label for="li-{{ child.id }}"></label>
            </form>
        </div>
        {% endif %}
        <span class="row-title" style="{{ 'text-decoration: line-through; opacity: 0.6;' if child.completed }}">
            {{ child.content }}
        </span>
        <div class="row-actions">
            <form action="/lists/{{ item.id }}/items/{{ child.id }}/delete" method="post" style="display:inline">
                <button type="submit" class="btn btn-ghost btn-xs" style="color: var(--red)">Del</button>
            </form>
        </div>
    </div>
    {% endfor %}
    {% endfor %}
</div>
{% else %}
<div class="empty-state mt-3">
    <div class="empty-state-icon">&#9744;</div>
    <div class="empty-state-text">No items yet. Add one above.</div>
</div>
{% endif %}

<!-- Contacts -->
<div class="card mt-4">
    <div class="card-header">
        <h3 class="card-title">Contacts<span class="page-count">{{ contacts|length }}</span></h3>
    </div>
    <form action="/lists/{{ item.id }}/contacts/add" method="post" class="flex gap-2 items-end" style="padding: 12px; border-bottom: 1px solid var(--border);">
        <div class="form-group" style="flex:1; margin:0;">
            <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;">
            <input type="text" name="role" class="form-input" placeholder="Role (optional)">
        </div>
        <button type="submit" class="btn btn-primary btn-sm">Add</button>
    </form>
    {% for c in contacts %}
    <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 %}
        <div class="row-actions">
            <form action="/lists/{{ 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 style="padding: 12px; color: var(--muted); font-size: 0.85rem;">No contacts linked</div>
    {% endfor %}
</div>
{% endblock %}