{% extends 'timeseer.html' %}

{% from 'macros.html' import alerter %}
{% from 'resources.html' import resource_breadcrumb, resource_menu with context %}

{% block menu %}
{{ resource_menu('Data services') }}
{% endblock %}

{% block breadcrumb %}
{{
    resource_breadcrumb([
        ("Data services", url_for('data_services.list_data_services', sourcename=source_name)),
        data_service.name,
    ])
}}
{% endblock %}

{% block main %}
<div class="ts-section pb-3 mb-3">
    <div class="row align-items-center gx-2">
        <div class="col-sm">
            <h2 class="h4">Data service</h2>
            <p class="h6 text-break">{{ data_service.name }}</p>
            <p class="text-muted">
                From {{ data_service.time_range.start_date|ts_datetime }} to {{ data_service.time_range.end_date|ts_datetime }}
            </p>
        </div>
        {% if data_service.origin.value == 'ui' %}
        <div class="col-sm-auto">
            <div class="btn-toolbar" role="toolbar">
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="editDropdown" data-bs-toggle="dropdown">
                        Edit
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="editDropdown">
                        <li>
                            <a class="dropdown-item {%if data_service.origin.value != "ui" %}disabled{% endif %}" href="{{ url_for('.rename_data_service', dataservicename=data_service.name, sourcename=source_name) }}">
                                Rename
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item {%if data_service.origin.value != "ui" %}disabled{% endif %}" href="{{ url_for('.edit_data_service_time_range', dataservicename=data_service.name, sourcename=source_name) }}">
                                Edit time range
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item {%if data_service.origin.value != "ui" %}disabled{% endif %}"
                            href="{{ url_for('.remove_data_service', dataservicename=data_service.name, sourcename=source_name) }}">
                                Remove
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% if data_service.short_help_text != "" or data_service.origin.value == 'ui' %}
<div class="pt-3 my-3">
    {% if data_service.short_help_text != "" %}
    <p>
        {{ data_service.short_help_text }}
        <a data-bs-toggle="offcanvas"
           href="#data-service-help-text"
           aria-controls="data-service-help-text"
           aria-expanded="false">
            {{ bootstrap_icon('question-circle') }}
        </a>
    </p>
    {% else %}
        {% if data_service.origin.value == 'ui' %}
        <p>
            No description provided
            <a href="{{ url_for('.edit_data_service_help_text', dataserviceid=data_service.db_id, sourcename=source_name) }}">
                (add)
            </a>.
        </p>
        {% endif %}
    {% endif %}

    <div class="offcanvas offcanvas-end" tabindex="-1" id="data-service-help-text">
        <div class="offcanvas-header">
            <h3 class="offcanvas-title h5">{{ data_service.name }}</h3>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <p>{{ data_service.short_help_text }}</p>
            <div>{{ data_service.html_help_text|safe }}</div>
            {% if data_service.origin.value == 'ui' %}
            <p class="mt-3">
                <a class="btn btn-primary" href="{{ url_for('.edit_data_service_help_text', dataserviceid=data_service.db_id, sourcename=source_name) }}">
                    Edit description
                </a>
            </p>
            {% endif %}
        </div>
    </div>
</div>
{% endif %}
<div class="my-3 py-3">
    {{ alerter() }}
    <form id="dataserviceselection" method="POST" action="{{ url_for('.configure_data_service', dataservicename=data_service.name, sourcename=source_name) }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        {% if source_name %}
        <input type="hidden" name="sourcename" value="{{ source_name }}">
        {% endif %}
        <input type="hidden" name="dataservicename" value="{{ data_service.name }}">
        <table class="ts-table  table table-borderless mt-3">
            <thead class="table-secondary">
                <tr class="border-bottom">
                    <th scope="col">KPI set name</th>
                </tr>
            </thead>
            <tr class="border-bottom">
                <td>
                    {% if data_service.origin.value == 'ui' %}
                    <select class="form-select" name="kpisetname" id="KPISetSelect">
                        {% for kpi_set in kpi_sets|sort(attribute='name') %}
                        <option {% if kpi_set.db_id == data_service.kpi_set.db_id%}selected{% endif %}>{{ kpi_set.name }}</option>
                        {% endfor %}
                    </select>
                    {% else %}
                    {{ data_service.kpi_set.name }}
                    {% endif %}
                </td>
            </tr>
        </table>
        {% if data_service.origin.value == 'ui' %}
        <button type="submit" class="btn btn-primary">Update KPI set</button>
        {% endif %}
    </form>
    {% if data_service_view_evaluations|count > 0 %}
    <table class="ts-table table table-borderless report-table mt-3">
        <thead class="thead-secondary">
            <tr class="border-top border-bottom">
                <th scope="col">Series set name</th>
                <th scope="col">Evaluation date</th>
                <th scope="col" class="action">Action</th>
            </tr>
        </thead>
        <tbody>
            {% for series_set_name, evaluations in data_service_view_evaluations|dictsort %}
            {% for evaluation in evaluations|sort(attribute='date', reverse=True) %}
            <tr class="border-bottom">
                {% if loop.first %}
                <td rowspan="{{ evaluations|count }}">{{ series_set_name }}</td>
                {% endif %}
                <td>
                    {{ evaluation.evaluation_date|ts_datetime }}
                </td>
                <td>
                    <form action="{{ url_for('.remove_evaluation') }}" method="POST">
                        <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="dataservicename" value="{{ data_service.name }}">
                        <input type="hidden" name="dataserviceviewevaluationid" value="{{ evaluation.db_id}}">
                        <div class="btn-group">
                            <a class="btn btn-sm btn-secondary" href="{{ url_for('.show_data_service_view_evaluation', sourcename=source_name, viewevaluationid=evaluation.db_id) }}">
                                View
                            </a>
                            <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu">
                                <li>
                                    <button class="dropdown-item"
                                            type="submit">
                                        Remove
                                    </button>
                                </li>
                            </ul>
                        </div>

                    </form>
                </td>
            </tr>
            {% endfor %}
            {% endfor %}
        </tbody>
    </table>
{% endif %}
</div>
{% endblock %}
