{% extends "oscar/base.html" %}
{% block styles %}
    <style>
        #engine-times {
          --labels-size: 20rem;
        }

        #engine-times th {
            text-align: right;
        }
    </style>
{% endblock %}
{% block title %}{{ _('stats') }} - {% endblock %}

{%- macro th_sort(column_order, column_name) -%}
    {% if column_order==sort_order %}
        {{ column_name }} {{ icon('chevron-down') }}
    {% else %}
        <a href="{{ url_for('stats', sort=column_order) }}">{{ column_name }}
    {% endif %}
{%- endmacro -%}

{% block content %}
<div class="container-fluid">
    <h1>{{ _('Engine stats') }}</h1>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="table-responsive">
                {% if not engine_stats.get('time') %}
                    <div class="col-sm-12 col-md-12">
                        {% include 'oscar/messages/no_data_available.html' %}
                    </div>
                {% else %}
                    <table class="table table-hover table-condensed table-striped">
                        <tr>
                            <th scope="col" style="width:20rem;">{{ th_sort('name', _("Engine name")) }}</th>
                            <th scope="col" style="width:7rem; text-align: right;">{{ th_sort('score', _('Scores')) }}</th>
                            <th scope="col">{{ th_sort('result_count', _('Result count')) }}</th>
                            <th scope="col">{{ th_sort('time', _('Response time')) }}</th>
                            <th scope="col" style="text-align: right;">{{ th_sort('reliability', _('Reliability')) }}</th>
                        </tr>
                        {% for engine_stat in engine_stats.get('time', []) %}
                        <tr>
                            <td>{{ engine_stat.name }}</td>
                            <td style="text-align: right;">
                                {% if engine_stat.score %}
                                <span aria-labelledby="{{engine_stat.name}}_score" >{{ engine_stat.score|round(1) }}</span>
                                <div class="engine-tooltip text-left" role="tooltip" id="{{engine_name}}_score">{{- "" -}}
                                    <p>{{ _('Scores per result') }}: {{ engine_stat.score_per_result | round(3) }}</p>
                                </div>
                                {% endif %}
                            </td>
                            <td>
                                {%- if engine_stat.result_count -%}
                                <span class="stacked-bar-chart-value">{{- engine_stat.result_count | int -}}</span>{{- "" -}}
                                <span class="stacked-bar-chart" aria-labelledby="{{engine_stat.name}}_chart_result_count" aria-hidden="true">{{- "" -}}
                                    <span style="width: calc(max(2px, 100%*{{ (engine_stat.result_count / engine_stats.max_result_count )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
                                </span>
                                {%- endif -%}
                            </td>
                            <td>
                                {%- if engine_stat.total -%}
                                <span class="stacked-bar-chart-value">{{- engine_stat.total | round(1) -}}</span>{{- "" -}}
                                <span class="stacked-bar-chart" aria-labelledby="{{engine_stat.name}}_chart" aria-hidden="true">{{- "" -}}
                                    <span style="width: calc(max(2px, 100%*{{ (engine_stat.http / engine_stats.max_time )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
                                    <span style="width: calc(100%*{{ engine_stat.processing / engine_stats.max_time |round(3) }})" class="stacked-bar-chart-serie2"></span>{{- "" -}}
                                </span>{{- "" -}}
                                <div class="engine-tooltip text-left" role="tooltip" id="{{engine_name}}_chart">{{- "" -}}
                                    <table class="table table-striped">
                                        <tr>
                                            <th scope="col"></th>
                                            <th scope="col">{{ _('Total') }}</th>
                                            <th scope="col">{{ _('HTTP') }}</th>
                                            <th scope="col">{{ _('Processing') }}</th>
                                        </tr>
                                        <tr>
                                            <th scope="col">{{ _('Median') }}</th>
                                            <td>{{ engine_stat.total }}</td>
                                            <td>{{ engine_stat.http }}</td>
                                            <td>{{ engine_stat.processing }}</td>
                                        </tr>
                                        <tr>
                                            <th scope="col">{{ _('P80') }}</th>
                                            <td>{{ engine_stat.total_p80 }}</td>
                                            <td>{{ engine_stat.http_p80 }}</td>
                                            <td>{{ engine_stat.processing_p80 }}</td>
                                        </tr>
                                        <tr>
                                            <th scope="col">{{ _('P95') }}</th>
                                            <td>{{ engine_stat.total_p95 }}</td>
                                            <td>{{ engine_stat.http_p95 }}</td>
                                            <td>{{ engine_stat.processing_p95 }}</td>
                                        </tr>
                                    </table>
                                </div>
                                {%- endif -%}
                            </td>
                            <td style="text-align: right;"> {{ engine_reliabilities.get(engine_stat.name, {}).get('reliablity') }}</td>
                        </tr>
                        {% endfor %}
                    </table>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}