{% from 'macros/docs_link.html' import docs_url %}
{% set plugins_settings = get_plugins_settings() %}
<div class="card p-1 mb-4 sticky-card">
    <div class="d-flex flex-wrap justify-content-around align-items-center">
        <div class="dropdown btn-group">
            <button id="select-template"
                    type="button"
                    class="btn btn-outline-primary dropdown-toggle"
                    data-bs-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false">
                <i class="bx bx-notepad"></i>
                <span class="d-none d-md-inline">&nbsp;<span data-i18n="navigation.templates">Templates</span></span>
            </button>
            <ul id="templates-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="template-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>
                {% for template, template_data in templates.items() if template != "ui" %}
                    <li class="nav-item">
                        <button type="button"
                                class="dropdown-item{% if loop.index == 1 %} active{% endif %}"
                                role="tab"
                                data-bs-toggle="tab"
                                id="navs-templates-{{ template_data['dom_id'] }}-tab"
                                data-template-id="{{ template }}"
                                data-template-dom-id="{{ template_data['dom_id'] }}"
                                data-bs-target="#navs-templates-{{ template_data['dom_id'] }}"
                                aria-controls="navs-templates-{{ template_data['dom_id'] }}"
                                {% if loop.index == 1 %}aria-selected="true"{% endif %}>
                            {{ template|capitalize }}
                        </button>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="d-flex justify-content-center">
            <button id="reset-template-config"
                    type="button"
                    class="btn btn-sm btn-outline-danger me-3"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    data-bs-original-title="Reset the current template settings"
                    data-i18n="tooltip.reset_template_settings">
                <i class="bx bx-sm bx-reset"></i>
                <span class="d-none d-md-inline">&nbsp;<span data-i18n="button.reset">Reset</span>
            </span>
        </button>
        <button id="fetch-global-config"
                type="button"
                class="btn btn-sm btn-outline-info me-3"
                data-bs-toggle="tooltip"
                data-bs-placement="top"
                data-bs-original-title="Fetch global settings and apply them to the current template"
                data-i18n="tooltip.fetch_global_settings">
            <i class="bx bx-sm bx-download"></i>
            <span class="d-none d-md-inline">&nbsp;<span data-i18n="button.fetch_global">Fetch Global Settings</span>
        </span>
    </button>
    {% if current_endpoint != "global-config" and current_endpoint != 'global-settings' %}
        <div {% if current_endpoint != 'new' and not is_editable_method(service_method) %}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 current_endpoint != 'new' and not is_editable_method(service_method) %}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>
        </div>
    {% endif %}
    <div {% if is_readonly %}data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title={% if user_readonly %}"Readonly mode enabled" data-i18n="tooltip.disabled_readonly"{% else %}"The database is in readonly, therefore the configuration is locked" data-i18n="tooltip.disabled_db_readonly"{% endif %}
         {% endif %}>
        <button type="button"
                class="btn btn-sm btn-bw-green save-settings{% if 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>
