{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container-fluid p-4">
    <div class="card shadow-sm border-0" style="border-radius: 12px;">
        <div class="card-header bg-white border-0" style="border-radius: 12px 12px 0 0;">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="fw-bold" style="color: #0e2e63;">
                        <i class="fas {% if post %}fa-edit{% else %}fa-plus-circle{% endif %} me-2"></i>
                        {% if post %}Edit{% else %}Create New{% endif %} Blog Post
                    </h3>
                    <p class="text-muted small">{% if post %}Update post details{% else %}Write a new blog post{% endif %}</p>
                </div>
                <a href="{% url 'blog_admin' %}" class="btn btn-light">
                    <i class="fas fa-arrow-left me-1"></i> Back
                </a>
            </div>
        </div>
        <div class="card-body">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                
                <div class="row">
                    <div class="col-md-8 mb-3">
                        <label class="form-label fw-semibold" style="color: #0e2e63;">Post Title <span class="text-danger">*</span></label>
                        <input type="text" name="title" class="form-control" style="border-radius: 8px; padding: 10px;" value="{{ post.title|default:'' }}" required>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold" style="color: #0e2e63;">Slug</label>
                        <input type="text" name="slug" class="form-control" style="border-radius: 8px; padding: 10px;" value="{{ post.slug|default:'' }}" placeholder="Leave blank to auto-generate">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold" style="color: #0e2e63;">Category</label>
                        <select name="category" class="form-select" style="border-radius: 8px; padding: 10px;">
                            <option value="">Select Category</option>
                            {% for category in categories %}
                            <option value="{{ category.id }}" {% if post.category.id == category.id %}selected{% endif %}>
                                {{ category.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold" style="color: #0e2e63;">Status <span class="text-danger">*</span></label>
                        <select name="status" class="form-select" style="border-radius: 8px; padding: 10px;" required>
                            <option value="draft" {% if post.status == 'draft' %}selected{% endif %}>Draft</option>
                            <option value="published" {% if post.status == 'published' %}selected{% endif %}>Published</option>
                            <option value="archived" {% if post.status == 'archived' %}selected{% endif %}>Archived</option>
                        </select>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold" style="color: #0e2e63;">Tags</label>
                    <select name="tags" class="form-select" style="border-radius: 8px; padding: 10px;" multiple>
                        {% for tag in tags %}
                        <option value="{{ tag.id }}" {% if tag in post.tags.all %}selected{% endif %}>
                            {{ tag.name }}
                        </option>
                        {% endfor %}
                    </select>
                    <small class="text-muted">Hold Ctrl/Cmd to select multiple tags</small>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold" style="color: #0e2e63;">Excerpt (Short Summary)</label>
                    <textarea name="excerpt" class="form-control" style="border-radius: 8px; padding: 10px; min-height: 80px;">{{ post.excerpt|default:'' }}</textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold" style="color: #0e2e63;">Content <span class="text-danger">*</span></label>
                    <textarea name="content" class="form-control" style="border-radius: 8px; padding: 10px; min-height: 250px;" required>{{ post.content|default:'' }}</textarea>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold" style="color: #0e2e63;">Featured Image</label>
                        <input type="file" name="featured_image" class="form-control" style="border-radius: 8px; padding: 10px;" accept="image/*">
                        {% if post.featured_image %}
                        <small class="text-muted">Current: {{ post.featured_image.name }}</small>
                        {% endif %}
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold" style="color: #0e2e63;">Meta Title (SEO)</label>
                    <input type="text" name="meta_title" class="form-control" style="border-radius: 8px; padding: 10px;" value="{{ post.meta_title|default:'' }}">
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold" style="color: #0e2e63;">Meta Description (SEO)</label>
                    <textarea name="meta_description" class="form-control" style="border-radius: 8px; padding: 10px; min-height: 80px;">{{ post.meta_description|default:'' }}</textarea>
                </div>

                <div class="mt-4 pt-3 border-top">
                    <button type="submit" class="btn" style="background: #0e2e63; color: #fff; padding: 10px 40px; border-radius: 8px;">
                        <i class="fas {% if post %}fa-save{% else %}fa-plus{% endif %} me-2"></i>
                        {% if post %}Update Post{% else %}Create Post{% endif %}
                    </button>
                    <a href="{% url 'blog_admin' %}" class="btn btn-light" style="padding: 10px 30px; border-radius: 8px;">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}