{% extends 'timeseer.html' %}
{% from 'macros.html' import alerter, bootstrap_icon, menu_back %}
{% from 'resources.html' import resource_breadcrumb, resource_menu with context %}

{% block menu %}
{{ resource_menu('KPI sets') }}
{% endblock %}

{% block styles %}
<style nonce="{{ csp_nonce }}">
    .icon{
        vertical-align: -0.125em;
    }
</style>
{% endblock %}

{% block breadcrumb %}
{{
    resource_breadcrumb([
        ("KPI sets", url_for('kpi_sets.show_kpi_sets', sourcename=source_name)),
        kpi_set.name,
    ])
}}
{% endblock %}

{% block main %}
<div class="ts-section pb-3 mb-3">
    <div class="row align-items-center gx-2">
        <div class="col-sm">
            <h2 class="h4">KPIs in KPI set</h2>
            <p class="h6 text-break">{{ kpi_set.name }}</p>
        </div>
        {% if kpi_set.origin.value == 'ui' %}
        <div class="col-sm-auto">
            <div class="btn-toolbar" role="toolbar">
                <a class="btn btn-primary me-2 mb-2 mb-sm-0" data-bs-toggle="offcanvas" href="#KPIsAddOffCanvas">
                    Add KPI
                </a>
                <button class="btn btn-secondary dropdown-toggle" type="button" id="editDropdown" data-bs-toggle="dropdown">
                    Edit
                </button>
                <ul class="dropdown-menu" aria-labelledby="editDropdown">
                    <li>
                        <a class="dropdown-item {%if kpi_set.origin.value != "ui" %}disabled{% endif %}" href="{{ url_for('.rename_kpi_set', kpisetid=kpi_set.db_id, sourcename=source_name) }}">
                        Rename
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item {%if kpi_set.origin.value != "ui"%}disabled{% endif %}"
                        href="{{ url_for('.remove_kpi_set', kpisetid=kpi_set.db_id, sourcename=source_name) }}">
                            Remove
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        {% endif %}
    </div>
</div>

{% if kpi_set.short_help_text != "" or kpi_set.origin.value == 'ui' %}
<div class="pt-3 my-3">
    {% if kpi_set.short_help_text != "" %}
    <p>
        {{ kpi_set.short_help_text }}
        <a data-bs-toggle="offcanvas"
           href="#kpi-set-help-text"
           aria-controls="kpi-help-text"
           aria-expanded="false">
            {{ bootstrap_icon('question-circle') }}
        </a>
    </p>
    {% else %}
        {% if kpi_set.origin.value == 'ui' %}
        <p>
            No description provided
            <a href="{{ url_for('.edit_kpi_set_help_text', kpisetid=kpi_set.db_id, sourcename=source_name) }}">
                (add)
            </a>.
        </p>
        {% endif %}
    {% endif %}

    <div class="offcanvas offcanvas-end" tabindex="-1" id="kpi-set-help-text">
        <div class="offcanvas-header">
            <h3 class="offcanvas-title h5">{{ kpi_set.name }}</h3>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <p>{{ kpi_set.short_help_text }}</p>
            <div>{{ kpi_set.html_help_text|safe }}</div>
            {% if kpi_set.origin.value == 'ui' %}
            <p class="mt-3">
                <a class="btn btn-primary" href="{{ url_for('.edit_kpi_set_help_text', kpisetid=kpi_set.db_id, sourcename=source_name) }}">
                    Edit description
                </a>
            </p>
            {% endif %}
        </div>
    </div>
</div>
{% endif %}

<div class="offcanvas offcanvas-end" tabindex="-1" id="KPIsAddOffCanvas">
    <div class="offcanvas-header">
        <h3 class="offcanvas-title h5">Add KPI</h3>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <form method="POST">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="kpisetid" value="{{ kpi_set.db_id }}">

            <div class="my-3">
                <label for="kpiidSelect" class="form-label">Select KPI</label>
                <select class="form-select" id="kpiidSelect" name="kpiid">
                    {% for kpi in KPIs|sort(attribute="name") %}
                    {% if weights_per_kpi.get(kpi.name) is none %}
                    <option value={{kpi.db_id}}>{{ kpi.name }}</option>
                    {% endif %}
                    {% endfor %}
                </select>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="favorite" name="favorite">
                <label class="form-check-label" for="favorite">
                  Favorite
                </label>
              </div>
            <div class="my-3">
                <button type="submit" class="btn btn-primary">Add KPI</button>
            </div>
        </form>
    </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="score-weight-help-text">
    <div class="offcanvas-header">
        <h3 class="offcanvas-title h5">Score weights</h3>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <p>Weight values determine the relative weight of the score for one check in the KPI total.</p>
        <p>Additionally, weight values affect the color used when showing event frames in the bad actors heatmap:</p>
        <ul>
            <li>Event frames detected using scores with weights equal to or less than 1 appear in yellow.</li>
            <li>Event frames detected using scores with weights greater than 1 appear in red.</li>
        </ul>
    </div>
