<div class="detail-panel">
    <h2>{{ task.title }}</h2>
    <dl>
        <dt>ID</dt><dd><code>{{ task.id }}</code></dd>
        <dt>Status</dt><dd><span class="badge" style="background:var(--{% if task.status == 'done' %}green{% elif task.status == 'failed' %}red{% elif task.status == 'claimed' %}blue{% elif task.status == 'blocked' %}orange{% else %}gray{% endif %});">{{ task.status }}</span></dd>
        <dt>Priority</dt><dd><span class="badge badge-{{ task.priority }}">{{ task.priority }}</span></dd>
        {% if task.assignee %}<dt>Assignee</dt><dd>{{ task.assignee }}</dd>{% endif %}
        {% if task.done_when %}<dt>Done When</dt><dd>{{ task.done_when }}</dd>{% endif %}
        {% if task.depends_on %}<dt>Dependencies</dt><dd>{% for d in task.depends_on %}<code>{{ d }}</code>{% if not loop.last %}, {% endif %}{% endfor %}</dd>{% endif %}
        {% if task.context %}<dt>Context</dt><dd><pre style="font-size:0.8rem; overflow:auto;">{{ task.context | tojson(indent=2) }}</pre></dd>{% endif %}
        {% if task.output %}<dt>Output</dt><dd><pre style="font-size:0.8rem; overflow:auto;">{{ task.output | tojson(indent=2) }}</pre></dd>{% endif %}
        {% if task.created_at %}<dt>Created</dt><dd>{{ task.created_at }}</dd>{% endif %}
        {% if task.updated_at %}<dt>Updated</dt><dd>{{ task.updated_at }}</dd>{% endif %}
    </dl>
</div>
