{% extends 'tags-layout.html' %}
{% from 'macros.html' import display_event_frame_checks, pagination %}

{% 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('prepare.event_frames_details', seriesid=series.series_id, selectedtypes=event_frame_types, 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('prepare.event_frames_details', seriesid=series.series_id, selectedtypes=event_frame_types, 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 %}
{{ prepare_menu('Event frames') }}
{% endblock %}

{% block tags_title %}
<h2 class="h4">Event frames</h2>
{% endblock %}

{% block tags_action %}
<button type="submit"
        class="btn btn-primary"
        form="eventframeselection"
        formmethod="POST"
        formaction="{{ url_for('.export_event_frames_details') }}">
    Export to XLSX
</button>
{% endblock %}

{% block tags_content %}
{% if event_frame_types|count > 1 %}
<p class="text-muted">
    <small>
        {{ event_frame_types|count }} event frame types selected
        <a href="" data-bs-toggle="collapse" data-bs-target="#frame-types-information">(show)</a>.
    </small>
</p>
<div class="collapse mt-3" id="frame-types-information">
    <table class="ts-table table table-borderless">
        <thead class="thead-secondary">
            <tr class="border-top border-bottom">
                <th scope="col">
                    Event frame type
                </th>
                <th scope="col">
                    Generated by
                </th>
            </tr>
        </thead>
        <tbody>
            {% for frame_type in event_frame_types %}
            {% set outer_loop = loop %}
            <tr class="border-bottom">
                <td>{{ frame_type }}</td>
                <td>
                    {% for metadata in checks_metadata[frame_type]|sort(attribute="name") %}
                    <small class="text-muted">{{ metadata.name }}</small>
                    <a data-bs-toggle="offcanvas"
                        href="#score-help-text-{{outer_loop.index}}-{{loop.index}}"
                        aria-controls="score-help-text-{{outer_loop.index}}-{{loop.index}}"
                        aria-expanded="false">{{ bootstrap_icon('question-circle') }}</a>
                    {% if loop.nextitem is defined %}
                    <small>, </small>
                    {% endif %}
                    {% endfor %}
                    {% for metadata in checks_metadata[frame_type]|sort(attribute="name") %}
                    <div class="ts-help-sidebar offcanvas offcanvas-end" tabindex="-1" id="score-help-text-{{outer_loop.index}}-{{loop.index}}">
                        <div class="offcanvas-header">
                            <h3 class="offcanvas-title h5">{{ metadata.name }}</h3>
                            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                        </div>
                        <div class="offcanvas-body">
                        {{ metadata.html_help_text|safe }}
                        </div>
                    </div>
                    {% endfor %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
{{ display_event_frame_checks(checks_metadata[event_frame_types[0]]) }}
{% endif %}

<form class="mb-3" id="eventframeselection">
    <input type="hidden" name="seriesid" value="{{ series.series_id }}">
    <input type="hidden" name="sort" value="{{ sort_field }}">
    <input type="hidden" name="direction" value="{{ sort_direction }}">
    {% for type in event_frame_types %}
        <input type="hidden" name="selectedtypes" value="{{ type }}">
    {% endfor %}
    <div class="row align-items-end gx-2">
        <div class="col-lg">
            <label for="startDateInput" class="col-form-label">Start date</label>
            <input class="form-control bg-white" id="startDateInput" name="startDate" value="{{ start_date }}">
        </div>
        <div class="col-lg">
            <label for="endDateInput" class="col-form-label">End date</label>
            <input class="form-control bg-white" id="endDateInput" name="endDate" 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>

<script>
    flatpickr("#startDateInput", flatpickrOptions);
    flatpickr("#endDateInput", flatpickrOptions);
</script>

{% if event_frames %}
{{ pagination(
    paging,
    url_for('.event_frames_details', seriesid=series.series_id, selectedtypes=event_frame_types, startDate=start_date, endDate=end_date, page=paging.page-1, sort=sort_field, direction=sort_direction),
    url_for('.event_frames_details', seriesid=series.series_id, selectedtypes=event_frame_types, 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">Action</th>
        </tr>
    </thead>
    <tbody>
        {% for frame in event_frames %}
        <tr class="border-bottom">
            <td>{{ frame.type }}</td>
            <td>{{ frame.start_date|datetimeformat }}</td>
            {% if frame.end_date is not none %}
            <td>{{ frame.end_date|datetimeformat }}</td>
            <td>{{ (frame.end_date - frame.start_date)|timedeltaformat }}</td>
            {% else %}
            <td>-</td>
            <td>-</td>
            {% endif %}
            <td>
                <form action="{{ url_for('.chart') }}">
                    <input type="hidden" name="seriesid" value="{{ series.series_id }}">
                    <input type="hidden" name="startDate" value="{{ frame.start_date }}">
                    {% if frame.end_date is not none %}
                    <input type="hidden" name="endDate" value="{{ frame.end_date }}">
                    {% endif %}
                    <input type="hidden" name="context" value="10">
                    <input type="submit" class="btn btn-secondary btn-sm" value="Visualize">
                </form>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{{ pagination(
    paging,
    url_for('.event_frames_details', seriesid=series.series_id, selectedtypes=event_frame_types, startDate=start_date, endDate=end_date, page=paging.page-1, sort=sort_field, direction=sort_direction),
    url_for('.event_frames_details', seriesid=series.series_id, selectedtypes=event_frame_types, startDate=start_date, endDate=end_date, page=paging.page+1, sort=sort_field, direction=sort_direction)
) }}
{% endif %}

{% endblock %}}
