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

{% block title %}{{ title }}{% endblock %}

{% block extra_css %}
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<style>
    .ql-editor {
        min-height: 300px;
    }
    .ql-toolbar {
        border-top-left-radius: 0.375rem;
        border-top-right-radius: 0.375rem;
    }
    .ql-container {
        border-bottom-left-radius: 0.375rem;
        border-bottom-right-radius: 0.375rem;
        font-family: inherit;
    }
</style>
{% endblock %}

{% block content %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'stiftung:dashboard' %}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{% url 'stiftung:geschichte_list' %}">Geschichte</a></li>
        {% if seite %}
        <li class="breadcrumb-item"><a href="{{ seite.get_absolute_url }}">{{ seite.titel }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">Bearbeiten</li>
        {% else %}
        <li class="breadcrumb-item active" aria-current="page">Neue Seite</li>
        {% endif %}
    </ol>
</nav>

<div class="row">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-{% if seite %}edit{% else %}plus{% endif %} me-2"></i>{{ title }}
                </h5>
            </div>
            <div class="card-body">
                <form method="post" id="geschichteForm">
                    {% csrf_token %}
                    
                    <div class="row mb-3">
                        <div class="col-md-8">
                            <label class="form-label" for="{{ form.titel.id_for_label }}">{{ form.titel.label }}</label>
                            {{ form.titel }}
                            {% if form.titel.errors %}
                                <div class="text-danger">{{ form.titel.errors }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" for="{{ form.sortierung.id_for_label }}">{{ form.sortierung.label }}</label>
                            {{ form.sortierung }}
                            {% if form.sortierung.errors %}
                                <div class="text-danger">{{ form.sortierung.errors }}</div>
                            {% endif %}
                            <div class="form-text">{{ form.sortierung.help_text }}</div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label" for="{{ form.slug.id_for_label }}">{{ form.slug.label }}</label>
                        {{ form.slug }}
                        {% if form.slug.errors %}
                            <div class="text-danger">{{ form.slug.errors }}</div>
                        {% endif %}
                        <div class="form-text">{{ form.slug.help_text }}</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">{{ form.inhalt.label }}</label>
                        <div id="quill-editor" style="height: 400px;"></div>
                        <textarea name="inhalt" id="id_inhalt" style="display: none;">{{ form.inhalt.value|default:"" }}</textarea>
                        {% if form.inhalt.errors %}
                            <div class="text-danger">{{ form.inhalt.errors }}</div>
                        {% endif %}
                        <div class="form-text">{{ form.inhalt.help_text }}</div>
                    </div>
                    
                    <div class="mb-3 form-check">
                        {{ form.ist_veroeffentlicht }}
                        <label class="form-check-label" for="{{ form.ist_veroeffentlicht.id_for_label }}">
                            {{ form.ist_veroeffentlicht.label }}
                        </label>
                        {% if form.ist_veroeffentlicht.errors %}
                            <div class="text-danger">{{ form.ist_veroeffentlicht.errors }}</div>
                        {% endif %}
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{% if seite %}{{ seite.get_absolute_url }}{% else %}{% url 'stiftung:geschichte_list' %}{% endif %}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-1"></i>Abbrechen
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>Speichern
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>Rich Text Editor</h6>
            </div>
            <div class="card-body">
                <p class="small">Der Editor unterstützt:</p>
                <ul class="small">
                    <li>Formatierung (Fett, Kursiv, Unterstrichen)</li>
                    <li>Überschriften (H1, H2, H3)</li>
                    <li>Listen (nummeriert und Aufzählungen)</li>
                    <li>Links</li>
                    <li>Bilder (über separaten Upload)</li>
                </ul>
                <hr>
                <p class="small text-muted">
                    Tipp: Verwenden Sie die Bild-Upload-Funktion, um Bilder zur Seite hinzuzufügen.
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Quill editor
    var quill = new Quill('#quill-editor', {
        theme: 'snow',
        modules: {
            toolbar: [
                [{ 'header': [1, 2, 3, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'color': [] }, { 'background': [] }],
                ['link'],
                ['clean']
            ]
        },
        placeholder: 'Schreiben Sie hier den Inhalt der Geschichtsseite...'
    });
    
    // Load existing content
    var existingContent = document.getElementById('id_inhalt').value;
    if (existingContent) {
        quill.root.innerHTML = existingContent;
    }
    
    // Auto-generate slug from title
    document.getElementById('{{ form.titel.id_for_label }}').addEventListener('input', function() {
        var title = this.value;
        var slug = title.toLowerCase()
            .replace(/ä/g, 'ae').replace(/ö/g, 'oe').replace(/ü/g, 'ue').replace(/ß/g, 'ss')
            .replace(/[^\w\s-]/g, '')
            .replace(/[-\s]+/g, '-')
            .trim();
        document.getElementById('{{ form.slug.id_for_label }}').value = slug;
    });
    
    // Update textarea on form submit
    document.getElementById('geschichteForm').addEventListener('submit', function() {
        document.getElementById('id_inhalt').value = quill.root.innerHTML;
    });
});
</script>
{% endblock %}