{% extends "dashboard/base.html" %}
{% from "partials/_macros.html" import pill, status_pill, relative_time, empty_state %}

{% block page %}
<div class="row" style="margin-bottom: var(--space-3);">
  <a href="/dashboard/decisions" class="btn is-ghost is-sm">
    ← Decisions
  </a>
</div>

<div class="page-header">
  <div>
    <div class="page-header__eyebrow">Decision</div>
    <h1 class="page-header__title row" style="gap: var(--space-2);">
      {{ icon('sparkles') }}
      <code class="mono">{{ decision.code }}</code>
      {{ status_pill(decision.status) }}
    </h1>
    <p class="page-header__subtitle">
      <strong>{{ decision.title }}</strong>
    </p>
    <p class="muted" style="margin-top: var(--space-2);">
      Asked {{ relative_time(decision.created_at) }} · workspace
      <code class="mono">{{ decision.workspace }}</code>
    </p>
  </div>
</div>

{% if decision.body %}
<div class="panel" style="margin-bottom: var(--space-4);">
  <div class="panel__header">
    <h2 class="panel__title">{{ icon('sparkles') }} The question</h2>
  </div>
  <p style="white-space: pre-wrap;">{{ decision.body }}</p>
</div>
{% endif %}

{% if decision.proposed_answer %}
<div class="panel" style="margin-bottom: var(--space-4);">
  <div class="panel__header">
    <h2 class="panel__title">{{ icon('arrow-right') }} Proposed answer</h2>
    <p class="panel__subtitle">Session's suggested resolution; you can accept or override.</p>
  </div>
  <p><code class="mono">{{ decision.proposed_answer }}</code></p>
</div>
{% endif %}

<div class="panel">
  <div class="panel__header">
    <div>
      <h2 class="panel__title">{{ icon('list-checks') }} Your decision</h2>
      <p class="panel__subtitle">Save below; the session that asked will see it on next state poll.</p>
    </div>
  </div>
  <form method="post" action="/dashboard/decisions/{{ decision.code }}/resolve"
        style="display: flex; flex-direction: column; gap: var(--space-3);">
    <label class="stack is-tight">
      <span class="muted" style="font-size: var(--fs-sm);">Status</span>
      <select name="status">
        <option value="resolved" selected>resolved</option>
        <option value="rejected">rejected</option>
        <option value="deferred">deferred</option>
      </select>
    </label>
    <label class="stack is-tight">
      <span class="muted" style="font-size: var(--fs-sm);">Chosen answer</span>
      <input type="text" name="chosen" value="{{ decision.proposed_answer or 'approved' }}" />
    </label>
    <label class="stack is-tight">
      <span class="muted" style="font-size: var(--fs-sm);">Reasoning (optional)</span>
      <input type="text" name="reasoning" placeholder="One-line note for the audit log…" />
    </label>
    <div class="row" style="gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-2);">
      <a href="/dashboard/decisions" class="btn is-ghost is-sm">Cancel</a>
      <button type="submit" class="btn is-primary is-sm">
        {{ icon('arrow-right') }}<span>Resolve</span>
      </button>
    </div>
  </form>
</div>

<div class="panel" style="margin-top: var(--space-4);">
  <div class="panel__header">
    <h2 class="panel__title">{{ icon('activity') }} History</h2>
  </div>
  {% if history %}
  <ul class="activity-feed">
    {% for ev in history %}
    <li>
      <span class="activity-feed__time">{{ relative_time(ev.created_at) }}</span>
      <span class="activity-feed__icon">{{ icon('activity') }}</span>
      <span class="activity-feed__body">
        <strong>{{ ev.kind }}</strong>
        <span class="muted">· {{ ev.message }}</span>
      </span>
    </li>
    {% endfor %}
  </ul>
  {% else %}
    {{ empty_state('No history yet', body='Events touching this decision will appear here.', icon_name='activity') }}
  {% endif %}
</div>
{% endblock %}