{% extends 'master.html' %}
{% block content %}

<div class="container mt-5 mb-5">
    <h2 class="text-center fw-bold" style="margin-top: 140px !important;">Draft Details</h2>

    <div class="card shadow-sm p-4 mt-4">
        <h4 class="fw-bold text-dark">{{ draft.title }}</h4>
        <p class="text-muted">{{ draft.description }}</p>

        <!-- Template Details -->
        <h5 class="fw-bold mt-3">Template Details</h5>
        <ul class="text-muted">
            <li><strong>Template Name:</strong> {{ draft.template.name }}</li>
            <li><strong>Template Category:</strong> {{ draft.template.category }}</li>
        </ul>

        <!-- Customization Details -->
        <h5 class="fw-bold mt-3">Customization Details</h5>
        <ul class="text-muted">
            <li><strong>Style:</strong> {{ draft.style }}</li>
            <li><strong>Color:</strong> {{ draft.color }}</li>
            <li><strong>Created At:</strong> {{ draft.created_at|date:"F j, Y, g:i a" }}</li>
        </ul>

        <!-- If image exists, display it -->
        {% if draft.image %}
            <h5 class="fw-bold mt-3">Preview</h5>
            <img src="{{ draft.image.url }}" alt="Draft Image" class="img-fluid mt-2" style="max-height: 300px;">
        {% endif %}

        <div class="d-flex justify-content-between mt-4">
            <a href="{% url 'edit_draft' draft.id %}" class="btn btn-primary">
                <i class="bi bi-pencil-square"></i> Edit Draft
            </a>
            <a href="{% url 'draftview' %}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> Back to Drafts
            </a>
        </div>
    </div>
</div>

{% endblock %}