{% extends "dashboard.html" %}
{% block content %}
    <!-- Content -->
    <input type="hidden"
           id="selected-service"
           name="selected_service"
           value="{{ config_service if config_service and config_service != "global" else "global" }}">
    <input type="hidden"
           id="selected-type"
           name="selected_type"
           value="{{ type if type else "HTTP" }}">
    <input type="hidden"
           id="use-modsecurity-global-crs"
           value="{{ "yes" if use_modsecurity_global_crs else "no" }}">
    <input type="hidden"
           id="global-crs-service-scoped-modsec-crs-error"
           value="{{ global_crs_service_scoped_modsec_crs_error }}">
    <input type="hidden"
           id="config-is-draft"
           name="is_draft"
           data-original="{{ is_draft }}"
           value="{{ is_draft }}">
    <input type="hidden"
           id="csrf_token"
           name="csrf_token"
           value="{{ csrf_token() }}">
    {% set config_editable = config_template or not config_method or is_editable_method(config_method) %}
    <div class="card p-1 mb-4 sticky-card">
        <div class="d-flex flex-wrap justify-content-around align-items-center">
            <div class="d-flex">
                {% if (not config_editable) or is_readonly %}
                    <button type="button" class="btn btn-sm btn-secondary ms-2 disabled">
                        <i class="bx bx-xs bx-cube"></i>
                        &nbsp;<span data-i18n="button.service">Service</span>: {{ config_service or "Global" }}
                    </button>
                    <button type="button" class="btn btn-sm btn-secondary ms-2 disabled">
                        <i class="bx bx-xs bx-window"></i>
                        &nbsp;<span data-i18n="form.label.config_type">Config Type</span>: {{ type }}
                    </button>
                {% else %}
                    <div class="dropdown btn-group me-2">
                        <button id="select-service"
                                type="button"
                                class="btn btn-outline-primary dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false">
                            <i class="bx bx-cube"></i>
                            <span class="d-none d-md-inline">&nbsp;<span data-i18n="button.service">Service</span>: <span id="service-display">{{ config_service or "Global" }}</span></span>
                        </button>
                        <ul id="services-dropdown-menu"
                            class="dropdown-menu nav-pills max-vh-60 overflow-auto pt-0"
                            role="tablist">
                            <div class="input-group input-group-merge mb-2">
                                <span class="input-group-text p-2 border-0 border-primary border-bottom shadow-none"><i class="bx fs-6 bx-search"></i></span>
                                <input id="service-search"
                                       type="text"
                                       class="form-control border-0 border-primary border-bottom shadow-none"
                                       placeholder="Search..."
                                       aria-label="Search..."
                                       data-i18n="form.placeholder.search">
                            </div>
                            <li class="nav-item">
                                <button type="button"
                                        class="dropdown-item{% if not config_service or config_service == 'global' %} active{% endif %}"
                                        role="tab"
                                        data-bs-toggle="tab"
                                        data-service="global"
                                        {% if not config_service %}aria-selected="true"{% endif %}
                                        data-i18n="scope.global">Global</button>
                            </li>
                            {% for service in services %}
                                <li class="nav-item">
                                    <button type="button"
                                            class="dropdown-item{% if config_service == service %} active{% endif %}"
                                            role="tab"
                                            data-bs-toggle="tab"
                                            data-service="{{ service }}"
                                            {% if config_service == service %}aria-selected="true"{% endif %}>
                                        {{ service }}
                                    </button>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="dropdown btn-group">
                        <button id="select-type"
                                type="button"
                                class="btn btn-outline-primary dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false">
                            <i class="bx bx-window"></i>
                            <span class="d-none d-md-inline">&nbsp;<span data-i18n="form.label.config_type">Config Type</span>: <span id="type-display">{{ type if type else "HTTP" }}</span></span>
                        </button>
                        <ul id="types-dropdown-menu"
                            class="dropdown-menu nav-pills max-vh-60 overflow-auto pt-0"
                            role="tablist">
                            {% for config_type, data in config_types.items() %}
                                <li id="config-type-{{ config_type }}"
                                    class="nav-item"
                                    data-context="{{ data['context'] }}"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    data-bs-original-title="{{ data['description'] }}"
                                    data-i18n="tooltip.config_type.{{ config_type | lower }}">
                                    <button type="button"
                                            class="dropdown-item{% if config_type == type or not type and loop.index == 1 %} active{% endif %}"
                                            role="tab"
                                            data-bs-toggle="tab"
                                            {% if config_type == type or not type and loop.index == 1 %}aria-selected="true"{% endif %}>
                                        <i class="bx bx-{% if config_type.startswith('CRS') %}shield-alt{% elif config_type == 'MODSEC_CRS' %}shield-quarter{% elif config_type == 'MODSEC' %}shield-alt-2{% elif 'STREAM' in config_type %}network-chart{% else %}window-alt{% endif %}"></i>&nbsp;{{ config_type }}
                                    </button>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}
                {% if config_template %}
                    <button type="button" class="btn btn-sm btn-secondary ms-2 disabled">
                        <i class="bx bx-xs bx-spreadsheet"></i>
                        &nbsp;<span data-i18n="badge.from_template">From template</span>: {{ config_template }}
                    </button>
                {% endif %}
            </div>
            <div class="row align-items-end">
                <div class="col form-floating input-group input-group-merge shadow-none">
                    <input id="config-name"
                           type="text"
                           class="form-control form-control-sm border-0 border-primary border-bottom shadow-none"
                           placeholder="Configuration Name"
                           data-i18n="form.placeholder.config_name"
                           value="{{ name }}"
                           pattern="^[a-zA-Z0-9_\-]{1,255}$"
                           required
                           {% if (not config_editable) or is_readonly %}disabled{% endif %}
                           {% if config_template %}readonly data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Renaming a template-based custom config is not allowed."{% endif %}>
                    <label for="config-name" data-i18n="form.label.configuration_name">Configuration Name</label>
                    <span class="input-group-text border-0 border-primary border-bottom mt-2 pb-0 shadow-none"
                          id="config-name-suffix">.conf</span>
                </div>
            </div>
            <div class="d-flex justify-content-center">
                {% set draft_toggle_disabled = config_name and not is_editable_method(config_method) %}
                <div {% if draft_toggle_disabled %}data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="The draft mode can only be toggled on UI created services" data-i18n="tooltip.draft_toggle_disabled"{% endif %}>
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary toggle-draft me-3 {% if draft_toggle_disabled %}disabled{% endif %}">
                        <i class="bx bx-sm bx-{% if is_draft == 'yes' %}file-blank{% else %}globe{% endif %}"></i>
                        <span class="d-none d-md-inline">&nbsp;
                            {% if is_draft == 'yes' %}
                                <span data-i18n="status.draft">Draft</span>
                            {% else %}
                                <span data-i18n="status.online">Online</span>
                            {% endif %}
                        </span>
                    </button>
                    {% set save_tooltip_key = 'tooltip.disabled_readonly' if user_readonly else ('tooltip.disabled_db_readonly' if is_readonly else ('tooltip.disabled_by_method' if not config_editable else '')) %}
                    {% set save_tooltip_options = '{"method": "' ~ config_method ~ '"}' if not config_editable and not is_readonly else '{}' %}
                </div>
                <div {% if (not config_editable) or is_readonly %}data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="..." data-i18n="{{ save_tooltip_key }}" data-i18n-options='{{ save_tooltip_options }}' {% endif %}>
                    <button type="button"
                            class="btn btn-sm btn-bw-green px-3 save-config{% if (not config_editable) or is_readonly %} disabled{% endif %}">
                        <i class="bx bx-save bx-sm"></i>
                        <span class="d-none d-md-inline">&nbsp;<span data-i18n="button.save">Save</span></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    {% set editor_tooltip_key = 'tooltip.disabled_readonly' if user_readonly else ('tooltip.disabled_db_readonly' if is_readonly else ('tooltip.disabled_by_method' if not config_editable else '')) %}
    {% set editor_tooltip_options = '{"method": "' ~ config_method ~ '"}' if not config_editable and not is_readonly else '{}' %}
    <div class="card position-relative p-4 min-vh-70"
         {% if (not config_editable) or is_readonly %}data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="..." data-i18n="{{ editor_tooltip_key }}" data-i18n-options='{{ editor_tooltip_options }}' {% endif %}>
        <p id="config-waiting"
           class="text-center relative w-full p-2 text-primary rounded-lg fw-bold"
           data-i18n="status.loading_custom_config">Loading custom configuration...</p>
        <div id="config-value"
             data-language="{% if type and type.startswith(('CRS', 'MODSEC')) %}ModSecurity{% else %}NGINX{% endif %}"
             data-method="{{ config_method or 'ui' }}"
             data-template="{{ config_template }}"
             class="visually-hidden ace-editor border rounded position-absolute top-0 start-0 end-0 bottom-0 courier-prime">
            {{ config_value }}
        </div>
    </div>
    <!-- / Content -->
{% endblock %}
{% block scripts %}
    <script src="{{ url_for('static', filename='libs/ace/src-min/ace.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='js/pages/config_edit.js') }}"
            nonce="{{ script_nonce }}"
            defer
            type="module"></script>
{% endblock %}