{% extends '_base_list.html' %}
{% load i18n %}
{% load static %}
{% block content_left_head %}
    <link href="{% static 'css/plugins/datepicker/datepicker3.css' %}" rel="stylesheet">
    <style>
        #search_btn {
            margin-bottom: 0;
        }
    </style>
{% endblock %}


{% block table_search %}
    <form id="search_form" method="get" action="" class="pull-right form-inline">
        <div class="form-group" id="date">
            <div class="input-daterange input-group" id="datepicker">
                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                <input type="text" class="input-sm form-control" style="width: 100px;" name="date_from" value="{{ date_from }}">
                <span class="input-group-addon">to</span>
                <input type="text" class="input-sm form-control" style="width: 100px;" name="date_to" value="{{ date_to }}">
            </div>
        </div>
        <div class="input-group">
            <select class="select2 form-control" name="username">
                <option value="">{% trans 'User' %}</option>
                {% for user in user_list %}
                    <option value="{{ user }}" {% if user == username %} selected {% endif %}>{{ user }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="input-group">
            <select class="select2 form-control" name="ip">
                <option value="">{% trans 'Asset' %}</option>
                {% for asset in asset_list %}
                    <option value="{{ asset }}" {% if asset == ip %} selected {% endif %}>{{ asset }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="input-group">
            <select class="select2 form-control" name="system_user">
                <option value="">{% trans 'System user' %}</option>
                {% for su in system_user_list %}
                    <option value="{{ su }}" {% if su == system_user %} selected {% endif %}>{{ su }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="input-group">
            <input type="text" class="form-control input-sm" name="keyword" placeholder="Keyword" value="{{ keyword }}">
        </div>
        <div class="input-group">
            <div class="input-group-btn">
                <button id='search_btn' type="submit" class="btn btn-sm btn-primary">
                    搜索
                </button>
            </div>
        </div>
    </form>
{% endblock %}

{% block table_head %}
    <th class="text-center"></th>
    <th class="text-center">{% trans 'ID' %}</th>
    <th class="text-center">{% trans 'User' %}</th>
    <th class="text-center">{% trans 'Asset' %}</th>
    <th class="text-center">{% trans 'System user' %}</th>
    <th class="text-center">{% trans 'Terminal' %}</th>
    <th class="text-center">{% trans 'Command' %}</th>
    <th class="text-center">{% trans 'Success' %}</th>
    <th class="text-center">{% trans 'Finished' %}</th>
    <th class="text-center">{% trans 'R/M' %}</th>
    <th class="text-center">{% trans 'Date start' %}</th>
    <th class="text-center">{% trans 'Time' %}</th>
{% endblock %}

{% block table_body %}
    {% for proxy_log in proxy_log_list %}
        <tr class="gradeX">
            <td class="text-center"><input type="checkbox" class="cbx-term" value="{{ proxy_log.id }}"></td>
            <td class="text-center">
                <a href="{% url 'audits:proxy-log-detail' pk=proxy_log.id %}">{{ proxy_log.id }}</a>
            </td>
            <td class="text-center">{{ proxy_log.user }}</td>
            <td class="text-center">{{ proxy_log.asset }}</td>
            <td class="text-center">{{ proxy_log.system_user }}</td>
            <td class="text-center">{{ proxy_log.terminal }}</td>
            <td class="text-center">{{ proxy_log.commands.all|length}}</td>
            <td class="text-center">
            {% if proxy_log.is_failed %}
                <i class="fa fa-times text-danger"></i>
            {% else %}
                <i class="fa fa-check text-navy"></i>
            {% endif %}
            </td>
            {% if proxy_log.is_finished %}
                <td class="text-center">
                    <i class="fa fa-check text-navy"></i>
                </td>
                <td class="text-center">
                    <a><span class="text-navy"><i class="fa fa-play-circle"></i></span></a>
                </td>
            {% else %}
                <td class="text-center">
                    <a class="btn-term" value="{{ proxy_log.id }}"><i class="fa fa-times text-danger"></i></a>
                </td>
                <td class="text-center">
                    <a><span class="text-danger"><i class="fa fa-eye"></i></span></a>
                </td>
            {% endif %}
            <td class="text-center">{{ proxy_log.date_start }}</td>
            <td class="text-center">{{ proxy_log.date_finished|timeuntil:proxy_log.date_start }}</td>
        </tr>
    {% endfor %}
{% endblock %}

{% block content_bottom_left %}
    <div id="actions">
    <div class="input-group">
        <select class="form-control m-b" style="width: auto" id="slct_bulk_update">
            <option value="terminate">{% trans 'Terminate selected' %}</option>
        </select>
        <div class="input-group-btn pull-left" style="padding-left: 5px;">
            <button id='btn_bulk_update' style="height: 32px;"  class="btn btn-sm btn-primary">
             {% trans 'Submit' %}
            </button>
        </div>
    </div>
    </div>
{% endblock %}

{% block custom_foot_js %}
    <script src="{% static 'js/plugins/datepicker/bootstrap-datepicker.js' %}"></script>
    <script>
        function terminateConnection(data) {
            function success() {
                window.setTimeout(function () {
                    window.location.reload()
                }, 300)
            }
            var the_url = "{% url 'api-applications:terminate-connection' %}";
            APIUpdateAttr({url: the_url, method: 'POST', body: JSON.stringify(data), success: success, success_message: 'Terminate success'});
        }
        $(document).ready(function() {
            $('table').DataTable({
                "searching": false,
                "paging": false,
                "bInfo" : false,
                "order": []
            });
            $('.select2').select2();
            $('#date .input-daterange').datepicker({
                dateFormat: 'mm/dd/yy',
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });
        }).on('click', '.btn-term', function () {
            var $this = $(this);
            var proxy_log_id = $this.attr('value');
            var data = {
                proxy_log_id: proxy_log_id
            };
            terminateConnection(data)
        }).on('click', '#btn_bulk_update', function () {
            var data = [];
            $('.cbx-term:checked').each(function () {
                data.push({proxy_log_id: $(this).attr('value')})
            });
            terminateConnection(data)
        })
    </script>
{% endblock %}

