{% extends 'layout.html' %}

{% load static %}

{% block head_scripts %}
    <script src="{% static 'js/ajax-port-installations.js' %}"></script>
{% endblock %}

{% block title %}Port Installations |{% endblock %}

{% block content %}
    <br>
    <ul class="nav nav-tabs" id="tabs" role="tablist">
        <li class="nav-item">
            <a href="{% url 'stats' %}" class="nav-link text-dark">System Stats</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link active text-dark font-weight-bold">Port Installations</a>
        </li>
    </ul>
    <br>
    {% csrf_token %}
    <input type="text" class="form-control" id="search-by" name="search-by" placeholder="Filter by port name">
    <br>
    <form class="form-inline">
    <label class="form-inline" for="days-filter">Showing data for users who submitted stats in last: </label>
    <select class="form-control form-inline ml-2" id="days-filter" name="days-filter">
    {% for i in allowed_days|slice:"1:" %}
        <option value="{{ i }}" {% if i == 30 %}selected{% endif %}>{{ i }} days</option>
    {% endfor %}
    </select>
</form>
    <br>
<div id="navigation">

</div>
    <br>
<div class="container">
<div class="row" id="table-header">
    <div class="col-1 border-left border-top border-bottom text-center">
        <strong>#</strong>
    </div>
    <div class="col-5 border-left border-top border-bottom text-center">
        <strong>Port</strong>
        <button id="port" onclick="sort(this)" class="btn text-secondary btn-sm ml-3">&#9650;</button><button id="-port" onclick="sort(this)" class="btn text-secondary btn-sm">&#9660;</button>
    </div>
    <div class="col-3 pr-4 border-left border-top border-bottom text-center">
        <strong>Total</strong>
        <button id="total_count" onclick="sort(this)" class="btn text-secondary btn-sm ml-3">&#9650;</button><button id="-total_count" onclick="sort(this)" class="btn text-secondary btn-sm">&#9660;</button>
    </div>
    <div class="col-3 pr-4 border-left border-top border-bottom border-right text-center">
        <strong>Requested</strong>
        <button id="req_count" onclick="sort(this)" class="btn btn-sm text-secondary ml-3">&#9650;</button><button id="-req_count" onclick="sort(this)" class="btn text-secondary btn-sm">&#9660;</button>
    </div>
</div>
<div id="loading-image" class="container text-center p-5 mt-5" style="display: none">
    <img width="120" src="{% static 'images/tspinner.gif' %}">
</div>
<div id="list-of-ports">

</div>
</div>

{% endblock %}

{% block script %}
    <script>
    $('#{{ first }}').addClass('order_by_1');
    $('#{{ second }}').addClass('order_by_2');
    $('#{{ third }}').addClass('order_by_3');
    $('#days-filter').val({{ days }});
    </script>

{% endblock %}