{% extends "base.html" %}
{% block content %}
<div class="breadcrumb">
    <a href="/focus">Focus</a>
    <span class="sep">/</span>
    <a href="/focus/{{ item.id }}">{{ item.title or 'Item' }}</a>
    <span class="sep">/</span>
    <span>Edit</span>
</div>

<div class="page-header">
    <h1 class="page-title">Edit Focus Item</h1>
</div>

<div class="card">
    <form method="post" action="/focus/{{ item.id }}/edit">
        <div class="form-grid">
            <div class="form-group full-width">
                <label class="form-label">Title *</label>
                <input type="text" name="title" class="form-input" required
                    value="{{ item.title or '' }}">
            </div>

            <div class="form-group">
                <label class="form-label">Domain</label>
                <select name="domain_id" class="form-select">
                    <option value="">-- No Domain --</option>
                    {% for d in domains %}
                    <option value="{{ d.id }}"
                        {{ 'selected' if item.domain_id and item.domain_id|string == d.id|string }}>
                        {{ d.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <label class="form-label">Project</label>
                <select name="project_id" class="form-select">
                    <option value="">-- No Project --</option>
                    {% for p in projects %}
                    <option value="{{ p.id }}"
                        {{ 'selected' if item.project_id and item.project_id|string == p.id|string }}>
                        {{ p.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Save Changes</button>
                <a href="/focus/{{ item.id }}" class="btn btn-secondary">Cancel</a>
            </div>
        </div>
    </form>
</div>

<div class="card" style="margin-top:16px;">
    <div style="padding:16px;">
        <h3 style="margin:0 0 12px;font-size:14px;color:var(--muted);">Convert to...</h3>
        <div style="display:flex;flex-wrap:wrap;gap:8px;align-items:end;">
            <form action="/focus/{{ item.id }}/convert-to-task" method="post" data-confirm="Convert to task? Opens the task editor." style="display:inline">
                <button type="submit" class="btn btn-secondary btn-sm">Task</button>
            </form>
            <form action="/focus/{{ item.id }}/convert-to-note" method="post" data-confirm="Convert to note? Opens the note editor." style="display:inline">
                <button type="submit" class="btn btn-secondary btn-sm">Note</button>
            </form>
            <form action="/focus/{{ item.id }}/convert-to-link" method="post" data-confirm="Convert to link? Opens the link editor." style="display:inline">
                <button type="submit" class="btn btn-secondary btn-sm">Link</button>
            </form>
            <form action="/focus/{{ item.id }}/convert-to-list-item" method="post" data-confirm="Add to selected list?" style="display:inline-flex;gap:6px;align-items:end;">
                <select name="list_id" class="form-select" style="min-width:160px;height:32px;font-size:13px;" required>
                    <option value="">Select list...</option>
                    {% for l in lists %}
                    <option value="{{ l.id }}">{{ l.name }}</option>
                    {% endfor %}
                </select>
                <button type="submit" class="btn btn-secondary btn-sm">List Item</button>
            </form>
        </div>
    </div>
</div>

<div style="margin-top:12px;display:flex;justify-content:flex-end;">
    <form action="/focus/{{ item.id }}/remove" method="post" data-confirm="Delete this focus item?" style="display:inline">
        <button type="submit" class="btn btn-danger btn-sm">Delete</button>
    </form>
</div>
{% endblock %}