{% extends '_base_list.html' %}
{% load i18n %}
{% load static %}
{% load common_tags %}
{% block content_left_head %}
    <link href="{% static 'css/plugins/datepicker/datepicker3.css' %}" rel="stylesheet">
    <style>
        #search_btn {
            margin-bottom: 0;
        }
        .form-control {
            height: 30px;
        }
        .select2-selection__rendered span.select2-selection, .select2-container .select2-selection--single {
            height: 30px !important;
        }
    </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" id="id_date_from" class="input-sm form-control" style="width: 100px;" name="date_from" value="{{ date_from|date:'Y-m-d'}}">
{#                <input type="text" class="input-sm form-control" style="width: 100px;" name="date_from" >#}
                <span class="input-group-addon">to</span>
                <input type="text" id="id_date_to" 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 'Select user' %}</option>
                {% for u in user_list %}
                    <option value="{{ u }}" {% if u == user %} selected {% endif %}>{{ u }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="input-group">
            <input type="text" id="search" class="form-control input-sm" name="keyword" placeholder="{% trans 'Search' %}" value="{{ keyword }}">
        </div>
        <div class="input-group">
            <div class="input-group-btn">
                <button id='search_btn' type="submit" class="btn btn-sm btn-primary">
                    {% trans "Search" %}
                </button>
            </div>
        </div>
    </form>
{% endblock %}
{% block table_container %}
<table class="table table-striped table-bordered table-hover " id="login_log_table" >
    <thead>
    	<tr>
    		<th class="text-center">{% trans 'ID' %}</th>
		    <th class="text-center">{% trans 'Username' %}</th>
		    <th class="text-center">{% trans 'Type' %}</th>
		    <th class="text-center">{% trans 'UA' %}</th>
		    <th class="text-center">{% trans 'IP' %}</th>
		    <th class="text-center">{% trans 'City' %}</th>
		    <th class="text-center">{% trans 'MFA' %}</th>
		    <th class="text-center">{% trans 'Reason' %}</th>
		    <th class="text-center">{% trans 'Status' %}</th>
		    <th class="text-center">{% trans 'Date' %}</th>
    	</tr>
    <thead>

    <tbody>
        {% for login_log in object_list %}
	        <tr class="gradeX">
	            <td class="text-center">{{ forloop.counter }}</td>
	            <td class="text-center">{{ login_log.username }}</td>
	            <td class="text-center">{{ login_log.get_type_display }}</td>
	            <td class="text-center">
	                <span href="javascript:void(0);" data-toggle="tooltips" title="{{ login_log.user_agent  }}">{{ login_log.user_agent | truncatechars:20 }}</span>
	            </td>
	            <td class="text-center">{{ login_log.ip }}</td>
	            <td class="text-center">{{ login_log.city }}</td>
	            <td class="text-center">{{ login_log.get_mfa_display }}</td>
	            <td class="text-center">{% trans login_log.reason %}</td>
	            <td class="text-center">{{ login_log.get_status_display }}</td>
	            <td class="text-center">{{ login_log.datetime }}</td>
	        </tr>
    	{% endfor %}
    </tbody>
</table>
    <div id="actions" class="" style="margin-top: -20px">
        <div class="input-group">
            <select class="form-control m-b" style="width: auto" id="slct_bulk_update">
                <option value="export">{% trans 'Export' %}</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 btn_export">
                    {% trans 'Submit' %}
                </button>
            </div>
        </div>
    </div>

{% endblock %}


{% block custom_foot_js %}
    <script src="{% static 'js/plugins/datepicker/bootstrap-datepicker.js' %}"></script>
    <script>
        $(document).ready(function() {
            jumpserver.initStaticTable('#login_log_table');
            $('#date .input-daterange').datepicker({
                format: "yyyy-mm-dd",
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true

            });
            $('.select2').select2({
                dropdownAutoWidth: true,
                width: 'auto'
            });
        })
        .on('click', '.btn_export', function () {
            var date_from = $('#id_date_from').val();
            var date_to = $('#id_date_to').val();
            var user = $('.select2 option:selected').val();
            var keyword = $('#search').val();
            $.ajax({
                url: "{% url "audits:login-log-export" %}",
                method: 'POST',
                data: JSON.stringify({
                    'date_from':date_from,
                    'date_to':date_to,
                    'user':user,
                    'keyword':keyword
                }),
                dataType: "json",
                success: function (data, textStatus) {
                    window.open(data.redirect)
                },
                error: function () {
                    toastr.error('Export failed');
                }
            })
        })
    </script>
{% endblock %}

