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

{% block title %}{{ 'admin.edit_category'|trans }}{% endblock %}

{% block body %}
    <div class="container-fluid">
        {% if content_lock_blocked|default(false) %}
            <div class="alert alert-warning mb-3">
                <i class="bi bi-lock-fill me-2"></i>{{ 'admin.content_lock_blocked'|trans({'%user%': content_lock_blocked_by|default('?')}) }}
            </div>
        {% endif %}
        <!-- 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-folder me-3"></i>
                                {{ 'admin.edit_category'|trans }}
                            </h2>
                            <p class="text-muted mb-0">
                                {{ 'admin.category.edit_description'|trans }}
                            </p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ path('admin_categories') }}" class="btn btn-outline-secondary btn-lg">
                                <i class="bi bi-arrow-left me-2"></i>
                                {{ 'admin.category.back'|trans }}
                            </a>
                            <a href="{{ path('admin_content_revisions', {type: 'category', id: category.id}) }}" class="btn btn-outline-info btn-lg">
                                <i class="bi bi-clock-history me-2"></i>{{ 'admin.revisions.title'|trans }}
                            </a>
                            <button type="button" class="btn btn-outline-warning btn-lg" onclick="openAdminLivePreview('form', '{{ path('app_storefront_category_live_preview', {id: category.id}) }}', { localeSelectId: 'terraflowPreviewLocale', roleSelectId: 'terraflowPreviewRole', flagsInputId: 'terraflowPreviewFlags' })">
                                <i class="bi bi-box-arrow-up-right me-2"></i>
                                {{ 'admin.preview'|trans }}
                            </button>
                            <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 class="btn-group">
                                <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="bi bi-three-dots-vertical"></i>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                    <li>
                                        <a href="{{ path('admin_categories_duplicate', {id: category.id}) }}" class="dropdown-item">
                                            <i class="bi bi-copy"></i> {{ 'admin.duplicate'|trans }}
                                        </a>
                                    </li>
                                    <li>
                                        <button type="button" class="dropdown-item" onclick="handleDeleteCategory('{{ category.id }}', '{{ category.title }}')">
                                            <i class="bi bi-trash"></i> {{ 'admin.delete'|trans }}
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3 pt-3 border-top d-flex flex-wrap align-items-center gap-2 small text-muted">
                        <span class="fw-semibold text-body">{{ 'admin.preview_options'|trans }}</span>
                        <label for="terraflowPreviewLocale" class="mb-0">{{ 'admin.preview_locale'|trans }}</label>
                        <select id="terraflowPreviewLocale" class="form-select form-select-sm" style="width:auto;min-width:7rem">
                            <option value="">{{ 'admin.preview_locale_session'|trans }}</option>
                            <option value="de">de</option>
                            <option value="en">en</option>
                        </select>
                        <label for="terraflowPreviewRole" class="mb-0">{{ 'admin.preview_simulated_role'|trans }}</label>
                        <input type="text" id="terraflowPreviewRole" class="form-control form-control-sm" style="max-width:10rem" placeholder="ROLE_…" autocomplete="off">
                        <label for="terraflowPreviewFlags" class="mb-0">{{ 'admin.preview_flags'|trans }}</label>
                        <input type="text" id="terraflowPreviewFlags" class="form-control form-control-sm" style="max-width:10rem" placeholder="a, b" autocomplete="off">
                    </div>
                </div>
            </div>
        </div>

        {{ form_start(form, {'attr': {'id': 'form'}}) }}
        <div class="row g-4">
            <div class="col-12 col-lg-6">
                <div class="admin-card p-4">
                    <h4 class="gradient-text fw-bold mb-4">
                        <i class="bi bi-info-circle me-2"></i>
                        {{ 'admin.category.basic_info'|trans }}
                    </h4>
                    <div class="mb-4">
                        {{ form_label(form.title, 'form.category.title'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                        {{ form_widget(form.title, {'attr': {'class': 'form-control form-control-lg', 'required': 'true'}}) }}
                    </div>
                    <div class="mb-4">
                        {{ form_label(form.parent, 'form.category.parent'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                        {{ form_widget(form.parent, {'attr': {'class': 'form-control'}}) }}
                    </div>
                    <div class="mb-4">
                        {{ form_label(form.priority, 'form.category.priority'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                        {{ form_widget(form.priority, {'attr': {'class': 'form-control'}}) }}
                    </div>
                    <div class="mb-4">
                        {{ form_label(form.routePath, 'form.category.route'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                        {{ form_widget(form.routePath, {'attr': {'class': 'form-control'}}) }}
                        <small class="form-text text-muted">URL-Pfad der Kategorie, z.B. "category/news"</small>
                    </div>
                    <div class="mb-4 form-check">
                        {{ form_widget(form.active, {'attr': {'class': 'form-check-input'}}) }}
                        {{ form_label(form.active, 'form.category.active'|trans, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                    </div>
                    <div class="mb-4 form-check">
                        {{ form_widget(form.showListingMethods, {'attr': {'class': 'form-check-input'}}) }}
                        {{ form_label(form.showListingMethods, 'form.category.show_listing_methods'|trans, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                    </div>
                    <div class="mb-4">
                        {{ form_label(form.permissionRequired, 'form.page.permission_required'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                        {{ form_widget(form.permissionRequired, {'attr': {'class': 'form-control'}}) }}
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <div class="admin-card p-4">
                    <h4 class="gradient-text fw-bold mb-4">
                        <i class="bi bi-file-earmark-text me-2"></i>
                        {{ 'admin.category.content_section'|trans }}
                    </h4>
                    <div class="mb-4">
                        {{ form_label(form.view, 'form.page.content'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                        {{ form_widget(form.view, {'attr': {'class': 'form-control wysiwyg-editor', 'rows': 5, 'data-ce-title': 'form.page.content'|trans }}) }}
                    </div>
                    <div class="mb-4">
                        {{ 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>
        
        <!-- Custom Fields Tabs -->
        {% import 'administration/custom_fields/tabs.html.twig' as customFields %}
        {{ customFields.custom_field_tabs(form, 'category', category.id) }}
        
        {{ form_end(form) }}
    </div>
    <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>

    <script>
        {% if not content_lock_blocked|default(false) %}
        (function categoryLockHb() {
            var urlHb = '{{ path('admin_api_content_lock_heartbeat')|e('js') }}';
            var urlRel = '{{ path('admin_api_content_lock_release')|e('js') }}';
            var payload = JSON.stringify({ entityType: 'category', entityId: {{ category.id }} });
            setInterval(function () {
                fetch(urlHb, { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'same-origin', body: payload });
            }, 55000);
            window.addEventListener('beforeunload', function () {
                fetch(urlRel, { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'same-origin', keepalive: true, body: payload });
            });
        })();
        {% endif %}
        async function handleDeleteCategory(categoryId, categoryTitle) {
            const confirmed = await showDeleteConfirm(`{{ 'admin.category.delete_confirm_prefix'|trans }} "${categoryTitle}"`, {
                warning: '{{ 'admin.category.delete_warning'|trans }}'
            });
            
            if (confirmed) {
                window.location.href = '{{ path('admin_categories_delete', {id: category.id}) }}';
            }
        }
    </script>
{% endblock %}