{% extends "base_authenticated.html" %}
{% block title %}{% if object %}Edit{% else %}New{% endif %} Issue{% endblock %}
{% block content_inner %}
<div class="max-w-2xl mx-auto">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <h1 class="text-xl font-bold text-gray-900 mb-1">{% if object %}Edit{% else %}New{% endif %} Issue</h1>
        <p class="text-sm text-gray-500 mb-6">{% if object %}Update the issue details.{% else %}Create a new issue to track work.{% endif %}</p>
        <form method="post">
            {% csrf_token %}
            {% for field in form %}
                {% include "partials/form_field.html" %}
            {% endfor %}
            <div class="flex gap-3 pt-2">
                <button type="submit" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">Save</button>
                <a href="{% url 'issue_list' %}" class="btn btn-ghost">Cancel</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}
{% block extra_scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const descField = document.querySelector('textarea[name="description"]');
    if (descField) {
        const container = document.createElement('div');
        container.style.height = '400px';
        container.className = 'mb-4 rounded-xl';
        descField.parentNode.insertBefore(container, descField);
        descField.style.display = 'none';
        const quill = new Quill(container, {
            theme: 'snow',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'script': 'sub'}, { 'script': 'super' }],
                    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
                    [{ 'indent': '-1'}, { 'indent': '+1' }],
                    [{ 'direction': 'rtl' }],
                    [{ 'align': [] }],
                    ['link', 'image', 'video'],
                    ['blockquote', 'code-block'],
                    ['clean']
                ]
            }
        });
        quill.root.innerHTML = descField.value;
        document.querySelector('form').addEventListener('submit', function() {
            descField.value = quill.root.innerHTML;
        });
    }
});
</script>
{% endblock %}