{% extends "dashboard.html" %}
{% block head %}
    <!-- Datatables -->
    <link rel="preload"
          href="{{ url_for('static', filename='libs/datatables/datatables.min.css') }}"
          as="style" />
    <link rel="stylesheet"
          href="{{ url_for('static', filename='libs/datatables/datatables.min.css') }}"
          nonce="{{ style_nonce }}" />
{% endblock %}
{% block content %}
    <!-- Content -->
    <div class="card table-responsive text-nowrap p-4 min-vh-70">
        <input type="hidden" id="configs_number" value="{{ configs|length }}" />
        <input type="hidden" id="services" value="{{ services }}" />
        <input type="hidden" id="templates" value="{{ db_templates }}" />
        <input type="hidden"
               id="configs_service_selection"
               value="{{ config_service }}" />
        <input type="hidden" id="configs_type_selection" value="{{ config_type }}" />
        <textarea type="hidden"
                  id="columns_preferences_defaults"
                  class="visually-hidden">{{ columns_preferences_defaults['configs']|tojson }}</textarea>
        <textarea type="hidden" id="columns_preferences" class="visually-hidden">{{ columns_preferences|tojson }}</textarea>
        <input type="hidden"
               id="csrf_token"
               name="csrf_token"
               value="{{ csrf_token() }}" />
        <p id="configs-waiting"
           class="text-center relative w-full p-2 text-primary rounded-lg fw-bold"
           data-i18n="status.loading_custom_configs">Loading custom configurations...</p>
        <table id="configs" class="table responsive nowrap w-100 d-none">
            <thead>
                <tr>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="Show the Custom configs' details"
                        data-i18n="tooltip.table.configs.details"></th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="Select all Custom configs"
                        data-i18n="tooltip.table.configs.select_all"></th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The user defined Custom config's name"
                        data-i18n="tooltip.table.configs.name">
                        <span data-i18n="table.header.name">Name</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The Custom config's type"
                        data-i18n="tooltip.table.configs.type">
                        <span data-i18n="table.header.type">Type</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The creation method of the Custom config"
                        data-i18n="tooltip.table.configs.method">
                        <span data-i18n="table.header.method">Method</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The Service associated with the Custom configuration"
                        data-i18n="tooltip.table.configs.service">
                        <span data-i18n="table.header.service">Service</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="Draft status of the Custom configuration"
                        data-i18n="tooltip.table.configs.status">
                        <span data-i18n="table.header.status">Status</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="Indication if the custom config is from a template or not"
                        data-i18n="tooltip.table.configs.template">
                        <span data-i18n="table.header.template">Template</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The Custom config's checksum"
                        data-i18n="tooltip.table.configs.checksum">
                        <span data-i18n="table.header.checksum">Checksum</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The actions that can be performed on the Custom config"
                        data-i18n="tooltip.table.configs.actions">
                        <span data-i18n="table.header.actions">Actions</span>
                    </th>
                </tr>
            </thead>
            <tbody>
                {% set config_types = {
                    "crs": "shield-alt",
                    "modsec_crs": "shield-quarter",
                    "modsec": "shield-alt-2",
                    "stream": "network-chart",
                    "custom": "window-alt"
                } %}
                {% for config in configs %}
                    {% set service_id = config['service_id'] if config['service_id'] else 'global' %}
                    {% set config_id = config['type']|lower ~ '-' ~ service_id.replace('.', '_') ~ '-' ~ config['name'] %}
                    {% if config['type'].startswith('crs') %}
                        {% set config_icon = "shield-alt" %}
                    {% elif config['type'] == 'modsec_crs' %}
                        {% set config_icon = "shield-quarter" %}
                    {% elif config['type'] == 'modsec' %}
                        {% set config_icon = "shield-alt-2" %}
                    {% elif 'stream' in config['type'] %}
                        {% set config_icon = "network-chart" %}
                    {% else %}
                        {% set config_icon = "window-alt" %}
                    {% endif %}
                    <tr>
                        <td></td>
                        <td></td>
                        <td>
                            <a href="{{ url_for("configs") }}/{{ service_id }}/{{ config['type'] }}/{{ config['name'] }}"
                               class="d-flex align-items-center"
                               data-bs-toggle="tooltip"
                               data-bs-placement="bottom"
                               data-bs-original-title="..."
                               data-i18n="{% if config['method'] != 'ui' and not config['template'] or is_readonly %}tooltip.link.view_config{% else %}tooltip.link.edit_config{% endif %}"
                               data-i18n-options='{"name": "{{ config['name'] }}"}'><i class="bx bx-{% if config['method'] != 'ui' and not config['template'] or is_readonly %}show{% else %}edit{% endif %} bx-xs"></i>&nbsp;{{ config["name"] }}</a>
                        </td>
                        <td id="type-{{ config_id }}">
                            <div class="d-flex align-items-center">
                                <i class="bx bx-{{ config_icon }} me-1"></i>
                                {{ config["type"]|upper }}
                            </div>
                        </td>
                        <td>{{ config["method"] }}</td>
                        <td id="service-{{ config_id }}">
                            {% if config["service_id"] %}
                                <a href="{{ url_for("services") }}/{{ config['service_id'] }}"
                                   class="d-flex align-items-center"
                                   data-bs-toggle="tooltip"
                                   data-bs-placement="bottom"
                                   data-bs-original-title="Edit service {{ config['service_id'] }}"
                                   data-i18n="tooltip.link.edit_service"
                                   data-i18n-options='{"service": "{{ config['service_id'] }}"}'><i class="bx bx-edit bx-xs"></i>&nbsp;{{ config["service_id"] }}</a>
                            {% else %}
                                <span class="badge rounded-pill bg-label-secondary"
                                      data-i18n="scope.global">Global</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if config.get("is_draft") %}
                                <span id="status-{{ config_id }}"
                                      class="badge rounded-pill bg-label-secondary d-inline-flex align-items-center"
                                      data-value="draft">
                                    <i class="bx bx-file-blank me-1"></i><span data-i18n="status.draft">Draft</span>
                                </span>
                            {% else %}
                                <span id="status-{{ config_id }}"
                                      class="badge rounded-pill bg-label-primary d-inline-flex align-items-center"
                                      data-value="online">
                                    <i class="bx bx-globe me-1"></i><span data-i18n="status.online">Online</span>
                                </span>
                            {% endif %}
                        </td>
                        <td>
                            {% if config["template"] %}
                                <a href="{{ url_for("templates") }}/{{ config["template"] }}"
                                   class="d-flex align-items-center"
                                   data-bs-toggle="tooltip"
                                   data-bs-placement="bottom"
                                   data-bs-original-title="{% if is_readonly or config["template"] in ["low", "medium", "high", "ui", "api"] %}View{% else %}Edit{% endif %} template {{ config["template"] }}"><i class="bx bx-{% if is_readonly or config["template"] in ["low", "medium", "high", "ui", "api"] %}show{% else %}edit{% endif %} bx-xs"></i>&nbsp;{{ config["template"] }}</a>
                            {% else %}
                                <span class="badge rounded-pill bg-label-secondary"
                                      data-i18n="badge.no_template">No template</span>
                            {% endif %}
                        </td>
                        <td>{{ config["checksum"] }}</td>
                        <td>
                            <div class="d-flex justify-content-evenly">
                                {% set can_edit_config = config['template'] or is_editable_method(config['method']) %}
                                <a role="button"
                                   class="btn btn-primary btn-sm me-1"
                                   href="{{ url_for("configs") }}/{{ service_id }}/{{ config['type'] }}/{{ config['name'] }}"
                                   data-bs-toggle="tooltip"
                                   data-bs-placement="bottom"
                                   data-bs-original-title="..."
                                   data-i18n="{% if not can_edit_config or is_readonly %}tooltip.link.view_config{% else %}tooltip.link.edit_config{% endif %}"
                                   data-i18n-options='{"name": "{{ config['name'] }}"}'>
                                    <i class="bx bx-{% if not can_edit_config or is_readonly %}show{% else %}edit{% endif %} bx-xs"></i>
                                </a>
                                <div {% if is_readonly %}data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Disabled by readonly" data-i18n="tooltip.disabled_readonly"{% endif %}>
                                    <a role="button"
                                       class="btn btn-outline-secondary btn-sm me-1{% if is_readonly %} disabled{% endif %}"
                                       href="{{ url_for("configs") }}/new?clone={{ service_id }}/{{ config['type'] }}/{{ config['name'] }}"
                                       data-bs-toggle="tooltip"
                                       data-bs-placement="bottom"
                                       data-bs-original-title="Clone custom config {{ config['name'] }}"
                                       data-i18n="tooltip.link.clone_config"
                                       data-i18n-options='{"name": "{{ config['name'] }}"}'>
                                        <i class="bx bx-copy-alt bx-xs"></i>
                                    </a>
                                </div>
                                {% set row_selection = [{"service": service_id, "type": config['type'], "name": config['name']}] | tojson %}
                                <a role="button"
                                   class="btn btn-outline-secondary btn-sm me-1 export-config"
                                   href="{{ url_for("configs") }}/export?configs={{ row_selection | urlencode }}"
                                   data-bs-toggle="tooltip"
                                   data-bs-placement="bottom"
                                   data-bs-original-title="Export custom config {{ config['name'] }}"
                                   data-i18n="tooltip.link.export_config"
                                   data-i18n-options='{"name": "{{ config['name'] }}"}'
                                   target="_blank"
                                   rel="noreferrer">
                                    <i class="bx bx-export bx-xs"></i>
                                </a>
                                {% set delete_tooltip_key = 'tooltip.disabled_readonly' if user_readonly else ('tooltip.disabled_db_readonly' if is_readonly else ('tooltip.disabled_by_method' if not can_edit_config else 'tooltip.button.delete_config')) %}
                                {% set delete_tooltip_options = '{"method": "' ~ config['method'] ~ '"}' if not can_edit_config and not is_readonly else '{"name": "' ~ config['name'] ~ '"}' %}
                                <div {% if is_readonly %}data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Disabled by readonly" data-i18n="tooltip.disabled_readonly"{% endif %}>
                                    <button type="button"
                                            data-config-name="{{ config['name'] }}"
                                            data-config-type="{{ config['type'] }}"
                                            data-config-service="{{ config['service_id'] or 'global' }}"
                                            data-value="{{ 'online' if config.get('is_draft') else 'draft' }}"
                                            class="btn btn-outline-secondary btn-sm me-1 convert-config{% if is_readonly %} disabled{% endif %}"
                                            data-bs-toggle="tooltip"
                                            data-bs-placement="bottom"
                                            data-bs-original-title="..."
                                            data-i18n="tooltip.button.convert_config_to_{{ 'online' if config.get('is_draft') else 'draft' }}"
                                            data-i18n-options='{"name": "{{ config['name'] }}"}'>
                                        <i class="bx bx-transfer bx-xs"></i>
                                    </button>
                                </div>
                                <div data-bs-toggle="tooltip"
                                     data-bs-placement="bottom"
                                     data-bs-original-title="..."
                                     data-i18n="{{ delete_tooltip_key }}"
                                     data-i18n-options='{{ delete_tooltip_options }}'>
                                    <button type="button"
                                            data-config-name="{{ config['name'] }}"
                                            data-config-type="{{ config['type'] }}"
                                            data-config-service="{{ config['service_id'] or 'global' }}"
                                            class="btn btn-outline-danger btn-sm me-1 delete-config{% if not can_edit_config or is_readonly %} disabled{% endif %}">
                                        <i class="bx bx-trash bx-xs"></i>
                                    </button>
                                </div>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <div id="feedback-toast"
             class="bs-toast toast fade bg-{% if theme == 'light' %}white{% else %}dark{% endif %} border border-warning d-none"
             role="alert"
             aria-live="assertive"
             aria-atomic="true"
             data-bs-autohide="true">
            <div class="toast-header d-flex align-items-center text-warning">
                <i class="d-block h-auto rounded tf-icons bx bx-xs bx-bell bx-tada me-2"></i>
                <span class="fw-medium me-auto">BunkerWeb Forever</span>
                <small class="text-body-secondary" data-i18n="flash.time.just_now">just now</small>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="toast"
                        aria-label="Close"
                        data-i18n="aria.label.close"></button>
            </div>
            <div class="toast-body" data-i18n="flash.easter_egg">If you read this, it means that you're curious 👀</div>
        </div>
    </div>
    {% if not is_readonly %}
        <div class="modal fade"
             id="modal-convert-configs"
             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.confirm_conversion">Confirm conversion</h5>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"
                                data-i18n="aria.label.close"></button>
                    </div>
                    <form action="{{ url_for("configs") }}/convert" method="POST">
                        <div class="modal-body">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                            <input type="hidden" id="conversion-type" name="convert_to" value="draft" />
                            <input type="hidden"
                                   id="selected-configs-input-convert"
                                   name="configs"
                                   value="" />
                            <div class="alert alert-danger text-center"
                                 role="alert"
                                 data-i18n="modal.body.confirm_configs_conversion">
                                Are you sure you want to convert the selected configs?
                            </div>
                            <div id="selected-configs-convert" class="mb-3"></div>
                        </div>
                        <div class="modal-footer justify-content-center">
                            <button type="submit"
                                    class="btn btn-outline-primary me-2"
                                    data-i18n="button.convert_configs">Convert configs</button>
                            <button type="reset"
                                    class="btn btn-outline-secondary"
                                    data-bs-dismiss="modal"
                                    data-i18n="button.cancel">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal modal-lg fade"
             id="modal-delete-configs"
             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.confirm_deletion">Confirm deletion</h5>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"
                                data-i18n="aria.label.close"></button>
                    </div>
                    <form action="{{ url_for("configs") }}/delete" method="POST">
                        <div class="modal-body">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                            <input type="hidden"
                                   id="selected-configs-input-delete"
                                   name="configs"
                                   value="" />
                            <div class="alert alert-danger text-center"
                                 role="alert"
                                 data-i18n="modal.body.confirm_configs_deletion_alert">
                                Are you sure you want to delete the selected configs?
                            </div>
                            <div id="selected-configs-delete" class="mb-3"></div>
                        </div>
                        <div class="modal-footer justify-content-center">
                            <button type="submit"
                                    class="btn btn-outline-danger me-2"
                                    data-i18n="button.delete">Delete</button>
                            <button type="reset"
                                    class="btn btn-outline-secondary"
                                    data-bs-dismiss="modal"
                                    data-i18n="button.cancel">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal modal-xl fade"
             id="modal-import-configs"
             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.import_configs">Import custom configurations</h5>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"
                                data-i18n="aria.label.close"></button>
                    </div>
                    <form action="{{ url_for("configs") }}/import"
                          method="POST"
                          enctype="multipart/form-data">
                        <div class="modal-body">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                            <div role="button"
                                 id="configs-drag-area"
                                 tabindex="0"
                                 aria-controls="configs-import-file"
                                 aria-label="Select a custom configurations export file or drop one here"
                                 data-i18n-aria-label="aria.label.configs_dropzone"
                                 class="border border-primary border-2 border-dashed rounded d-flex justify-content-center align-items-center h-px-200">
                                <div class="text-center">
                                    <i class="bx bx-lg bxs-cloud-upload text-primary" aria-hidden="true"></i>
                                    <p class="mt-3 fs-5" data-i18n="modal.body.import_configs_dropzone">
                                        Drag and drop your custom configurations export file here or click to select a file.
                                    </p>
                                </div>
                            </div>
                            <input type="file"
                                   id="configs-import-file"
                                   name="configs_file"
                                   accept=".json,application/json"
                                   class="visually-hidden"
                                   required />
                            <div id="configs-import-file-list" class="mt-3"></div>
                            <div class="form-check mt-3">
                                <input class="form-check-input"
                                       type="checkbox"
                                       name="overwrite"
                                       value="yes"
                                       id="configs-import-overwrite" />
                                <label class="form-check-label"
                                       for="configs-import-overwrite"
                                       data-i18n="form.checkbox.overwrite_existing_configs">
                                    Overwrite existing UI/API custom configurations
                                </label>
                            </div>
                            <div class="alert alert-warning text-center mt-3"
                                 role="alert"
                                 data-i18n="modal.body.import_configs_warning">
                                Custom configurations created by the scheduler, autoconf, or templates are always preserved. Only UI/API configurations can be overwritten.
                            </div>
                        </div>
                        <div class="modal-footer justify-content-center">
                            <button type="submit"
                                    class="btn btn-outline-primary me-2"
                                    data-i18n="button.import_configs">Import custom configurations</button>
                            <button type="reset"
                                    class="btn btn-outline-secondary"
                                    data-bs-dismiss="modal"
                                    data-i18n="button.cancel">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    {% endif %}
    <!-- / Content -->
{% endblock %}
{% block scripts %}
    <script src="{{ url_for('static', filename='libs/datatables/datatables.min.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='libs/datatables/plugins/ip-address.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='js/dataTableInit.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='js/pages/configs.js') }}"
            nonce="{{ script_nonce }}"
            defer
            type="module"></script>
{% endblock %}