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

{% macro visualize_sorting(sort_field, sort_direction, field) %}
    {% if sort_field == field %}
        {% if sort_direction == 'asc' %}
        {% set other_direction = 'desc' %}
        {% else %}
        {% set other_direction = 'asc' %}
        {% endif %}
        <a class="text-reset text-decoration-none" href="{{ url_for('.score_event_frames', blockevaluationid=block_evaluation.db_id, kpi=kpi.name, score=score.name, startDate=start_date, endDate=end_date, sort=field, direction=other_direction) }}">
            {{ caller() }}
            {% if sort_direction == 'desc' %}
            <svg class="bi" width="16" height="16" fill="currentColor">
                <use xlink:href="/static/dist/bootstrap-icons.svg#caret-down-fill"/>
            </svg>
            {% else %}
            <svg class="bi" width="16" height="16" fill="currentColor">
                <use xlink:href="/static/dist/bootstrap-icons.svg#caret-up-fill"/>
            </svg>
            {% endif %}
        </a>
    {% else %}
        <a class="text-reset text-decoration-none" href="{{ url_for('.score_event_frames', blockevaluationid=block_evaluation.db_id, kpi=kpi.name, score=score.name, startDate=start_date, endDate=end_date, sort=field, direction=sort_direction) }}">
            {{ caller() }}
            {% if sort_direction == 'desc' %}
            <svg class="bi text-secondary" width="16" height="16" fill="currentColor">
                <use xlink:href="/static/dist/bootstrap-icons.svg#caret-down"/>
            </svg>
            {% else %}
            <svg class="bi text-secondary" width="16" height="16" fill="currentColor">
                <use xlink:href="/static/dist/bootstrap-icons.svg#caret-up"/>
            </svg>
            {% endif %}
        </a>
    {% endif %}
{% endmacro %}

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

{% set title = score.name|capitalize %}

{% block breadcrumb %}
{{
    flows_breadcrumb(block_evaluation, [
        (block_evaluation.name, url_for('flow_univariate.display_dashboard', sourcename=source_name, blockevaluationid=block_evaluation.db_id)),
        title,
    ])
}}
{% endblock %}

