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

{% block title %}{{ 'admin.create_category'|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-folder-plus me-3"></i>
                                {{ 'admin.create_category'|trans }}
                            </h2>
                            <p class="text-muted mb-0">
                                {{ 'admin.category.new_description'|trans }}
                            </p>
                        </div>
                        <div class="d-flex flex-wrap gap-2 align-items-center">
                            <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>
                            <button type="button" class="btn btn-outline-warning btn-lg" onclick="openAdminLivePreview('form', '{{ path('app_storefront_category_live_preview_new') }}', { 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>
                    </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', null) }}
        
        {{ 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>
{% endblock %}