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

{% block content_left_head %}
{% 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="user">
                <option value="">{% trans 'User' %}</option>
                {% for u in user_list %}
                    <option value="{{ u }}" {% if u == username %} selected {% endif %}>{{ u }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="input-group">
            <select class="select2 form-control" name="asset">
                <option value="">{% trans 'Asset' %}</option>
                {% for a in asset_list %}
                    <option value="{{ a }}" {% if a == asset %} selected {% endif %}>{{ a }}</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 'Date start' %}</th>
    <th class="text-center">{% trans 'Duration' %}</th>
    <th class="text-center">{% trans 'Action' %}</th>
{% endblock %}

{% block table_body %}
    {% for session in session_list %}
        <tr class="gradeX">
            <td class="text-center"><input type="checkbox" class="cbx-term" value="{{ session.id }}"></td>
            <td class="text-center">
                <a href="{% url 'terminal:session-detail' pk=session.id %}">{{ forloop.counter }}</a>
            </td>
            <td class="text-center">{{ session.user }}</td>
            <td class="text-center">{{ session.asset }}</td>
            <td class="text-center">{{ session.system_user }}</td>
            <td class="text-center">{{ session.terminal.name }}</td>
            <td class="text-center">{{ session.id | get_session_command_amount }}</td>

            <td class="text-center">{{ session.date_start }}</td>
            <td class="text-center">{{ session.date_end|default_if_none:now|timeuntil:session.date_start }}</td>
            <td>
                {% if session.is_finished %}
                <a href="" class="btn btn-xs btn-warning btn-replay" >{% trans "Replay" %}</a>
                {% else %}
                <a class="btn btn-xs btn-warning btn-monitor" >{% trans "Monitor" %}</a>
                <a class="btn btn-xs btn-danger btn-term" value="{{ session.id }}" terminal="{{ session.terminal.id }}" >{% trans "Terminate" %}</a>
                {% endif %}
            </td>
        </tr>
    {% endfor %}
{% endblock %}

{% block custom_foot_js %}
    <script src="{% static 'js/plugins/datepicker/bootstrap-datepicker.js' %}"></script>
    <script>
        function terminateSession(data) {
            function success() {
                window.setTimeout(function () {
                    window.location.reload()
                }, 1000)
            }
            var success_message = '{% trans "Terminate task send, waiting ..." %}';
            var the_url = "{% url 'api-terminal:tasks-list' %}";
            APIUpdateAttr({
                url: the_url,
                method: 'POST',
                body: JSON.stringify(data),
                success: success,
                success_message: success_message
            });
        }
        $(document).ready(function() {
            $('table').DataTable({
                "searching": false,
                "paging": false,
                "bInfo" : false,
                "order": []
            });
            $('.select2').select2({
                dropdownAutoWidth: true
            });
            $('#date .input-daterange').datepicker({
                dateFormat: 'mm/dd/yy',
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });
        }).on('click', '.btn-term', function () {
            var $this = $(this);
            var session_id = $this.attr('value');
            var terminal_id = $this.attr('terminal');
            var data = {
                name: "kill_session",
                args: session_id,
                terminal: terminal_id
            };
            terminateSession(data)
        })
    </script>
{% endblock %}

