{% extends "base.html" %}
{% load markdown_filters %}
{% block title %}PIP-{{ pip.pk }} preview{% endblock %}
{% block content %}
<div class="container mt-4" data-testid="pip-preview-page">
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
        <div>
            <h1 class="h4 mb-1">Preview — PIP-{{ pip.pk }}</h1>
            <p class="text-muted mb-0">{{ pip.title }}</p>
        </div>
        <a href="{% url 'pip_edit' pip.pk %}" class="btn btn-outline-secondary flex-shrink-0" data-testid="pip-preview-back"><i class="fas fa-arrow-left me-1"></i>Back to editor</a>
    </div>
    {% for row in rows %}
    <div class="card mb-3" data-testid="pip-preview-row">
        <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2 py-2">
            <span class="fw-semibold">{{ row.section }}</span>
            <span class="badge bg-secondary">{{ row.change_type }}</span>
        </div>
        {% if row.content %}
        <div class="card-body markdown-content pip-preview-markdown" data-testid="pip-preview-content">
            {{ row.content|markdown }}
        </div>
        {% elif row.snippet %}
        <div class="card-body small text-muted">{{ row.snippet }}</div>
        {% endif %}
    </div>
    {% empty %}
    <div class="text-muted border rounded p-3">No changes yet.</div>
    {% endfor %}
</div>
{% include "includes/markdown_content_assets.html" %}
{% endblock %}