{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% load common_tags %}
{% block custom_head_css_js %}
    <link href="{% static "css/plugins/dataTables/dataTables.min.css" %}" rel="stylesheet">
    <link href="{% static "css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.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>
    <script src="{% static "js/plugins/dataTables/dataTables.min.js" %}"></script>
{% endblock %}

{% block content %}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="ibox-tools">
                        <div style="float:left">
                            <a href="{% url 'assets:asset-create' %}" class="btn btn-sm btn-primary "> {% trans "Create asset" %} </a>
                        </div>
                        <button class="btn btn-sm btn-primary" id="zksx" onclick="tagShow()">标签</button>
                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-wrench"></i></a>
                            <a class="close-link"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="">
                       <div class="ydxbd" id="ydxbd" style="display: none;">
                           <div>
                               <p id="tags_p">
                                   {% for tag in tag_list %}
                                    <a href="{% url 'assets:asset-tags' tag_id=tag.0 %}"
                                        {% if tag.0|IntToStr == tag_id %}
                                            class="fa fa-tag btn btn-sm  btn-primary mar-j" name="tag_on">
                                        {% else %}
                                            class="fa fa-tag btn btn-sm btn-outline btn-primary mar-j">
                                        {% endif %}
                                        <span class="mar">
                                            <strong>{{ tag.1}}</strong>({{ tag.2 }})
                                        </span></a>
                                    {% endfor %}
                                    <a href="{% url 'assets:asset-list' %}" class="btn btn-sm btn-outline btn-default ">移除选择</a>
                               </p>
                           </div>
                       </div>
                        {% block content_left_head %}{% endblock %}
                        {% block table_search %}{% endblock %}
                    </div>
{% block table_container %}
<table aria-describedby="editable_info" role="grid" class="table table-striped table-bordered table-hover  dataTable" id="editable">
    <thead>
        <tr>
            <th class="text-center"><input type="checkbox" id="check_all"  onclick="checkAll()"></th>
            <th class="text-center"><a href="{% url 'assets:asset-list' %}?sort=hostname">{% trans 'Hostname' %}</a></th>
            <th class="text-center"><a href="{% url 'assets:asset-list' %}?sort=username">{% trans 'IP' %}</a></th>
            <th class="text-center">{% trans 'Port' %}</th>
            <th class="text-center">{% trans 'Type' %}</th>
            <th class="text-center">{% trans 'Hardware' %}</th>
            <th class="text-center">{% trans 'Valid' %}</th>
            <th class="text-center"></th>
        </tr>
    </thead>
    <tbody>
    {% for asset in asset_list %}
        <tr class="gradeX"  name="oAssets">
            <td class="text-center"><input type="checkbox" name="checked" value="{{ asset.id }}"></td>
            <td class="text-center"><a href="{% url 'assets:asset-detail' pk=asset.id %}">{{ asset.hostname }}</a></td>
            <td class="text-center">{{ asset.ip }}</td>
            <td class="text-center">{{ asset.port }}</td>
            <td class="text-center">{{ asset.type }}</td>
            <td class="text-center">{{ asset.cpu }} {{ asset.memory }} {{ asset.disk }} </td>
            <td class="text-center">
                {% if asset.is_valid.0 %}
                    <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 'assets:asset-update' pk=asset.id %}" class="btn btn-xs btn-info">{% trans 'Update' %}</a>
                <a href="{% url 'assets:asset-delete' pk=asset.id %}" class="btn btn-xs btn-danger del">{% trans 'Delete' %}</a>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>
{% endblock %}
    <div class="row">
        <div class="col-sm-4">
            {# Update batch #}
            {% block content_bottom_left %}
                <form id="" method="get" action="" class=" mail-search">
                    <div class="input-group">
                        <select class="form-control m-b" style="width: auto">
                            <option>{% trans 'Delete selected' %}</option>
                            <option>{% trans 'Update selected' %}</option>
                            <option>{% trans 'Deactive selected' %}</option>
                            <option>{% trans 'Export selected' %}</option>
                        </select>
                        <div class="input-group-btn pull-left" style="padding-left: 5px;">
                            <button id='search_btn' type="submit" style="height: 32px;"  class="btn btn-sm btn-primary">
                                {% trans 'Submit' %}
                            </button>
                        </div>
                    </div>
                </form>
            {% endblock %}
        </div>
            {% block table_pagination %}
                {% include '_pagination.html' %}
            {% endblock %}
    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block custom_foot_js %}
<script type="text/javascript">
    window.onload=function (){
        var tag_on = document.getElementsByName("tag_on");
        var oDiv = document.getElementById("ydxbd");
        if(tag_on.length > 0){
            oDiv.style.display = "block";
        }
    };

    function tagShow() {
        var oDiv = document.getElementById("ydxbd");
            if (oDiv.style.display == 'none'){
                oDiv.style.display = "block";
            }else{
                oDiv.style.display = "none";
            }
    };

    $(document).ready(function(){
        var table = $('#editable').DataTable({
            aLengthMenu: [[2, 25, 50, -1], ["2", "25", "50", "all"]],
            "aaSorting": [[7, "asc"]],
            "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] }],
            "bAutoWidth": false,
            "language": {
                "url": "/static/js/plugins/dataTables/i18n/zh-hans.json"
        },
        columns: [
            {data: "checkbox"},
            {data: "id"},
            {data: "name"},
            {data: "ip"},
            {data: "type"},
            {data: "group"},
            {data: "dp"},
            {data: "op"}
        ]
        });
        //将ID列隐藏
        //table.column('1').visible(false);
        $('#editable tbody').on( 'click', 'tr', function () {
        //alert($(this).hasClass('selected'));
            if($(this).hasClass('selected')){
                $(this).removeClass('selected');
                this.children[0].children[0].checked=0;
            }else{
                $(this).addClass('selected');
                this.children[0].children[0].checked=1;
            };
        });
        $('#close-btn').on('click',function(){
            $('#modal').modal('hide');
        });
        $('#save-btn').on('click',function(){
        // alert( table.rows('.selected').data().length +' row(s) selected' );
            var d = table.rows('.selected').data();
            var size = d.length;
            document.getElementById('add_asset').value = size;
            var column2 = table.rows('.selected').data();
            $("#asset_sed").find("input[name='assets']").remove();
            for(var i=0;i<column2.length;i++){
                column2[i].checkbox='<input name="checked" value="1" checked="" type="checkbox">';
                var value = column2[i].id;
                $("#asset_sed").append("<input  type='hidden' name='assets' value='"+value+"'>");
            }
            $('#modal').modal('hide');
        });
    }); //$(document).ready

    var bCheck = 1;
    function checkAll(){
        if(bCheck){
            $("tr[name='oAssets']").each(function(){
                oCheckbox = this.children[0].children[0];
                $(this).toggleClass('selected',true);
                oCheckbox.checked=1;
            });
            document.getElementById('check_all').checked=1;
            bCheck = 0;
        }else{
            $("tr[name='oAssets']").each(function(){
                oCheckbox = this.children[0].children[0];
                $(this).toggleClass('selected',false);
                oCheckbox.checked=0;
            });
            document.getElementById('check_all').checked=0;
            bCheck = 1;
        };
    };
</script>
{% endblock %}
