{% extends "base.html" %}

{% block title %}View Draft: {{ draft.title }} - PoliSage{% endblock %}

{% block content %}
<div class="container mt-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url_for("index") }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ url_for("drafting.list_drafts") }}">Drafts</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ draft.title }}</li>
        </ol>
    </nav>

    <h2>{{ draft.title }}</h2>
    <p class="text-muted">Last updated: {{ draft.last_updated.strftime("%Y-%m-%d %H:%M") }} by {{ draft.author.username if draft.author else "N/A" }}</p>

    <div class="card mb-4">
        <div class="card-header">
            Draft Details
        </div>
        <div class="card-body">
            <dl class="row">
                <dt class="col-sm-3">Status</dt>
                <dd class="col-sm-9"><span class="badge bg-info">{{ draft.status }}</span></dd>

                <dt class="col-sm-3">Policy Intent</dt>
                <dd class="col-sm-9">{{ draft.policy_intent | nl2br }}</dd>

                {% if draft.related_legislation %}
                    <dt class="col-sm-3">Related Legislation</dt>
                    <dd class="col-sm-9">
                        <a href="#">{{ draft.related_legislation.title }}</a> {# Link to legislation view later #}
                    </dd>
                {% endif %}
            </dl>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            Draft Content
        </div>
        <div class="card-body">
            {% if draft.content %}
                <pre style="white-space: pre-wrap; word-wrap: break-word;">{{ draft.content }}</pre>
            {% else %}
                <p class="text-muted">No content added yet.</p>
            {% endif %}
        </div>
        <div class="card-footer">
            <!-- Add buttons for editing, AI actions, etc. later -->
            <a href="#" class="btn btn-secondary disabled">Edit Draft (Not Implemented)</a>
            <a href="#" class="btn btn-danger disabled">Delete Draft (Not Implemented)</a>
        </div>
    </div>

</div>
{% endblock %}