{# arc-007 S4a/S4b (T-2015, T-2017): task fragment for the slide-in side panel.
   Loaded via htmx GET /tasks/<id>/panel into #wt-task-panel-body.

   S4b: the meta cells (status/owner/horizon/type) are inline-editable for *active*
   tasks via the shared `inline_select` macro + the existing /api/task/<id>/<field>
   endpoints. No inline <script> / document-level listener — htmx processes the
   swapped fragment and the macro's onchange submits, so nothing accumulates.
   Completed tasks render read-only. AC checklist, recommendation, description and
   artifacts remain read-only (full editing stays on task_detail.html). #}
{% from '_partials/inline_select.html' import inline_select %}
<div class="wt-task-panel-detail">
    <div class="wt-task-panel-titlebar">
        <span class="wt-task-panel-id">{{ task.id }}</span>
        <a class="wt-task-panel-fullpage" href="/tasks/{{ task_id }}"
           hx-get="/tasks/{{ task_id }}" hx-target="#content" hx-push-url="true"
           title="Open the full editable page">Open full page&nbsp;&#8599;</a>
    </div>
    <h2 class="wt-task-panel-name">{{ task.name }}</h2>

    <dl class="wt-task-panel-meta">
        {% if editable %}
        <div><dt>Status</dt><dd class="wt-panel-edit-cell">
            {{ inline_select(task_id, 'status', status_options, task.status, hx_target='#wt-panel-status-result') }}
            <span id="wt-panel-status-result" class="wt-panel-edit-result"></span>
        </dd></div>
        <div><dt>Owner</dt><dd class="wt-panel-edit-cell">
            {{ inline_select(task_id, 'owner', enum_owners, task.owner, hx_target='#wt-panel-owner-result') }}
            <span id="wt-panel-owner-result" class="wt-panel-edit-result"></span>
        </dd></div>
        <div><dt>Horizon</dt><dd class="wt-panel-edit-cell">
            {{ inline_select(task_id, 'horizon', enum_horizons, task.horizon, hx_target='#wt-panel-horizon-result') }}
            <span id="wt-panel-horizon-result" class="wt-panel-edit-result"></span>
        </dd></div>
        <div><dt>Type</dt><dd class="wt-panel-edit-cell">
            {{ inline_select(task_id, 'type', enum_types, task.workflow_type, hx_target='#wt-panel-type-result') }}
            <span id="wt-panel-type-result" class="wt-panel-edit-result"></span>
        </dd></div>
        {% else %}
        <div><dt>Status</dt><dd><span class="wt-chip" data-status="{{ task.status }}">{{ task.status }}</span></dd></div>
        <div><dt>Owner</dt><dd>{{ task.owner or '—' }}</dd></div>
        <div><dt>Horizon</dt><dd>{{ task.horizon or '—' }}</dd></div>
        <div><dt>Type</dt><dd>{{ task.workflow_type or '—' }}</dd></div>
        {% endif %}
        {% if task.arc_id %}
        <div><dt>Arc</dt><dd><a href="/arcs/{{ task.arc_id }}"><code>{{ task.arc_id }}</code></a>{% if arc_name %} <span class="muted">{{ arc_name }}</span>{% endif %}</dd></div>
        {% endif %}
        {% if bvp and bvp.mode and bvp.mode != 'none' %}
        <div><dt>BVP</dt><dd>{{ '%.3f'|format(bvp.bvp_norm) }}{% if bvp.mode == 'proposed' %}<em>*</em>{% endif %}</dd></div>
        {% endif %}
    </dl>

    {% if rec_complete %}
    <section class="recommendation-block" data-verdict="{{ verdict|default('?') }}">
        <h3>Recommendation{% if verdict and verdict != '?' %} — {{ verdict }}{% endif %}</h3>
        {% if rec_rationale_html %}<div class="rec-rationale"><h4>Rationale</h4>{{ rec_rationale_html | safe }}</div>{% endif %}
        {% if rec_evidence_html %}<div class="rec-evidence"><h4>Evidence</h4>{{ rec_evidence_html | safe }}</div>{% endif %}
    </section>
    {% endif %}

    {% if ac_items %}
    {% set checked_count = ac_items | selectattr('checked') | list | length %}
    <section class="wt-task-panel-acs">
        <h3>Acceptance Criteria <small>({{ checked_count }}/{{ ac_items|length }})</small></h3>
        <ul class="ac-list">
            {% for ac in ac_items %}
            <li>
                <span class="wt-ac-box{% if ac.checked %} wt-ac-box-checked{% endif %}" aria-hidden="true">{% if ac.checked %}&#10003;{% endif %}</span>
                <span class="{% if ac.checked %}ac-checked{% endif %}">{% if ac.section == 'human' %}<span class="muted">[human]</span> {% endif %}{{ ac.text }}</span>
            </li>
            {% endfor %}
        </ul>
    </section>
    {% endif %}

    {% if description_html %}
    <section class="wt-task-panel-desc">
        <h3>Description</h3>
        <div>{{ description_html | safe }}</div>
    </section>
    {% endif %}

    {% if artifacts %}
    <section class="wt-task-panel-artifacts">
        <h3>Research Artifacts <small>({{ artifacts|length }})</small></h3>
        <ul>
            {% for a in artifacts %}<li><a href="/file/{{ a.path }}">{{ a.name }}</a></li>{% endfor %}
        </ul>
    </section>
    {% endif %}
</div>