{% extends "base.html" %}
{% block pagename %}mobilecompare{% endblock %}
{% block title %}Сравнение мобильных тестов пользователя {{ user.login }}{% endblock %}

{% load lookup %}

{% block body %}
<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/javascript">
// При нажатии на Enter
function testForEnter(event)
{
	if (event.key === "Enter") {
		$("#submitAddMobileCompare").click()
	}
}
</script>

<div class="container-fluid">
    <span style="display: none;" id="user_mobile_job_numbers" data-numbers="{{ user_mobile_job_numbers }}"></span>
    <div class="card">
        <div class="card-header" style="padding-bottom: 0;">
            <div class="row">
                <div class="col-sm-8">
                    <table class="table table-sm">
                        <tbody id="jobsControls">

                        </tbody>
                    </table>
                </div>
                <div class="col-sm-4">
                    <div class="input-group" id="grepContainer" style="margin-bottom: 15px;">
                        <input type="text" id="addMobileJobsToCompare" class="form-control" placeholder="Добавить к сравнению (номера через запятую)" value="" onkeydown="testForEnter(event);"/>
                        <span class="input-group-btn">
                            <button class="btn btn-secondary" type="button" id="submitAddMobileCompare">Добавить</button>
                        </span>
                    </div>
                    <div>
                        <span>Сгруппировать по:</span>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-secondary btn-sm groupBy active" data-criterion="">Стрельбе</button>
                            <button type="button" class="btn btn-secondary btn-sm groupBy" data-criterion="task">Таску</button>
                            <button type="button" class="btn btn-secondary btn-sm groupBy" data-criterion="component">Регрессии</button>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item"><a id="mobilecompare__tab__timeline_quantiles" class="nav-link active" data-toggle="tab" data-tab="timeline_quantiles" href="#mobilecompare__panel__timeline_quantiles">Квантили</a></li>
                <li class="nav-item"><a id="mobilecompare__tab__bar_avg" class="nav-link" data-toggle="tab" data-tab="bar_avg" href="#mobilecompare__panel__bar_avg">Барчарт</a></li>
                <li class="nav-item"><a id="mobilecompare__tab__meta" class="nav-link" data-toggle="tab" data-tab="meta" href="#mobilecompare__panel__meta">Метаинформация</a></li>
            </ul>
        </div>
        <div class="card-block">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane in active" id="mobilecompare__panel__timeline_quantiles">
                    <ul id="quantilesSelectors" class="nav nav-pills">
                        <li class="nav-item">
                            <a class="nav-link active" href="#" data-selector="avg">avg</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-selector="50">50%</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-selector="75">75%</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-selector="80">80%</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-selector="85">85%</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-selector="90">90%</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-selector="95">95%</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-selector="98">98%</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-selector="99">99%</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-selector="100">100%</a>
                        </li>
                        <li>
                        <i style="display: none; 
                        	font-size: 16pt; 
                        	margin-top: 8px; 
                        	margin-left: 8px;" 
                        id="selector_krutilka" class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>
                        </li>
                    </ul>
                    
                    <div style="padding-top: 20px;" id="mobileTimelineQuantilesContainer"></div>
                </div>
                <div role="tabpanel" class="tab-pane" id="mobilecompare__panel__bar_avg">
                    <div style="padding-top: 20px; width: 100%" id="mobileBarAvgContainer"></div>
                </div>
                <div style="padding-top: 20px;" role="tabpanel" class="tab-pane" id="mobilecompare__panel__meta">
                    <table id="mobileMetaTable" class="table table-hover">
                        <thead>
                        <tr id="header"><th></th></tr>
                        </thead>
                        <tbody>
                        <tr id="name"><td style="font-weight: bold;">Имя</td></tr>
                        <tr id="dsc"><td style="font-weight: bold;">Описание</td></tr>
                        <tr id="task"><td style="font-weight: bold;">Таск</td></tr>
                        <tr id="app"><td style="font-weight: bold;">Приложение</td></tr>
                        <tr id="ver"><td style="font-weight: bold;">Версия</td></tr>
                        <tr id="device_model"><td style="font-weight: bold;">Модель</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type='text/javascript' src='/media/js/mobilecompare.js?version=43.4'></script>

{% endblock %}