</div>

<div class="pt-3 my-3">
    {{ alerter() }}
    {% if weights_per_kpi|count > 0 %}
    {% if kpi_set.origin.value == 'ui' %}
    <div class="row gx-2 mb-3">
        <div class="col-sm-auto">
            <div class="btn-group ts-dropdown-select-button">
                <a class="btn border border-secondary dropdown-toggle"
                    href="#"
                    role="button"
                    id="selectionDropdown"
                    data-bs-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false">
                </a>
                <div class="dropdown-menu" aria-labelledby="selectionDropdown">
                    <button type="submit"
                            class="dropdown-item ts-dropdown-action"
                            form="kpiselection"
                            formmethod="POST"
                            formaction="{{ url_for('.remove_multiple_kpis_from_kpi_set', sourcename=source_name) }}"
                            >
                            Remove selected
                    </button>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
    <form id="kpiselection">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        {% if source_name %}
        <input type="hidden" name="sourcename" value="{{ source_name }}">
        {% endif %}
        <input type="hidden" name="kpisetid" value="{{ kpi_set.db_id }}">
        <table class="ts-table {% if kpi_set.origin.value == 'ui' %}ts-table-checkbox{% endif %} table table-borderless mt-3" data-ts-target="selectionDropdown">
            <thead class="table-secondary">
                <tr class="border-bottom">
                    {% if kpi_set.origin.value == 'ui' %}
                    <th scope="col" class="table-check">
                        <input class="form-check-input" type="checkbox">
                    </th>
                    {% endif %}
                    <th scope="col">KPI</th>
                    <th scope="col">Name</th>
                    <th scope="col" >
                        Weight
                        <a data-bs-toggle="offcanvas"
                           href="#score-weight-help-text"
                           aria-controls="score-weight-help-text"
                           aria-expanded="false">
                       {{ bootstrap_icon('question-circle') }}
                     </a>
                    </th>
                </tr>
            </thead>
            {% for kpi_name, weights in weights_per_kpi|dictsort %}
            {% for weight in weights|sort(attribute="name") %}
            <tr class="border-bottom">
                {% set loop_changed = loop.changed(kpi_name) %}
                {% if loop_changed %}
                {% if kpi_set.origin.value == 'ui' %}
                <td rowspan="{{ weights|count }}">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" name="{{ kpi_name }}">
                    </div>
                </td>
                {% endif %}
                <td rowspan="{{ weights|count }}">
                    <input type="hidden" name="kpinames" value="{{ kpi_name }}">
                    <a class="ts-table-link text-decoration-none text-dark" href="{{ url_for('kpis.configure_kpi', kpiname=kpi_name, sourcename=source_name) }}">
                        {{ kpi_name|capitalize }}
                    </a>
                    <form class="d-inline">
                      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                      <input type="hidden" name="kpisetid" value="{{ kpi_set.db_id }}">
                      <input type="hidden" name="kpiid" value="{{ kpi_set_kpis[kpi_name].kpi.db_id }}">
                      <input type="hidden" name="favorite" value="{{ not kpi_set_kpis[kpi_name].favorite }}">
                      <button
                          type="submit"
                          class="btn text-decoration-none p-0 m-0 border-0 shadow-none align-baseline"
                          formaction="{{ url_for('.toggle_favorite', sourcename=source_name) }}"
                          formmethod="POST"
                          {% if kpi_set.origin.value != 'ui' %}
                          disabled
                          {% endif %}
                          >
                          {% if kpi_set_kpis[kpi_name].favorite == 0 %}
                              {{ bootstrap_icon('star', 'icon') }}
                          {% else %}
                              {{ bootstrap_icon('star-fill', 'text-primary icon') }}
                          {% endif %}
                      </button>
                  </form>
                </td>
                {% endif %}
                {% if weight.name is not none %}
                <td>{{ weight.name|capitalize }}</td>
                <td>
                    {% if weight.weight <= 1 %}
                    <span class="me-1">{{ bootstrap_icon('square-fill', 'text-warning align-middle', 12) }}</span>
                    {% else %}
                    <span class="me-1">{{ bootstrap_icon('square-fill', 'text-danger align-middle', 12) }}</span>
                    {% endif %}
                    {{ weight.weight }}
                </td>
                {% else %}
                <td> - </td>
                <td> - </td>
                {% endif %}
            </tr>
            {% endfor %}
            {% endfor %}
        </table>
    </form>
    {% else %}
    <p class="alert alert-info">
        KPI set empty.
    </p>
    {% endif %}
</div>
{% endblock %}
