{% extends "base.html" %}
{% 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>
    <table class="table table-sm">
        <thead><tr><th>Section</th><th>Change</th><th>Snippet</th></tr></thead>
        <tbody>
        {% for row in rows %}
        <tr>
            <td>{{ row.section }}</td>
            <td>{{ row.change_type }}</td>
            <td class="small"><pre class="mb-0">{{ row.snippet }}</pre></td>
        </tr>
        {% empty %}
        <tr><td colspan="3" class="text-muted">No changes yet.</td></tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}