{% extends '_base_list.html' %}
{% load i18n %}
{% load static %}
{% load terminal_tags %}
{% load common_tags %}
{% block custom_head_css_js %}
    <link href="{% static 'css/plugins/datepicker/datepicker3.css' %}" rel="stylesheet">
    <link href="{% static 'css/plugins/select2/select2.min.css' %}" rel="stylesheet">
    <script src="{% static 'js/plugins/select2/select2.full.min.js' %}"></script>
    <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|date:'Y-m-d' }}">
                <span class="input-group-addon">to</span>
                <input type="text" class="input-sm form-control" style="width: 100px;" name="date_to" value="{{ date_to|date:'Y-m-d' }}">
            </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 == user %} 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="filename" placeholder="{% trans 'Filename' %}" value="{{ filename }}">
        </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">{% 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 'Remote addr' %}</th>
    <th class="text-center">{% trans 'Operate' %}</th>
    <th class="text-center">{% trans 'Filename' %}</th>
    <th class="text-center">{% trans 'Success' %}</th>
    <th class="text-center">{% trans 'Date start' %}</th>
{#    <th class="text-center">{% trans 'Action' %}</th>#}
{% endblock %}

{% block table_body %}
    {% for object in object_list %}
        <tr class="gradeX">
{#            <td class="text-center">#}
{#                <a href="{% url 'terminal:object-detail' pk=object.id %}">{{ forloop.counter }}</a>#}
{#            </td>#}
            <td class="text-center">{{ object.user }}</td>
            <td class="text-center">{{ object.asset }}</td>
            <td class="text-center">{{ object.system_user }}</td>
            <td class="text-center">{{ object.remote_addr|default:"" }}</td>
            <td class="text-center">{{ object.operate }}</td>
            <td class="text-center">{{ object.filename }}</td>
            <td class="text-center">
                {% if object.is_success %}
                    <i class="fa fa-check text-navy"></i>
                {% else %}
                    <i class="fa fa-times text-danger"></i>
                {% endif %}
            </td>
            <td class="text-center">{{ object.date_start }}</td>
        </tr>
    {% endfor %}
{% endblock %}

{% block content_bottom_left %}
{% endblock %}

{% block custom_foot_js %}
    <script src="{% static 'js/plugins/datepicker/bootstrap-datepicker.js' %}"></script>
    <script>
        $(document).ready(function() {
            $('table').DataTable({
                "searching": false,
                "paging": false,
                "bInfo" : false,
                "order": []
            });
            $('.select2').select2({
                dropdownAutoWidth: true,
                width: "auto"
            });
            $('.input-daterange.input-group').datepicker({
                format: "yyyy-mm-dd",
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true
            });
        })
    </script>
{% endblock %}