<div class="card tab-content m-1 p-2 position-relative">
    {% for template, template_data in templates.items() if template != "ui" %}
        {% set template_plugin_id = template_data.get('plugin_id') %}
        {% set plugin_dom_id = template_plugin_id if template_plugin_id else 'ui' %}
        {% set template_plugin = plugins.get(template_plugin_id) %}
        {% if template_plugin is none %}
            {% set template_plugin = {'id': plugin_dom_id, 'type': 'ui', 'name': 'UI'} %}
        {% endif %}
        <div id="navs-templates-{{ template_data['dom_id'] }}"
             class="tab-pane fade{% if loop.index == 1 %} show active{% endif %}"
             role="tabpanel"
             data-template-id="{{ template }}"
             data-template-dom-id="{{ template_data['dom_id'] }}"
             aria-labelledby="navs-templates-{{ template_data['dom_id'] }}-tab">
            <div class="card-header d-flex align-items-center mw-100">
                <div class="pt-1">
                    <h5 class="card-title d-flex align-items-center don-jose{{ plugin_types[template_plugin['type']].get('text-class', '') }}{{ plugin_types[template_plugin['type']].get('title-class', '') }}">
                        {{ template|capitalize }}&nbsp;－&nbsp;{{ plugin_types[template_plugin["type"]].get('icon', '<img src="' + pro_diamond_url + '"
     alt="Pro plugin"
     width="18px"
     height="15.5px"
     loading="lazy">') |safe }}
                    </h5>
                    <p class="card-subtitle text-muted text-truncate mt-1 courier-prime">{{ template_data["name"] }}</p>
                </div>
            </div>
            <div class="card-body">
                {% if is_editable_method(template_method) or not selected_template or template == selected_template %}
                    {% if template_data["steps"] %}
                        <div class="row">
                            <div class="col-12 col-lg-3 mb-3 mb-lg-0 ps-0 pe-1">
                                <div class="steps-nav-container sticky-top">
                                    <nav class="p-3 template-steps-container align-items-center mw-100{{ plugin_types[template_plugin['type']].get('title-class', '') }}"
                                         aria-label="steps">
                                        <ol class="list-group step-navigation-list" role="tablist">
                                            {% for step in template_data["steps"] %}
                                                <li class="list-group-item step-navigation-item d-flex align-items-center p-2 cursor-pointer{% if loop.index == 1 %} show active{% endif %}"
                                                    role="tab"
                                                    id="step-nav-{{ template_data['dom_id'] }}-{{ loop.index }}"
                                                    data-step="{{ loop.index }}"
                                                    data-template="{{ template }}"
                                                    data-step-id="navs-steps-{{ template_data['dom_id'] }}-{{ loop.index }}"
                                                    aria-controls="navs-steps-{{ template_data['dom_id'] }}-{{ loop.index }}"
                                                    aria-selected="{% if loop.index == 1 %}true{% else %}false{% endif %}"
                                                    tabindex="{% if loop.index == 1 %}0{% else %}-1{% endif %}">
                                                    <div class="step-number-wrapper me-3">
                                                        <span class="btn btn-sm step-number me-0{% if loop.index != 1 %} btn-outline-primary disabled{% else %} btn-primary{% endif %}">{{ loop.index }}</span>
                                                    </div>
                                                    <div class="step-details text-truncate">
                                                        <div class="fw-bold{% if loop.index == 1 %} text-primary{% else %} text-muted{% endif %}">{{ step["title"] }}</div>
                                                        <small class="text-muted d-none d-sm-block">{{ step["subtitle"] }}</small>
                                                    </div>
                                                </li>
                                            {% endfor %}
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                            <div class="col-12 col-lg-9 ps-0 pe-0">
                                <div class="tab-content template-steps-content p-3 align-items-center mw-100{{ plugin_types[template_plugin['type']].get('title-class', '') }}">
                                    <div class="d-flex justify-content-between pb-3">
                                        <div>
                                            <button class="btn btn-primary btn-prev previous-step visually-hidden"
                                                    data-template="{{ template }}"
                                                    type="button">
                                                <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
                                                <span class="align-middle d-sm-inline-block d-none me-sm-1"
                                                      data-i18n="step.previous">Previous</span>
                                            </button>
                                        </div>
                                        <div>
                                            <button class="btn btn-primary btn-next next-step{% if template_data['steps']|length == 1 %} visually-hidden{% endif %}"
                                                    data-template="{{ template }}"
                                                    type="button">
                                                <span class="align-middle d-sm-inline-block d-none me-sm-1"
                                                      data-i18n="step.next">Next</span>
                                                <i class="bx bx-chevron-right bx-sm me-sm-n2"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="step-content-wrapper">
                                        {% for step in template_data["steps"] %}
                                            <div id="navs-steps-{{ template_data['dom_id'] }}-{{ loop.index }}"
                                                 class="ps-1 pe-1 tab-pane fade{% if loop.index == 1 %} show active{% endif %}"
                                                 role="tabpanel"
                                                 data-step="{{ loop.index }}"
                                                 data-template-id="{{ template }}"
                                                 data-template-dom-id="{{ template_data['dom_id'] }}"
                                                 aria-labelledby="step-nav-{{ template_data['dom_id'] }}-{{ loop.index }}">
                                                <div class="pt-1 pb-4">
                                                    <h5 class="mb-1 fw-bold{{ plugin_types[template_plugin['type']].get('text-class', '') }}">{{ step["title"] }}</h5>
                                                    <p class="card-subtitle text-muted">{{ step["subtitle"] }}</p>
                                                </div>
                                                <div class="row pb-0">
                                                    {% for setting in step["settings"] %}
                                                        {% set setting_id_prefix = template + "-setting-" + plugin_dom_id +"-" %}
                                                        {% set setting_config = config.get(setting, {}) %}
                                                        {% set setting_data = plugins_settings.get(setting, {}) %}
                                                        {% set setting_default = setting_data.get("default", "") %}
                                                        {% set setting_value = setting_config.get("value", setting_default) %}
                                                        {% set setting_method = setting_config.get("method", "default") %}
                                                        {% set setting_template = setting_config.get("template", "") %}
                                                        {% set disabled = not is_editable_method(setting_method, allow_default=True) and (current_endpoint == "global-config" or current_endpoint == "global-settings" or not setting_config.get("global")) %}
                                                        {% set required = setting == "SERVER_NAME" %}
                                                        {% if current_endpoint == "new" %}
                                                            {% set disabled = false %}
                                                            {% if not clone %}
                                                                {% set setting_value = template_data["settings"].get(setting, setting_default) %}
                                                            {% endif %}
                                                        {% endif %}
                                                        {% if is_readonly %}
                                                            {% set disabled = true %}
                                                            {% set setting_method = "readonly" %}
                                                        {% endif %}
                                                        <div class="col-12 col-sm-6 col-lg-4 pb-3"
                                                             {% if disabled %}data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Disabled by {{ setting_method }}"{% endif %}>
                                                            <div class="d-flex justify-content-between align-items-center">
                                                                <label id="label-{{ template }}-setting-{{ plugin_dom_id }}-{{ setting_data['id'] }}"
                                                                       for="{{ template }}-setting-{{ plugin_dom_id }}-{{ setting_data['id'] }}"
                                                                       class="form-label fw-semibold text-truncate">
                                                                    {{ setting_data["label"] }}
                                                                </label>
                                                                <div class="d-flex align-items-center">
                                                                    {% if (current_endpoint == "global-config" or current_endpoint == "global-settings") and setting_data["context"] == "multisite" %}
                                                                        <a role="badge"
                                                                           href='{{ docs_url("/concepts", "#multisite-mode") }}'
                                                                           class="badge badge-center rounded-pill bg-secondary d-flex align-items-center justify-content-center p-1 me-1 docs-link"
                                                                           data-endpoint="/concepts"
                                                                           data-fragment="#multisite-mode"
                                                                           data-bs-toggle="tooltip"
                                                                           data-bs-placement="top"
                                                                           data-bs-original-title="Multisite setting"
                                                                           target="_blank"
                                                                           rel="noopener">
                                                                            <span class="bx bx-server bx-xs"></span>
                                                                        </a>
                                                                    {% endif %}
                                                                    {% if setting_method == "api" %}
                                                                        <span class="badge badge-center rounded-pill bg-info-subtle text-dark d-flex align-items-center justify-content-center p-1 me-1"
                                                                              data-bs-toggle="tooltip"
                                                                              data-bs-placement="top"
                                                                              data-bs-original-title="Managed via API"
                                                                              data-i18n="badge.managed_via_api">
                                                                            <span class="bx bx-code-curly bx-xs"></span>
                                                                        </span>
                                                                    {% endif %}
                                                                    {% if setting_config.get("clone") %}
                                                                        <span class="badge badge-center rounded-pill bg-primary-subtle text-dark d-flex align-items-center justify-content-center p-1 me-1"
                                                                              data-bs-toggle="tooltip"
                                                                              data-bs-placement="top"
                                                                              data-bs-original-title="Cloned from service {{ clone }}">
                                                                            <span class="bx bx-copy-alt bx-xs"></span>
                                                                        </span>
                                                                    {% elif current_endpoint not in ("new", "global-config", "global-settings") and setting_config.get("global") and setting_value != setting_default %}
                                                                        <span class="badge badge-center rounded-pill bg-primary-subtle text-dark d-flex align-items-center justify-content-center p-1 me-1"
                                                                              data-bs-toggle="tooltip"
                                                                              data-bs-placement="top"
                                                                              data-bs-original-title="From global settings">
                                                                            <span class="bx bx-globe bx-xs"></span>
                                                                        </span>
                                                                    {% endif %}
                                                                    <span class="badge badge-center rounded-pill bg-info-subtle text-dark d-flex align-items-center justify-content-center p-1 me-1 visually-hidden global-override-badge"
                                                                          data-bs-toggle="tooltip"
                                                                          data-bs-placement="top"
                                                                          data-bs-original-title="Value from global settings"
                                                                          data-i18n="tooltip.value_from_global">
                                                                        <i class="bx bx-download bx-xs"></i>
                                                                    </span>
                                                                    {% if setting_value != template_data["settings"].get(setting, setting_default) %}
                                                                        <span class="badge badge-center rounded-pill bg-warning-subtle text-dark d-flex align-items-center justify-content-center p-1 me-1"
                                                                              data-bs-toggle="tooltip"
                                                                              data-bs-placement="top"
                                                                              title="Value differs from template default"
                                                                              data-i18n="tooltip.different_from_template">
                                                                            <i class="bx bx-edit-alt bw-xs"></i>
                                                                        </span>
                                                                    {% elif setting_template %}
                                                                        <span class="badge badge-center rounded-pill bg-secondary d-flex align-items-center justify-content-center p-1 me-1"
                                                                              data-bs-toggle="tooltip"
                                                                              data-bs-placement="top"
                                                                              data-bs-original-title="From template: {{ setting_template }}">
                                                                            <span class="bx bx-spreadsheet bx-xs"></span>
                                                                        </span>
                                                                    {% endif %}
                                                                    <span class="badge rounded-pill bg-secondary-subtle text-dark d-flex align-items-center justify-content-center p-1"
                                                                          data-bs-toggle="tooltip"
                                                                          data-bs-placement="top"
                                                                          data-bs-original-title="{{ setting_data['help'] }}">
                                                                        <span class="bx bx-question-mark bx-xs"></span>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                            <input id="{{ setting_id_prefix }}{{ setting_data['id'] }}{{ setting_id_suffix }}-template"
                                                                   type="hidden"
                                                                   value="{{ template_data['settings'].get(setting, setting_default) }}">
                                                            {% if setting_data["type"] == "select" %}
                                                                {% include "models/select_setting.html" %}
                                                            {% elif setting_data["type"] == "multiselect" %}
                                                                {% include "models/multiselect_setting.html" %}
                                                            {% elif setting_data["type"] == "multivalue" %}
                                                                {% include "models/multivalue_setting.html" %}
                                                            {% elif setting_data["type"] == "check" %}
                                                                {% include "models/checkbox_setting.html" %}
                                                            {% else %}
                                                                {% include "models/input_setting.html" %}
                                                            {% endif %}
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                                {% set step_configs = step.get("configs") %}
                                                {% if step_configs %}
                                                    <div class="pt-1 pb-4">
                                                        <h5 class="mb-1 fw-bold{{ plugin_types[template_plugin['type']].get('text-class', '') }}"
                                                            data-i18n="settings.custom_config.title"
                                                            data-data-i18n-options='{"step_length": {{ step_configs|length }}}'>
                                                            Custom configuration
                                                            {% if step_configs|length > 1 %}s{% endif %}
                                                        </h5>
                                                    </div>
                                                    {% for step_config in step_configs %}
                                                        {% set step_config_id = template + "-config-" + plugin_dom_id + "-" + step_config.replace("/", "-").replace(".conf", "") %}
                                                        {% set step_config_value = configs.get(current_endpoint + "_" + step_config.replace(".conf", "").replace("/", "_")) %}
                                                        {% set step_config_method = "ui" %}
                                                        {% if step_config_value is none %}
                                                            {% set step_config_value = template_data["configs"].get(step_config, "") %}
                                                        {% else %}
                                                            {% set step_config_method = step_config_value["method"] %}
                                                            {% set step_config_value = step_config_value["data"].decode("utf-8") %}
                                                        {% endif %}
                                                        <div class="mb-3 pb-6 position-relative h-vh-40"
                                                             {% if is_readonly %}data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title={% if user_readonly %}"Readonly mode enabled" data-i18n="tooltip.disabled_readonly"{% else %}"The database is in readonly, therefore the configuration is locked" data-i18n="tooltip.disabled_db_readonly"{% endif %}
                                                             {% endif %}>
                                                            <label for="{{ step_config_id }}" class="form-label fw-semibold fs-6">{{ step_config }}</label>
                                                            <textarea id="{{ step_config_id }}-default" class="visually-hidden">{{ template_data["configs"].get(step_config, "") }}</textarea>
                                                            <textarea id="{{ step_config_id }}-value" class="visually-hidden">{{- step_config_value -}}</textarea>
                                                            <div id="{{ step_config_id }}"
                                                                 aria-labelledby="label-{{ step_config_id }}"
                                                                 data-language="{% if step_config.startswith(('crs', 'modsec')) %}ModSecurity{% else %}NGINX{% endif %}"
                                                                 data-name="CUSTOM_CONF_{{ step_config.split("/")[0] |upper }}_{{ step_config.split("/")[1] .replace(".conf", "") }}"
                                                                 data-method="{% if is_readonly %}readonly{% else %}{{ step_config_method }}{% endif %}"
                                                                 data-source="#{{ step_config_id }}-value"
                                                                 class="ace-editor border rounded position-absolute top-0 start-0 end-0 bottom-0 mt-6">
                                                            </div>
                                                        </div>
                                                    {% endfor %}
                                                {% endif %}
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% else %}
                        <div class="text-center">
                            <h5 class="text-dark fw-bold mt-5" data-i18n="status.no_steps">No Steps Available</h5>
                            <p class="text-muted" data-i18n="status.no_steps_description">This template does not have any steps to configure.</p>
                        </div>
                    {% endif %}
                {% else %}
                    <div class="text-center">
                        <h5 class="text-dark fw-bold mt-5"
                            data-i18n="status.template_in_use"
                            data-i18n-options='{"template": "{{ selected_template }}", "method": "{{ template_method }}"}'>
                            This service currently uses the "{{ selected_template }}" template which is managed via "{{ template_method }}".
                        </h5>
                        <p class="text-muted" data-i18n="status.template_in_use_description">
                            Changes outside the current template are not allowed. Please make changes using the current template or switch to Advanced/Raw mode.
                        </p>
                    </div>
                {% endif %}
            </div>
        </div>
    {% endfor %}
</div>
<div class="modal fade"
     id="modal-reset-template-config"
     data-bs-backdrop="static"
     tabindex="-1"
     aria-hidden="true"
     role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" data-i18n="modal.title.reset_template_config">Reset Template Configuration?</h5>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                        data-i18n="aria.label.close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger text-center"
                     role="alert"
                     data-i18n="modal.body.reset_template_alert">
                    Are you sure you want to reset the current template settings and custom configurations?
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button id="confirm-reset-template-config"
                        class="btn btn-outline-danger me-2"
                        data-bs-dismiss="modal"
                        data-i18n="modal.button.reset_template_confirm">Reset Template Configuration</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade"
     id="modal-fetch-global-config"
     data-bs-backdrop="static"
     tabindex="-1"
     aria-hidden="true"
     role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" data-i18n="modal.title.fetch_global_settings">Apply Global Settings?</h5>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                        data-i18n="aria.label.close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info" role="alert">
                    <div class="fw-bold" data-i18n="modal.body.fetch_global_settings_bold">
                        This will fetch the global settings and apply them to the current template.
                    </div>
                    <ul class="mt-2 mb-0 ps-3">
                        <li data-i18n="modal.body.fetch_global_settings_point_1">Only settings present in this template are updated.</li>
                        <li data-i18n="modal.body.fetch_global_settings_point_2">Values identical to defaults are ignored.</li>
                        <li data-i18n="modal.body.fetch_global_settings_point_3">SERVER_NAME is never overridden.</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button id="confirm-fetch-global-config"
                        class="btn btn-outline-info"
                        data-bs-dismiss="modal"
                        data-i18n="modal.button.fetch_global_settings_confirm">Apply global settings</button>
            </div>
        </div>
    </div>
</div>