{% extends 'administration/base.html.twig' %}

{% block title %}{{ 'admin.extensions_information.404'|trans }}{% endblock %}

{% block body %}
    <div class="container-fluid">
        <!-- Header Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="admin-card p-4">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center">
                        <div class="mb-3 mb-md-0">
                            <h2 class="gradient-text fw-bold mb-2">
                                <i class="bi bi-exclamation-triangle me-3"></i>
                                {{ 'admin.extensions_information.404'|trans }}
                            </h2>
                            <p class="text-muted mb-0">
                                Gestalten Sie Ihre individuelle 404-Fehlerseite
                            </p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ path('app_admin_modules') }}" class="btn btn-outline-secondary btn-lg">
                                <i class="bi bi-arrow-left me-2"></i>
                                {{ 'admin.page.back'|trans }}
                            </a>
                            <button type="submit" form="form" class="btn btn-primary btn-lg">
                                <i class="bi bi-check-circle me-2"></i>
                                {{ 'admin.save'|trans }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{ form_start(form, {'attr': {'id': 'form'}}) }}
        <div class="row g-4">
            <!-- Basic Information -->
            <div class="col-12 col-lg-4">
                <div class="admin-card p-4">
                    <h4 class="gradient-text fw-bold mb-4">
                        <i class="bi bi-info-circle me-2"></i>
                        {{ 'admin.page.basic_info'|trans }}
                    </h4>
                    <div class="mb-4">
                        {{ form_label(form.title, 'form.page.title'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                        {{ form_widget(form.title, {'attr': {'class': 'form-control form-control-lg', 'required': 'true'}}) }}
                        <small class="form-text text-muted">Titel der 404-Fehlerseite</small>
                    </div>
                    <div class="mb-4 form-check">
                        {{ form_widget(form.showTitle, {'attr': {'class': 'form-check-input'}}) }}
                        {{ form_label(form.showTitle, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                    </div>
                    <div class="mb-4 form-check">
                        {{ form_widget(form.active, {'attr': {'class': 'form-check-input'}}) }}
                        {{ form_label(form.active, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                    </div>
                    
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>
                        <strong>Hinweis:</strong><br>
                        Diese Seite wird automatisch angezeigt, wenn eine nicht existierende URL aufgerufen wird.
                    </div>
                </div>
        </div>
            
            <!-- Content & Advanced -->
            <div class="col-12 col-lg-8">
                <div class="admin-card p-4 mb-4">
                    <h4 class="gradient-text fw-bold mb-4">
                        <i class="bi bi-file-earmark-text me-2"></i>
                        {{ 'admin.page.content_section'|trans }}
                    </h4>
                    <div class="mb-4">
                        {{ form_label(form.content, 'form.page.content'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
            {{ form_widget(form.content, {'attr': {'class': 'form-control wysiwyg-editor', 'data-ce-title': 'form.page.content'|trans }}) }}
                        <button type="button" class="btn btn-primary mt-2" onclick="openMediaBrowser((referenceCodes) => { insertReferenceCodes(referenceCodes, 'content'); })">
                <i class="bi bi-images me-2"></i>
                            {{ 'admin.media_browser.title'|trans }}
            </button>
        </div>
                </div>
                
                <div class="admin-card p-4">
                    <div class="d-flex flex-row justify-content-between mb-3" style="cursor: pointer" data-bs-toggle="collapse" data-bs-target="#advancedFields" onclick="toggleIcon('advanced-icon', 'bi-chevron-down', 'bi-chevron-up');">
                        <h4 class="gradient-text fw-bold mb-0">
                            <i class="bi bi-gear me-2"></i>
                    {{ 'admin.advanced'|trans }}
                        </h4>
                        <i id="advanced-icon" class="bi bi-chevron-down"></i>
            </div>
            <div id="advancedFields" class="collapse">
                        <div class="mb-3 form-check">
                            {{ form_label(form.hideNavigation) }}
                            {{ form_widget(form.hideNavigation, {'attr': {'class': 'form-check-input'}}) }}
                        </div>
                <div class="mb-3">
                            {{ form_label(form.stylesheets, 'form.page.stylesheets'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                    {{ form_widget(form.stylesheets, {'attr': {'class': 'form-control editor wysiwyg-css', 'data-editor-language': 'css', 'data-ce-title': 'form.page.stylesheets'|trans }}) }}
                </div>
                        <div class="mb-3 form-check">
                            {{ form_widget(form.styleSheetsOverwrite, {'attr': {'class': 'form-check-input'}}) }}
                            {{ form_label(form.styleSheetsOverwrite, null, {'label_attr': {'class': 'form-check-label'}}) }}
                        </div>
                <div class="mb-3">
                            {{ form_label(form.javascripts, 'form.page.javascripts'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                            {{ form_widget(form.javascripts, {'attr': {'class': 'form-control editor wysiwyg-js', 'data-editor-language': 'javascript', 'data-ce-title': 'form.page.javascripts'|trans }}) }}
                        </div>
                        <div class="mb-3 form-check">
                            {{ form_widget(form.javaScriptsOverwrite, {'attr': {'class': 'form-check-input'}}) }}
                            {{ form_label(form.javaScriptsOverwrite, null, {'label_attr': {'class': 'form-check-label'}}) }}
                </div>
                <div class="mb-3">
                            {{ form_label(form.javascriptsBottom, 'form.page.javascripts_bottom'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                            {{ form_widget(form.javascriptsBottom, {'attr': {'class': 'form-control editor wysiwyg-js-bottom', 'data-editor-language': 'javascript', 'data-ce-title': 'form.page.javascripts_bottom'|trans }}) }}
                        </div>
                        <div class="mb-3 form-check">
                            {{ form_widget(form.javaScriptsBottomOverwrite, {'attr': {'class': 'form-check-input'}}) }}
                            {{ form_label(form.javaScriptsBottomOverwrite, null, {'label_attr': {'class': 'form-check-label'}}) }}
                </div>
                <div class="mb-3">
                            {{ form_label(form.metaTags, 'form.page.meta_tags'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                    {{ form_widget(form.metaTags, {'attr': {'class': 'form-control editor', 'data-editor-language': 'html', 'data-ce-title': 'form.page.meta_tags'|trans }}) }}
                        </div>
                        <div class="mb-3 form-check">
                            {{ form_widget(form.metaTagsOverwrite, {'attr': {'class': 'form-check-input'}}) }}
                            {{ form_label(form.metaTagsOverwrite, null, {'label_attr': {'class': 'form-check-label'}}) }}
                        </div>
                        <div class="mb-3">
                            {{ form_label(form.footer, 'form.page.footer'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                            {{ form_widget(form.footer, {'attr': {'class': 'form-control wysiwyg-editor', 'data-ce-title': 'form.page.footer'|trans }}) }}
                        </div>
                        <div class="mb-3 form-check">
                            {{ form_widget(form.footerOverwrite, {'attr': {'class': 'form-check-input'}}) }}
                            {{ form_label(form.footerOverwrite, null, {'label_attr': {'class': 'form-check-label'}}) }}
                        </div>
                        <div class="mb-3">
                            {{ form_label(form.navigation, 'form.page.navigation'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                            {{ form_widget(form.navigation, {'attr': {'class': 'form-control wysiwyg-editor', 'rows': 5, 'data-ce-title': 'form.page.navigation'|trans }}) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{ form_end(form) }}
    </div>

    <!-- Modern Media Browser is loaded via JavaScript -->
    <textarea class="wysiwyg-css" hidden="hidden">{{ appSettings.globalStylesheet|processShortcodes|minifyCss|raw }}</textarea>
    <textarea class="wysiwyg-js" hidden="hidden">{{ appSettings.globalJavaScript|processShortcodes|minifyJs|raw }}</textarea>
    <textarea class="wysiwyg-js-bottom" hidden="hidden">{{ appSettings.globalJavaScriptBottom|processShortcodes|minifyJs|raw }}</textarea>
{% endblock %}

{% block javascriptBottom %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Advanced fields standardmäßig eingeklappt
            document.getElementById('advancedFields').classList.add('collapse');
        });

        function insertReferenceCodes(referenceCodes, targetField) {
            const textarea = document.querySelector(`[name="error_not_found_page[${targetField}]"]`);
            if (!textarea) {
                return;
            }
            const insertion = '\n' + referenceCodes.join('\n');
            if (window.terraflowEditors && typeof window.terraflowEditors.appendToField === 'function') {
                window.terraflowEditors.appendToField(textarea, insertion);
                return;
            }
            textarea.value = (textarea.value || '') + insertion;
            textarea.dispatchEvent(new Event('change', { bubbles: true }));
        }
    </script>
{% endblock %}