<!DOCTYPE html>

{% extends "base.html" %}
{% block pagename %}comparepage{% endblock %}
{% block title %}Сравнение {% for job in jobs %}{{ job.name }},&nbsp;{% endfor %}{% endblock %}

{% block body %}
{% load lookup %}

<div class="header-bottom-padding"></div>
<span style="display:none;" id="jobs_numbers">{{ jobs_numbers }}</span>
<span style="display:none;" id="user_id">{{ user.id }}</span>

    <script nonce='{{ common.CSP_SCRIPT_NONCE }}'type="text/html" id="compareMetaJobTemplate">

        <tr class="jobMetaRow">
            <td style="border-top: none; color: <%= color %>;">
                <a href="/<%= n %>"><span style="text-decoration:underline; color: <%= color %>;"><%= n %></span></a>
                <span class="removeJobFromCompare fa fa-times-circle-o text-muted"
                      data-job="<%= n %>"
                      aria-hidden="true"
                      style="font-size:12pt; cursor:pointer;">
                </span>
            </td>
            <td style="border-top: none; color: <%= color %>;"><%= name %></td>
        </tr>

    </script>


<div class="lunabody container-fluid">
    <span id="mobile_jobs" data-count="{{ common.compare_count }}"></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">
                        {% for job in jobs %}
                            <tr class="jobMetaRow">
                                <td style="border-top: none; color: {{ colors|lookup:job.n }}">
                                    <a href="/{{ job.id }}"><span style="text-decoration:underline; color:{{ colors|lookup:job.n }};">{{ job.n }}</span></a>
                                    <span class="removeJobFromCompare fa fa-times-circle-o text-muted"
                                          data-job="{{ job.id }}"
                                          aria-hidden="true"
                                          style="font-size: 12pt; cursor:pointer;">
                                    </span>
                                </td>
                                <td style="border-top: none; color: {{ colors|lookup:job.n }}">{{ job.name }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="col-sm-4">
                    <div class="input-group" id="grepContainer" style="margin-bottom: 2em; padding-top: 10px;">
                        <input type="text" id="addJobsToCompare" class="form-control" placeholder="Добавить номера стрельб через запятую" onkeydown="testForEnter(event);" value=""/>
                        <span class="input-group-btn">
                            <button class="btn btn-secondary" type="button" id="submitAddCompare">Добавить</button>
                        </span>
                    </div>
                </div>
            </div>
            <br>
            <ul id="tab_panel" class="nav nav-tabs" style="margin-bottom: -1px;"></ul>
        </div>
        <div class="card-block">
            <div class="controls_panel" id="controls_panel">
                <i class="controls_krutilka fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>
            </div>
            <div class="row" id="compare_plots">
            </div>
        </div>
    </div>
</div>
<link href="/media/css/comparepage.css?version=43.4" type="text/css" rel="stylesheet" />
<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type='text/javascript' src='/media/js/comparepage.js?version=43.4'></script>
{% endblock %}