{% block main %}
{% call flows_header(block_evaluation, title) %}
<div class="row">
    <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">
    <div class="row">
        <div class="col">
            {% 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 %}
        </div>
        {% if block_evaluation.flow_evaluation.group.flow.origin.value in ['ui', 'control loop'] %}
        <div class="col-lg-auto">
            <a class="btn btn-primary"
                data-bs-toggle="offcanvas"
                href="#add-filter-canvas"
                aria-controls="add-filter-canvas"
                aria-expanded="false">
                Add filter
            </a>
        </div>
        <div class="ts-help-sidebar offcanvas offcanvas-end" tabindex="-1" id="add-filter-canvas">
            <div class="offcanvas-header">
                <h3 class="offcanvas-title h5">Add filter</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" action="{{ url_for('filters.add_filter') }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    {% if source_name is not none %}
                    <input type="hidden" name="sourcename" value="{{ source_name }}">
                    {% endif %}
                    <input type="hidden" name="blockevaluationid" value="{{ block_evaluation.db_id }}">

                    {% if filter_block_name is none %}
                    <div class="alert alert-warning">No filter block was found. A new one will be created.</div>
                    <div class="my-3">
                        <label for="filter_block_name" class="form-label">Filter block name</label>
                        <input type="text" name="filter_block_name" class="form-control" required>
                    </div>
                    {% else %}
                    <input type="hidden" name="filter_block_name" value="{{ filter_block_name }}">
                    {% endif %}

                    {% if event_frame_types|count == 1 %}
                    <input type="hidden" name="event_frame_type" value="{{ event_frame_types[0] }}">
                    {% else %}
                    <div class="my-3">
                        <label class="form-label" for="filter_event_frame_type">Event frame type</label>
                        <select class="form-select" name="event_frame_type" id="filter_event_frame_type">
                            {% for event_frame_type in event_frame_types %}
                            <option value="{{ event_frame_type }}">{{ event_frame_type }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    {% endif %}

                    <div class="my-3">
                        <label class="form-label" for="series">Series</label>
                        <select name="series" class="form-select">
                            <option value="ALL">All series</option>
                            {% for series in all_series %}
                            <option value="{{ series.series_id }}">{{ visualize_series_name(series.name) }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="my-3">
                        <label class="form-label" for="augmentation_strategy">Augmentation strategy</label>
                        <select name="augmentation_strategy" class="form-select">
                            {% for strategy in augmentation_strategies %}
                            <option value="{{ strategy }}">{{ strategy }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="my-3">
                        <button type="submit" class="btn btn-primary">Add filter</button>
                    </div>
                </form>
            </div>
        </div>
        {% endif %}
    </div>


    <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" 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 active" aria-current="page" 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>

<form class="mb-3" id="eventframeselection">
    <input type="hidden" name="score" value="{{ score.name }}">
    <input type="hidden" name="kpi" value="{{ kpi.name }}">
    <input type="hidden" name="sort" value="{{ sort_field }}">
    <input type="hidden" name="direction" value="{{ sort_direction }}">
    <input type="hidden" name="blockevaluationid" value="{{ block_evaluation.db_id }}">
    <div class="row align-items-end gx-2">
        <div class="col-lg">
            <label for="startDateInput" class="col-form-label">Start date</label>
            <input type="datetime-local" step="1" class="form-control" id="startDateInput" name="startDate" data-ts-datetime-value="{{ start_date }}">
        </div>
        <div class="col-lg">
            <label for="endDateInput" class="col-form-label">End date</label>
            <input type="datetime-local" step="1" class="form-control" id="endDateInput" name="endDate" data-ts-datetime-value="{{ end_date }}">
        </div>
        <div class="col-lg-auto mt-lg-0 mt-2">
            <button type="submit" class="btn btn-secondary">List</button>
        </div>
    </div>
</form>

{% if event_frames %}
{{ pagination(
    paging,
    url_for('.score_event_frames', blockevaluationid=block_evaluation.db_id, kpi=kpi.name, score=score.name, startDate=start_date, endDate=end_date, page=paging.page-1, sort=sort_field, direction=sort_direction),
    url_for('.score_event_frames', blockevaluationid=block_evaluation.db_id, kpi=kpi.name, score=score.name, startDate=start_date, endDate=end_date, page=paging.page+1, sort=sort_field, direction=sort_direction)
) }}
<table class="ts-table table table-borderless">
    <thead class="thead-secondary">
        <tr class="border-top border-bottom">
            <th scope="col">
                {% call visualize_sorting(sort_field, sort_direction, 'type') %}
                    Event frame type
                {% endcall %}
            </th>
            <th scope="col">
                {% call visualize_sorting(sort_field, sort_direction, 'start_date') %}
                    Start date
                {% endcall %}
            </th>
            <th scope="col">
                {% call visualize_sorting(sort_field, sort_direction, 'end_date') %}
                    End date
                {% endcall %}
            </th>
            <th scope="col">
                {% call visualize_sorting(sort_field, sort_direction, 'duration') %}
                    Duration
                {% endcall %}
            </th>
            <th scope="col">Visualize</th>
        </tr>
    </thead>
    <tbody>
        {% for frame in event_frames %}
        <tr class="border-bottom">
            <td>
                {{ frame.type }}
            </td>
            <td>{{ frame.start_date|ts_datetime }}</td>
            {% if frame.end_date is not none %}
            <td>{{ frame.end_date|ts_datetime }}</td>
            <td>{{ (frame.end_date - frame.start_date)|timedeltaformat }}</td>
            {% else %}
            <td>-</td>
            <td>-</td>
            {% endif %}
            <td>
                <a class="ts-table-link text-decoration-none text-black" href="{{ url_for('.chart', blockevaluationid=block_evaluation.db_id, seriesid=frame.reference[0].series_id, startDate=frame.start_date, endDate=frame.end_date, context=10) }}">
                    {{ visualize_series(frame.reference[0]) }}
                </a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{{ pagination(
    paging,
    url_for('.score_event_frames', blockevaluationid=block_evaluation.db_id, kpi=kpi.name, score=score.name, startDate=start_date, endDate=end_date, page=paging.page-1, sort=sort_field, direction=sort_direction),
    url_for('.score_event_frames', blockevaluationid=block_evaluation.db_id, kpi=kpi.name, score=score.name, startDate=start_date, endDate=end_date, page=paging.page+1, sort=sort_field, direction=sort_direction)
) }}
{% else %}
<div class="alert alert-info">
    No event frames available in this time frame.
</div>
{% endif %}
{% endblock %}
