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

{% block extra_css %}
<!-- SimpleMDE CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<style>
    .CodeMirror {
        height: 400px;
        border-radius: 0.375rem;
    }
    .editor-toolbar {
        border-top-left-radius: 0.375rem;
        border-top-right-radius: 0.375rem;
    }
    .CodeMirror {
        border-bottom-left-radius: 0.375rem;
        border-bottom-right-radius: 0.375rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="bg-white shadow-sm rounded-lg overflow-hidden">
        <div class="px-4 py-5 sm:p-6">
            <h1 class="text-2xl font-bold text-gray-900 mb-6">
                {% if form.instance.pk %}
                    {% trans "Edit Newsletter" %}
                {% else %}
                    {% trans "New Newsletter" %}
                {% endif %}
            </h1>

            <form method="post" class="space-y-6">
                {% csrf_token %}

                <!-- Title Field -->
                <div>
                    <label for="{{ form.title.id_for_label }}" class="block text-sm font-medium text-gray-700">
                        {{ form.title.label }}
                    </label>
                    <div class="mt-1">
                        <input type="text" name="{{ form.title.name }}" id="{{ form.title.id_for_label }}"
                               class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                               value="{{ form.title.value|default:'' }}"
                               placeholder="{% trans 'Newsletter Title' %}">
                    </div>
                    {% if form.title.errors %}
                    <p class="mt-2 text-sm text-red-600">{{ form.title.errors.0 }}</p>
                    {% endif %}
                </div>

                <!-- Type Field -->
                <div>
                    <label for="{{ form.type.id_for_label }}" class="block text-sm font-medium text-gray-700">
                        {{ form.type.label }}
                    </label>
                    <div class="mt-1">
                        <select name="{{ form.type.name }}" id="{{ form.type.id_for_label }}"
                                class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md">
                            {% for value, label in form.type.field.choices %}
                                <option value="{{ value }}" {% if form.type.value == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    {% if form.type.errors %}
                    <p class="mt-2 text-sm text-red-600">{{ form.type.errors.0 }}</p>
                    {% endif %}
                </div>

                <!-- Content Field with SimpleMDE -->
                <div>
                    <label for="{{ form.content.id_for_label }}" class="block text-sm font-medium text-gray-700">
                        {{ form.content.label }}
                    </label>
                    <div class="mt-1">
                        <textarea name="{{ form.content.name }}" id="{{ form.content.id_for_label }}"
                                  class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md">{{ form.content.value|default:'' }}</textarea>
                    </div>
                    {% if form.content.errors %}
                    <p class="mt-2 text-sm text-red-600">{{ form.content.errors.0 }}</p>
                    {% endif %}
                    <p class="mt-2 text-sm text-gray-500">{% trans "Supports Markdown formatting" %}</p>
                </div>

                <div class="pt-5">
                    <div class="flex justify-end space-x-3">
                        <a href="{% url 'newsletter-list' %}"
                           class="inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            {% trans "Cancel" %}
                        </a>
                        <button type="submit"
                                class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            {% trans "Save" %}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- SimpleMDE JavaScript -->
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script>
var simplemde = new SimpleMDE({
    element: document.getElementById("{{ form.content.id_for_label }}"),
    spellChecker: false,
    autosave: {
        enabled: true,
        unique_id: "newsletter_content_{{ form.instance.pk|default:'new' }}"
    },
    toolbar: [
        "bold", "italic", "heading", "|",
        "quote", "unordered-list", "ordered-list", "|",
        "link", "image", "table", "|",
        "preview", "side-by-side", "fullscreen", "|",
        "guide"
    ],
    status: ["autosave", "lines", "words", "cursor"],
    renderingConfig: {
        singleLineBreaks: false,
        codeSyntaxHighlighting: true,
    }
});
</script>
{% endblock %}