{% extends "base.html" %}
{% load static %}
{% load custom_tags %}
{% block title %}
    {% if form.instance.pk %}
        Edit Post
    {% else %}
        New Post
    {% endif %}
    | {% env 'PROJECT_NAME' %}
{% endblock title %}
{% block description %}
    {% if form.instance.pk %}
        Edit the existing post "{{ form.instance.title }}" on {% env 'PROJECT_NAME' %}. Update the title, content, and image to keep your post fresh and relevant.
    {% else %}
        Create a new post on {% env 'PROJECT_NAME' %}. Share your thoughts by adding a title, content, and an optional image to engage with the community.
    {% endif %}
{% endblock description %}
{% block keywords %}
    {% if form.instance.pk %}
        edit post, update post, {{ form.instance.title|slugify }}, {% env 'PROJECT_NAME' %}
    {% else %}
        new post, create post, blogging, {% env 'PROJECT_NAME' %}
    {% endif %}
{% endblock keywords %}
{% block og_title %}
    {% if form.instance.pk %}
        Edit Post: {{ form.instance.title }}
    {% else %}
        Create a New Post
    {% endif %}
    - {% env 'PROJECT_NAME' %}
{% endblock og_title %}
{% block og_description %}
    {% if form.instance.pk %}
        Edit your post "{{ form.instance.title }}" on {% env 'PROJECT_NAME' %}. Keep your content updated and engaging for your readers.
    {% else %}
        Start a new journey with your post on {% env 'PROJECT_NAME' %}. Share your ideas and connect with the community.
    {% endif %}
{% endblock og_description %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="font-sans p-5">
        <!-- Form Title -->
        <h1 id="form-title"
            class="text-3xl font-bold text-gray-900 text-center mb-6">
            {% if form.instance.pk %}
                Edit
            {% else %}
                New
            {% endif %}
            Post
        </h1>
        <!-- Form Container -->
        <div class="bg-white rounded-lg shadow-md p-6 max-w-2xl mx-auto">
            <form method="post" enctype="multipart/form-data" novalidate>
                {% csrf_token %}
                <!-- Title Field -->
                <div class="mb-6">
                    <label for="{{ form.title.id_for_label }}"
                           class="block font-bold text-gray-700 mb-2">{{ form.title.label }}</label>
                    <input type="text"
                           id="{{ form.title.id_for_label }}"
                           name="{{ form.title.name }}"
                           value="{{ form.title.value|default:'' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-gray-50 text-gray-900 placeholder-gray-400"
                           placeholder="Enter title">
                    {% for error in form.title.errors %}<div class="text-red-500 text-sm mt-2">{{ error }}</div>{% endfor %}
                </div>
                <!-- Content Field -->
                <div class="mb-6">
                    <label for="{{ form.content.id_for_label }}"
                           class="block font-bold text-gray-700 mb-2">{{ form.content.label }}</label>
                    <textarea id="{{ form.content.id_for_label }}"
                              name="{{ form.content.name }}"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-gray-50 text-gray-900 placeholder-gray-400"
                              placeholder="Enter content">{{ form.content.value|default:'' }}</textarea>
                    {% for error in form.content.errors %}<div class="text-red-500 text-sm mt-2">{{ error }}</div>{% endfor %}
                </div>
                <!-- Image Field -->
                <div class="mb-6">
                    <label for="{{ form.image.id_for_label }}"
                           class="block font-bold text-gray-700 mb-2">{{ form.image.label }}</label>
                    <input type="file"
                           id="{{ form.image.id_for_label }}"
                           name="{{ form.image.name }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-gray-50 text-gray-900">
                    {% for error in form.image.errors %}<div class="text-red-500 text-sm mt-2">{{ error }}</div>{% endfor %}
                </div>
                <!-- Save Button -->
                <button type="submit"
                        class="w-full px-6 py-2 bg-blue-600 text-white font-bold rounded-lg hover:bg-blue-700 transition-colors">
                    Save
                </button>
            </form>
        </div>
    </div>
    <!-- EasyMDE CSS and JS -->
    <link rel="stylesheet"
          href="https://unpkg.com/easymde/dist/easymde.min.css">
    <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
    <script>
        var easyMDE = new EasyMDE({
            element: document.getElementById('{{ form.content.id_for_label }}'),
            sideBySideFullscreen: false,
            hideIcons: ['fullscreen']
        });
    </script>
{% endblock content %}