{% extends "base.html" %}
{% block content %}
<div class="breadcrumb">
    <a href="/decisions">Decisions</a>
    <span class="sep">/</span>
    <span>{{ item.title }}</span>
</div>

<div class="detail-header">
    <h1 class="detail-title">{{ item.title }}</h1>
    <div class="flex gap-2">
        <a href="/decisions/{{ item.id }}/edit" class="btn btn-secondary btn-sm">Edit</a>
        <form action="/decisions/{{ item.id }}/delete" method="post" data-confirm="Delete this decision?" style="display:inline">
            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
        </form>
    </div>
</div>

<div class="detail-meta mt-2">
    <span class="status-badge status-{{ item.status }}">{{ item.status }}</span>
    <span class="row-tag impact-{{ item.impact }}">{{ item.impact }} impact</span>
    {% if item.decided_at %}<span class="detail-meta-item">Decided: {{ item.decided_at }}</span>{% endif %}
    {% if meeting %}<span class="detail-meta-item">Meeting: <a href="/meetings/{{ meeting.id }}">{{ meeting.title }}</a></span>{% endif %}
    {% if item.tags %}
    <div class="mt-1">{% for tag in item.tags %}<span class="row-tag">{{ tag }}</span>{% endfor %}</div>
    {% endif %}
</div>

{% if superseded_by %}
<div class="card mt-3" style="border-left: 3px solid var(--amber);">
    <div style="padding: 12px 16px;">
        <strong style="color: var(--amber);">Superseded by:</strong>
        <a href="/decisions/{{ superseded_by.id }}">{{ superseded_by.title }}</a>
    </div>
</div>
{% endif %}

{% if item.rationale %}
<div class="card mt-3">
    <div class="card-header"><h3 class="card-title">Rationale</h3></div>
    <div class="detail-body" style="padding: 12px 16px;">{{ item.rationale }}</div>
</div>
{% endif %}

{% if supersedes %}
<div class="card mt-3">
    <div class="card-header"><h3 class="card-title">Supersedes</h3></div>
    {% for dec in supersedes %}
    <div class="list-row">
        <span class="row-title"><a href="/decisions/{{ dec.id }}">{{ dec.title }}</a></span>
    </div>
    {% endfor %}
</div>
{% endif %}
{% endblock %}