{# Single dispatch card. Expects `draft` (Draft) in context. #}
<article class="card{% if apply_queued %} card--queued{% endif %}" id="card-{{ draft.bug_id }}">
  <div class="card-head">
    <span class="bug-id"><a href="https://bugzilla.mozilla.org/show_bug.cgi?id={{ draft.bug_id }}" target="_blank" rel="noopener">{{ draft.bug_id }}</a></span>
    {% if draft.bug_component %}
    <span class="sep">·</span>
    <span class="component">{{ draft.bug_component }}</span>
    {% endif %}
    {# Card-head S/P pills reflect the bug's CURRENT Bugzilla state at
       draft time, not what the draft will write — the "Will apply"
       footer already shows the proposed values. Each pill is color-coded
       by level via .badge-level--<suffix>; unrecognised or missing
       values render as a warning-treated S? / P? placeholder. #}
    {% set _ctx = draft.bug_context %}
    {% set _sev = (_ctx.current_severity if _ctx else '') %}
    {% set _pri = (_ctx.current_priority if _ctx else '') %}
    {% set _sev_class = _sev | level_class %}
    {% set _pri_class = _pri | level_class %}
    <span class="sep">·</span>
    <span class="badge-level badge-level--{{ _sev_class }}">{{ _sev if _sev_class != 'unknown' else 'S?' }}</span>
    <span class="badge-level badge-level--{{ _pri_class }}">{{ _pri if _pri_class != 'unknown' else 'P?' }}</span>
    {# Always in the DOM; shown only when the card carries .card--queued, so the
       apply toggle can sync it by flipping that one class (see base.html). #}
    <span class="badge-applied" title="This bug's apply is queued for this round">✓ Applied</span>
  </div>

  <h3 class="card-title">
    <a href="https://bugzilla.mozilla.org/show_bug.cgi?id={{ draft.bug_id }}" target="_blank" rel="noopener">{{ draft.title }}</a>
  </h3>

  {% if draft.bug_context %}
    {% set ctx = draft.bug_context %}
    {% include "_bug_report.html" %}
  {% endif %}

  {% if investigation %}
  {% include "_investigation_findings.html" %}
  {% endif %}

  <div class="card-comment md-body" aria-label="Proposed comment">{{ draft.comment | render_markdown }}</div>

  <form class="composer"
        hx-post="/draft/{{ draft.bug_id }}/refine"
        hx-target="#fbstatus-{{ draft.bug_id }}"
        hx-swap="innerHTML"
        hx-on::after-request="if(event.detail.successful) { this.reset(); this.querySelector('.composer-send').disabled = true; }">
    <div class="composer-frame">
      <textarea name="feedback" class="composer-input" rows="2"
                aria-label="Feedback for the AI"
                placeholder="What should change about this draft? e.g. drop the about:support ask, make the tone more direct…"></textarea>
      <button type="submit" class="composer-send" disabled>Revise draft</button>
    </div>
  </form>
  <div id="fbstatus-{{ draft.bug_id }}" class="feedback-status" aria-live="polite"></div>

  {% if pending_feedback %}
  <section class="pending-feedback" aria-label="Queued feedback for this bug">
    <p class="pending-feedback-label">Pending feedback ({{ pending_feedback|length }})</p>
    <ul class="pending-feedback-list">
      {% for fb in pending_feedback %}
      <li class="pending-feedback-item">
        <span class="pf-ts">{{ fb.ts[:16].replace('T', ' ') }}</span>
        <span class="pf-text">{{ fb.feedback }}</span>
        <button type="button"
                class="pf-remove"
                aria-label="Remove this queued feedback"
                title="Remove"
                hx-post="/draft/{{ draft.bug_id }}/refine/remove"
                hx-vals='{"ts": {{ fb.ts | tojson }}}'
                hx-target="closest .pending-feedback-item"
                hx-swap="outerHTML">✕</button>
      </li>
      {% endfor %}
    </ul>
  </section>
  {% endif %}

  <div class="card-foot">
    <div id="applywrap-{{ draft.bug_id }}" class="applywrap">
{% include "_apply_wrap.html" %}
    </div>
    <div class="actions">
      {% include "_apply_button.html" %}
    </div>
  </div>
  <div id="apply-status-{{ draft.bug_id }}" class="apply-status-host" aria-live="polite"></div>
</article>