{% extends '_base_list.html' %}
{% load i18n %}
{% load static %}
{% load common_tags %}
{% block custom_head_css_js %}
    <link href="{% static "css/plugins/footable/footable.core.css" %}" rel="stylesheet">
    <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 %}
    <div class="uc pull-left m-r-5">
        <a href="{% url 'perms:asset-permission-create' %}" class="btn btn-sm btn-primary ">
            {% trans "Create permission" %}
        </a>
    </div>
    <form id="search_form" method="get" action="" class="pull-right form-inline" style="padding-bottom: 8px">
        <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="user_group">
                <option value="">{% trans 'User group' %}</option>
                {% for g in user_group_list %}
                    <option value="{{ g }}" {% if g == user_group %} selected {% endif %}>{{ g }}</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="node">
                <option value="">{% trans 'Node' %}</option>
                {% for n in node_list %}
                    <option value="{{ n }}" {% if n == node %} selected {% endif %}>{{ n }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="input-group">
            <select class="select2 form-control" name="system_user">
                <option value="">{% trans 'System user' %}</option>
                {% for s in system_user_list %}
                    <option value="{{ s }}" {% if s == system_user %} selected {% endif %}>{{ s }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="input-group">
            <input type="text" class="form-control input-sm" name="q" placeholder="{% trans 'Search' %}" value="{{ q }}">
        </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="footable table table-stripped table-bordered toggle-arrow-tiny" data-page="false">
        <thead>
        <tr>
            <th data-sorted="true" data-toggle="true">ID</th>
            <th>{% trans 'Name' %}</th>
            <th class="text-center">{% trans 'User' %}</th>
            <th class="text-center">{% trans 'User group' %}</th>
            <th class="text-center">{% trans 'Asset' %}</th>
            <th class="text-center">{% trans 'Node'%}</th>
            <th class="text-center">{% trans 'System user' %}</th>
            <th class="text-center">{% trans 'Active' %}</th>
            <th class="text-center" >{% trans 'Action' %}</th>
            <th data-hide="all">{% trans 'User' %}</th>
            <th data-hide="all">{% trans 'User group' %}</th>
            <th data-hide="all">{% trans 'Asset' %}</th>
            <th data-hide="all">{% trans 'Node' %}</th>
            <th data-hide="all">{% trans 'System user' %}</th>
        </tr>
        </thead>
        <tbody>
        {% for object in object_list %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td><a href="#">{{ object.name }}</a></td>
                <td class="text-center">{{ object.users.count }}</td>
                <td class="text-center">{{ object.user_groups.count }}</td>
                <td class="text-center">{{ object.assets.count }}</td>
                <td class="text-center">{{ object.nodes.count }}</td>
                <td class="text-center">{{ object.system_users.count }}</td>
                <td class="text-center">
                    {% if object.is_valid %}
                        <i class="fa fa-check text-navy"></i>
                    {% else %}
                        <i class="fa fa-times text-danger"></i>
                    {% endif %}
                </td>
                <td class="text-center">
                    <a href="{% url 'perms:asset-permission-update' pk=object.id %}" class="btn btn-xs btn-info">{% trans "Update" %}</a>
                    <a data-uid="{{ object.id }}" class="btn btn-xs btn-danger m-l-xs btn-delete">{% trans "Delete" %}</a>
                </td>
                <td>{{ object.users_detail }}</td>
                <td>{{ object.user_groups_detail }}</td>
                <td>{{ object.assets_detail }}</td>
                <td>{{ object.nodes_detail }}</td>
                <td>{{ object.system_users_detail }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}

{% block custom_foot_js %}
<script src="{% static "js/plugins/footable/footable.all.min.js" %}"></script>
<script src="{% static 'js/plugins/datepicker/bootstrap-datepicker.js' %}"></script>
<script>
    $(document).ready(function () {
        $('.footable').footable();
        $('.select2').select2({
            dropdownAutoWidth : true,
            width: 'auto'
        });
        $('#date .input-daterange').datepicker({
            format: "yyyy-mm-dd",
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true
        });
    }).on('click', '.btn-delete', function () {
        var $this = $(this);
        var uid = $this.data('uid');
        var the_url = '{% url "api-perms:asset-permission-detail" pk=DEFAULT_PK %}'.replace('{{ DEFAULT_PK }}', uid);
        var name = $(this).closest("tr").find(":nth-child(2)").children('a').html();
        objectDelete($this, name, the_url);
        setTimeout( function () {
            window.reload();
        }, 1000);
    });
</script>
{% endblock %}


