{% extends 'timeseer.html' %}
{% from 'flows.html' import flows_header with context %}
{% from 'macros.html' import bootstrap_icon, menu, visualize_score %}
{% from 'flow-menu.html' import flow_menu with context %}

{% block styles %}
<style>
    .score-table {
        table-layout: fixed;
    }
</style>
{% endblock %}

{% block menu %}
{{ flow_menu(kpi.name) }}
{% endblock %}

{% block main %}
{% call flows_header(block_evaluation.flow_evaluation, kpi.name) %}
<a  href="{{ url_for('.kpi_evolution', sourcename=source_name, kpi=kpi.name, blockevaluationid=block_evaluation.db_id) }}"
    class="btn btn-primary">
    History
</a>
{% endcall %}

{% if kpi.short_help_text != "" %}
<div class="pt-3 my-3">
    <p>
        {{ kpi.short_help_text }}
        <a data-bs-toggle="offcanvas"
           href="#kpi-help-text"
           aria-controls="kpi-help-text"
           aria-expanded="false">
            {{ bootstrap_icon('question-circle') }}
        </a>
    </p>

    <div class="ts-help-sidebar offcanvas offcanvas-end" tabindex="-1" id="kpi-help-text">
        <div class="offcanvas-header">
            <h3 class="offcanvas-title h5">{{ kpi.name }}</h3>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
        {{ kpi.html_help_text|safe }}
        </div>
    </div>
</div>
{% endif %}

{% if check_scores|count > 0 %}
<div class="my-3">
    <table class="ts-table table table-borderless score-table">
        <thead class="thead-secondary">
            <tr class="border-top border-bottom">
                <th scope="col">Check</th>
                <th scope="col">Score (higher is better)</th>
            </tr>
        </thead>
        <tbody>
            {% for result in check_scores %}
            <tr class="border-bottom">
                <td>
                    <a class="ts-table-link text-dark fw-normal text-decoration-none" href="{{ url_for('.score_event_frames', flowname=flow_name, sourcename=source_name, kpi=kpi.name, score=result.metadata.name, blockevaluationid=block_evaluation.db_id) }}">
                        {{ result.metadata.name|capitalize }}
                    </a>
                    {% if result.metadata.short_help_text %}
                    <span data-bs-toggle="popover"
                          data-bs-placement="right"
                          data-bs-trigger="hover"
                          data-bs-content="{{ result.metadata.short_help_text }}">
                        <svg class="bi" width="16" height="16" fill="currentColor">
                            <use xlink:href="/static/dist/bootstrap-icons.svg#question-circle"/>
                        </svg>
                    </span>
                    {% endif %}
                </td>
                {{ visualize_score(result.score) }}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="my-3">
    <div class="alert alert-info">
        No results to display.
    </div>
</div>
{% endif %}
{% endblock %}
