Initial commit

templates/list_detail.html

@@ -0,0 +1,132 @@
+{% 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 }}">
+        {% 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;">
+        {% 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 %}