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

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

{% block main %}
{% call flows_header(block_evaluation.flow_evaluation, score.name|capitalize) %}
<div class="row">
    <div class="col-md-auto gx-4 gx-lg-0">
        <form method="POST" action="{{ url_for('.generate_csv', page=paging.page, sourcename=source_name) }}">
            <input type="hidden" name="kpi" value="{{ kpi.name }}">
            <input type="hidden" name="score" value="{{ score.name }}">
            <input type="hidden" name="blockevaluationid" value="{{ block_evaluation.db_id }}">
            <button type="submit" class="btn btn-secondary">
                Generate CSV
            </button>
        </form>
    </div>
    <div class="col-md-auto mt-2 mt-md-0">
        <a  href="{{ url_for('.score_evolution', sourcename=source_name, kpi=kpi.name, score=score.name, blockevaluationid=block_evaluation.db_id) }}"
            class="btn btn-primary">
            History
        </a>
    </div>
</div>
{% endcall %}

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

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

    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link" href="{{ url_for('.score_summary', blockevaluationid=block_evaluation.db_id, kpi=kpi.name, score=score.name, sourcename=source_name) }}">
                Summary
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="{{ url_for('.score_report', blockevaluationid=block_evaluation.db_id, kpi=kpi.name, score=score.name, sourcename=source_name) }}">
                Time series
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ url_for('.score_event_frames', blockevaluationid=block_evaluation.db_id, kpi=kpi.name, score=score.name, sourcename=source_name) }}">
                Event frames
            </a>
        </li>
    </ul>
</div>

<div class="my-3">
    {% if series_scores|count > 0 %}

    {{ pagination(
        paging,
        url_for('.score_report', flowname=flow_name, sourcename=source_name, kpi=kpi.name, score=score.name, page=paging.page-1, blockid=block_id, blockevaluationid=block_evaluation.db_id),
        url_for('.score_report', flowname=flow_name, sourcename=source_name, kpi=kpi.name, score=score.name, page=paging.page+1, blockid=block_id, blockevaluationid=block_evaluation.db_id)
    ) }}

    <table class="ts-table table table-borderless align-middle">
        <thead class="thead-secondary">
            <tr class="border-top border-bottom">
                <th scope="col">Series name</th>
                <th scope="col">
                    Result
                    {% if score.data_type != 'bool' %}
                    (higher is better)
                    {% endif %}
                </th>
                {% if event_frame_types|count > 0 %}
                <th scope="col">Event frames</th>
                {% endif %}
            </tr>
        </thead>
        <tbody>
            {% for score_value, all_scores in series_scores|groupby('score.score') %}
            {% for score in all_scores|sort(attribute='series.name') %}
            {% set series = score.series %}
            {% set value = score.score %}
            <tr class="border-bottom">
                <td>
                    <a class="ts-table-link text-dark fw-normal text-decoration-none" href="{{ url_for('.display_series', seriesid=series.series_id, blockevaluationid=block_evaluation.db_id) }}">
                        {{ visualize_series_name(series.name) }}
                    </a>
                </td>
                {{ visualize_check_score(value) }}
                {% if event_frame_types|count > 0 %}
                <td>
                    <div class="dropdown">
                        <button type="button"
                                class="btn btn-sm btn-secondary dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false">
                            List event frames
                        </button>
                        <div class="dropdown-menu">
                            {% for type in event_frame_types %}
                            <a class="dropdown-item"
                               href="{{ url_for('.event_frame_detail', seriesid=series.series_id, type=type, blockevaluationid=block_evaluation.db_id) }}">
                                {{ type }}
                            </a>
                            {% endfor %}
                        </div>
                    </div>
                </td>
                {% endif %}
            </tr>
            {% endfor %}
            {% endfor %}
        </tbody>
    </table>
    {{ pagination(
        paging,
        url_for('.score_report', flowname=flow_name, sourcename=source_name, kpi=kpi.name, score=score.name, page=paging.page-1, blockevaluationid=block_evaluation.db_id),
        url_for('.score_report', flowname=flow_name, sourcename=source_name, kpi=kpi.name, score=score.name, page=paging.page+1, blockevaluationid=block_evaluation.db_id)
    ) }}
    {% endif %}
</div>
{% endblock %}
