{% extends 'timeseer.html' %}

{% from 'data-service-header.html' import data_service_breadcrumb with context %}
{% from 'macros.html' import alerter, bootstrap_icon, info_popover, progress_bar, visualize_check_result, visualize_score, visualize_series_name %}
{% from 'data-service-series-menu.html' import data_service_series_menu with context %}

{% block csp_style %}
'self' 'unsafe-inline'
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='dist/charts.js') }}" nonce="{{ csp_nonce }}"></script>
{% endblock %}

{% block styles %}
<style nonce="{{ csp_nonce }}">
    .score-table {
        table-layout: fixed;
    }
    .score-table .score-grouping {
        width: 20%;
    }
    .score-table .score {
        width: 20%;
    }
    .score-table .checkbox {
        width: 5%;
    }
</style>
{% endblock %}


{% block breadcrumb %}
{{
    data_service_breadcrumb(view_evaluation, [
        (visualize_series_name(series.name), url_for('data_services.show_event_frames', viewevaluationid=view_evaluation.db_id, seriesid=series.series_id, sourcename=source_name)),
        title
    ])
}}
{% endblock %}

{% block main %}
<div class="ts-section py-3 my-3">
    <div class="row align-items-center">
        <div class="col">
            {% block series_title %}

            {% endblock %}
            <p class="h6 text-break">{{ visualize_series_name(series.name) }} <small class="text-muted">{{ series.source }}</small></p>
            <p class="text-muted">
                In {{ view_evaluation.data_service_view.series_set_name }} ({{ view_evaluation.data_service_view.data_service.name }})
                from {{ view_evaluation.data_service_view.data_service.time_range.start_date|ts_datetime }} to {{ view_evaluation.data_service_view.data_service.time_range.end_date|ts_datetime }}
            </p>
        </div>
        <div class="col-lg-auto">
            <div class="btn-toolbar" role="group">
                {% block series_action %}

                {% endblock %}
            </div>
        </div>
    </div>
</div>

<div class="pt-3 my-3">
    {{ alerter () }}

    {% block series_content %}
    {% endblock series_content %}
</div>
{% endblock main %}
