{% from 'macros/docs_link.html' import docs_url %}
{% 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 p-1 mb-4 sticky-card text-nowrap">
        <div class="card-header d-flex justify-content-between align-items-center mw-100">
            <div class="pt-1 flex-grow-1 me-2" style="min-width: 0">
                <h5 class="card-title d-inline don-jose{{ plugin_types[plugin['type']].get('text-class', '') }}{{ plugin_types[plugin['type']].get('title-class', '') }}">
                    {{ plugin["name"] }}&nbsp;－&nbsp;v{{ plugin["version"]
                    }}&nbsp;－&nbsp;{{ plugin_types[plugin["type"]].get('icon', '<img src="' + pro_diamond_url + '"
     alt="Pro plugin"
     width="18px"
     height="15.5px" />') |safe }}
                </h5>
                <p class="card-subtitle text-muted text-truncate mt-1 courier-prime">{{ plugin["description"] }}</p>
            </div>
            <div class="d-flex flex-grow-0 flex-shrink-0 justify-content-end align-items-center">
                {% if plugin['type'] == 'core' %}
                    {% set plugin_endpoint = "/features" %}
                    {% set plugin_fragment = '#' + ('global-settings' if plugin['id'] == 'general' else plugin['id']) %}
                {% else %}
                    {% set plugin_endpoint = "/plugins" %}
                    {% set plugin_fragment = "" %}
                {% endif %}
                <a href="{{ docs_url(plugin_endpoint, plugin_fragment) }}"
                   class="btn btn-sm btn-primary rounded-pill ms-2 docs-link"
                   target="_blank"
                   rel="noopener"
                   data-endpoint="{{ plugin_endpoint }}"
                   data-fragment="{{ plugin_fragment }}">
                    <i class="bx bx-link"></i><span class="d-none d-md-inline">&nbsp;More info</span>
                </a>
            </div>
        </div>
    </div>
    {% set base_flags_url = url_for('static', filename='img/flags') %}
    <input type="hidden" id="base_flags_url" value="{{ base_flags_url }}" />
    {% if not is_used %}
        <div class="d-flex align-items-center justify-content-center">
            <div class="text-center text-primary">
                <p class="text-center relative w-full p-2 text-primary rounded-lg fw-bold"
                   data-i18n="plugin.page.status.deactivated">
                    Plugin is deactivated, therefore no information is available.
                </p>
            </div>
        </div>
    {% elif not is_metrics %}
        <div class="d-flex align-items-center justify-content-center">
            <div class="text-center text-primary">
                <p class="text-center relative w-full p-2 text-primary rounded-lg fw-bold"
                   data-i18n="plugin.page.status.metrics_deactivated">
                    Metrics plugin isn't activated, therefore no information is available.
                </p>
            </div>
        </div>
    {% elif no_page %}
        <div class="d-flex align-items-center justify-content-center">
            <div class="text-center text-primary">
                <p class="text-center relative w-full p-2 text-primary rounded-lg fw-bold"
                   data-i18n="plugin.page.status.dedicated_page_unavailable">
                    This plugin is managed on a dedicated page that isn't loaded yet. Restart the web UI to access it.
                </p>
            </div>
        </div>
    {% elif plugin_page and "Plugin page uses old template" not in plugin_page %}
        {{
        plugin_page|safe }} {% elif pre_render.get("status") == "ko" or
        (pre_render.get("data") is mapping and "error" in pre_render.get("data")) %}
        <div class="d-flex align-items-center justify-content-center">
            <div class="text-center text-primary">
                <p class="text-center relative w-full p-2 text-primary rounded-lg fw-bold">
                    <span data-i18n="plugin.page.status.pre_render_error">Pre-rendering error</span>
                    {% set pre_render_detail = pre_render.get("data", {}).get("error") if pre_render.get("data") is mapping else none %}
                    {% if pre_render_detail or pre_render.get("message") %}: {{ pre_render_detail or pre_render.get("message") }}{% endif %}
                </p>
            </div>
        </div>
    {% else %}
        {% if pre_render.get("status", "ko") == "ok" and
            pre_render.get("data") is mapping and "error" not in pre_render.get("data", {})
            %}
            <div class="row g-4">
                {% for key, value in pre_render.get("data", {}).items() %}
                    {% if
                        key.startswith("ping_") %}
                        {% set up = value.get("value") in ('up', 'yes',
                                                'success', 'true') %}
                        <div class="{{ value.get('col-size', 'col-12 col-md-4') }}">
                            <div class="card p-4 position-relative shadow-md rounded-3 {{ value.get('card-classes', '') }}">
                                <i class="bx bx-{% if up %}up{% else %}down{% endif %}-arrow-circle bx-sm position-absolute top-0 end-0 m-3 text-{% if up %}success{% else %}danger{% endif %}"></i>
                                <div class="card-header p-1">
                                    <div class="card-title mb-0">
                                        <h5 class="mb-1 me-2 don-jose {{ value.get('title-classes', '') }}">{{ value.get('title', 'STATUS') }}</h5>
                                    </div>
                                </div>
                                <div class="card-body position-relative pb-0">
                                    <div class="d-flex align-items-center justify-content-center h-100">
                                        <div class="text-center mt-2">
                                            <p class="g-3 p-2 text-{% if up %}success{% else %}danger{% endif %} rounded-lg fw-bold">
                                                {{ 'Active' if up else 'Inactive' }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% elif key.startswith(("info_", "date_", "count_", "counter_")) %}
                        <div class="{{ value.get('col-size', 'col-12 col-md-4') }}">
                            <div class="card p-4 position-relative shadow-md rounded-3 {{ value.get('card-classes', '') }}">
                                {% set svg_color = value.get("svg_color") %}
                                <i class='bx bx-{% if key.startswith("info_") %}info-circle{% elif key.startswith("date_") %}calendar{% else %}slider-alt{% endif %} bx-sm position-absolute top-0 end-0 m-3{% if svg_color %} text-{{ svg_color }}{% endif %}'></i>
                                <div class="card-header p-1">
                                    <div class="card-title mb-0">
                                        <h5 class="mb-1 me-2 don-jose {{ value.get('title-classes', '') }}">{{ value.get("title") }}</h5>
                                    </div>
                                </div>
                                <div class="card-body position-relative">
                                    {% if key.startswith("info_") %}
                                        <div class="d-flex align-items-center justify-content-center h-100">
                                            <div class="text-center mt-2">
                                                {% if value.get("secret") %}
                                                    <div class="d-flex align-items-center justify-content-center gap-2 mb-1">
                                                        <p class="card-text mb-0 courier-prime secret-field" data-secret="{{ value.get('value') }}">••••••••••••</p>
                                                        <button type="button" class="btn btn-sm btn-outline-secondary p-1 lh-1 secret-toggle" aria-label="Toggle visibility" title="Toggle visibility">
                                                            <i class="bx bx-show bx-xs"></i>
                                                        </button>
                                                    </div>
                                                {% else %}
                                                    <p class="card-text mb-1">{{ value.get("value") }}</p>
                                                {% endif %}
                                                {% set description = value.get("description") %}
                                                {% if description
                                                    %}
                                                    <p class="card-text text-muted mb-0">{{ value.get("description") }}</p>
                                                {% endif %}
                                            </div>
                                        </div>
                                    {% elif key.startswith("date_") %}
                                        <div class="d-flex align-items-center justify-content-center h-100">
                                            <div class="text-center mt-2">
                                                <p class="g-3 p-2 text-primary rounded-lg fw-bold date-field">{{ value.get("value") }}</p>
                                            </div>
                                        </div>
                                    {% else %}
                                        <div class="d-flex align-items-center justify-content-center h-100">
                                            <div class="text-center mt-2">
                                                <p class="card-text mb-0">{{ human_readable_number(value.get("value") ) }}</p>
                                            </div>
                                        </div>
                                    {% endif %}
                                    {% set subtitle = value.get("subtitle") %}
                                    {% if subtitle %}
                                        <small class="position-absolute bottom-0 end-0 text-{{ value.get('subtitle_color', 'muted') }}">{{ subtitle }}</small>
                                    {% endif %}
                                </div>
                                {% if key.startswith("date_") %}
                                    <span class="position-absolute bottom-0 start-50 translate-middle badge rounded-pill bg-secondary">
                                        TZ:
                                        <script nonce="{{ script_nonce }}">document.write(Intl.DateTimeFormat().resolvedOptions().timeZone);</script>
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    {% elif key.startswith(("top_", "list_")) %}
                        <div class="{{ value.get('col-size', 'col-12 col-md-8') }}">
                            <div class="card p-4 position-relative shadow-md rounded-3 h-100 {{ value.get('card-classes', '') }}">
                                {% set svg_color = value.get("svg_color") %}
                                <i class='bx bx-list-{% if key.startswith("top_") %}ol{% else %}ul{% endif %} bx-sm position-absolute top-0 end-0 m-3{% if svg_color %} text-{{ svg_color }}{% endif %}'></i>
                                <div class="card-header p-1">
                                    <div class="card-title mb-0">
                                        <h5 class="mb-1 me-2 don-jose {{ value.get('title-classes', '') }}">{{ key.replace('_', ' ') }}</h5>
                                    </div>
                                </div>
                                <div class="card-body p-0">
                                    {% if value.get("data") %}
                                        {% if key.startswith("top_") %}
                                            {% set
                                            top_order = value.get("order", {"column": "0", "dir": "desc"}) %}
                                            <div id="table-{{ key.replace('_', '-') }}-order" class="visually-hidden">{{ top_order|tojson }}</div>
                                        {% endif %}
                                        <div id="table-{{ key.replace('_', '-') }}-types" class="visually-hidden">{{ value.get('types', {}) |tojson }}</div>
                                        <div class="card table-responsive text-nowrap">
                                            <table id="table-{{ key.replace('_', '-') }}"
                                                   class="table w-100 d-none"
                                                   data-table-key="{{ key }}">
                                                <thead>
                                                    <tr>
                                                        {% set ns_list = namespace(size=0) %}
                                                        {% for val_key in value['data'] %}
                                                            <th>{{ val_key|trim }}</th>
                                                            {% set ns_list.size = value['data'][val_key]|length if
                                                                                                                        value['data'][val_key]|length > ns_list.size else ns_list.size %}
                                                        {% endfor %}
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% for n in range(ns_list.size) %}
                                                        <tr>
                                                            {% for val_key, items in value['data'].items() %}
                                                                {% set cell_value = items[n]|trim if n < items|length else '' %}
                                                                {% if val_key|lower == 'date' %}
                                                                    <td class="date-field" data-date-iso="{{ cell_value }}">{{ cell_value }}</td>
                                                                {% else %}
                                                                    <td>{{ cell_value }}</td>
                                                                {% endif %}
                                                            {% endfor %}
                                                        </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                        <input type="hidden"
                                               id="table-{{ key.replace('_', '-') }}-length"
                                               value="{{ ns_list.size }}" />
                                    {% else %}
                                        <div class="d-flex align-items-center justify-content-center h-100">
                                            <div class="text-center mt-2">
                                                <p class="g-3 p-2 text-primary rounded-lg fw-bold"
                                                   data-i18n="status.no_data">No data to show</p>
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        {% else %}
            <div class="d-flex align-items-center justify-content-center">
                <div class="text-center text-primary">
                    <p class="text-center relative w-full p-2 text-primary rounded-lg fw-bold"
                       data-i18n="plugin.page.status.no_content">
                        This plugin does not provide an embedded page.
                    </p>
                </div>
            </div>
        {% endif %}
    {% 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/plugin_page.js') }}"
            nonce="{{ script_nonce }}"
            defer
            type="module"></script>
{% endblock %}