text: {% extends 'users/_base_user_detail.html' %}
  {% load static %}
  {% load i18n %}
  
  {% block custom_head_css_js %}
      <link href="{% static "css/plugins/sweetalert/sweetalert.css" %}" rel="stylesheet">
      <script src="{% static "js/plugins/sweetalert/sweetalert.min.js" %}"></script>
  {% endblock %}
  
  
  {% block content_table %}
  <div class="col-sm-10" style="padding-left: 0">
      <div class="ibox float-e-margins">
          <div class="ibox-title">
              <span class="label"><b>{{ object.name }}</b></span>
              <div class="ibox-tools">
                  <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>
                  <ul class="dropdown-menu dropdown-user">
                  </ul>
                  <a class="close-link">
                      <i class="fa fa-times"></i>
                  </a>
              </div>
          </div>
          <div class="ibox-content">
              <table class="table table-striped table-bordered table-hover"
                     id="permission_list_table"
                     style="width: 100%">
                  <thead>
                  <tr>
                      <th></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 'Validity' %}</th>
                      <th class="text-center">{% trans 'Action' %}</th>
                  </tr>
                  </thead>
                  <tbody>
                  </tbody>
              </table>
          </div>
      </div>
  </div>
  
  {% include '_filter_dropdown.html' %}
  
  {% endblock %}
  
  {% block custom_foot_js %}
  <script>
  jumpserver.nodes_selected = {};
  function format(d) {
      var data = "";
      if (d.users.length > 0 ) {
          data += makeLabel(["{% trans 'User' %}", d.users.join(", ")])
      }
      if (d.user_groups.length > 0) {
          data += makeLabel(["{% trans 'User group' %}", d.user_groups.join(", ")])
      }
      if (d.assets.length > 0) {
         data += makeLabel(["{% trans 'Asset' %}", d.assets.join(", ")])
      }
      if (d.nodes.length > 0) {
          data += makeLabel(["{% trans 'Node' %}", d.nodes.join(", ")])
      }
      if (d.system_users.length > 0) {
          data += makeLabel(["{% trans 'System user' %}", d.system_users.join(", ")])
      }
      if (d.actions.length > 0) {
          data += makeLabel(["{% trans 'Action' %}", d.actions.join(", ")])
      }
      return data
  }
  
  function initTable() {
      var options = {
          ele: $('#permission_list_table'),
          toggle: true,
          columnDefs: [
              {targets: 0, createdCell: function (td, cellData, rowData) {
                  $(td).addClass("toggle");
                  $(td).html("<i class='fa fa-angle-right'></i>");
              }},
              {targets: 1, createdCell: function (td, cellData, rowData) {
                  cellData = htmlEscape(cellData);
                  var detail_btn = '<a href="{% url "perms:asset-permission-detail" pk=DEFAULT_PK %}">' + cellData + '</a>';
                  $(td).html(detail_btn.replace('{{ DEFAULT_PK }}', rowData.id));
              }},
              {targets: 2, createdCell: function (td, cellData) {
                  var num = cellData.length;
                  $(td).html(num);
              }},
              {targets: 3, createdCell: function (td, cellData) {
                  var num = cellData.length;
                  $(td).html(num);
              }},
              {targets: 4, createdCell: function (td, cellData) {
                  var num = cellData.length;
                  $(td).html(num);
              }},
              {targets: 5, createdCell: function (td, cellData) {
                  var num = cellData.length;
                  $(td).html(num);
              }},
              {targets: 6, createdCell: function (td, cellData) {
                  var num = cellData.length;
                  $(td).html(num);
              }},
              {targets: 7, createdCell: function (td, cellData) {
                  if (!cellData) {
  					$(td).html('<i class="fa fa-times text-danger"></i>')
  				} else {
  					$(td).html('<i class="fa fa-check text-navy"></i>')
  				}
              }},
              {targets: 8, createdCell: function (td, cellData, rowData) {
                  var name = htmlEscape(rowData.name);
                  var update_btn = '<a href="{% url "perms:asset-permission-update" pk=DEFAULT_PK %}" class="btn btn-xs m-l-xs btn-info">{% trans "Update" %}</a>'.replace('{{ DEFAULT_PK }}', cellData);
                  var del_btn = '<a class="btn btn-xs btn-danger m-l-xs btn-del" data-uid="{{ DEFAULT_PK }}" mark=1 data-name="99991938">{% trans "Delete" %}</a>'
                      .replace('{{ DEFAULT_PK }}', cellData)
                      .replace('99991938', name);
                  if (rowData.inherit) {
                      del_btn = del_btn.replace("mark", "disabled")
                  }
  				$(td).html(update_btn + del_btn);
              }}
          ],
          ajax_url: '{% url "api-perms:asset-permission-list" %}?user_id={{ object.id }}',
          columns: [
              {data: "id"}, {data: "name"}, {data: "users", orderable: false},
              {data: "user_groups", orderable: false}, {data: "assets", orderable: false},
              {data: "nodes", orderable: false}, {data: "system_users", orderable: false},
              {data: "is_valid", orderable: false}, {data: "id", orderable: false, width: "120px"}
          ],
          select: {},
          op_html: $('#actions').html()
      };
      table = jumpserver.initServerSideDataTable(options);
      return table
  }
  
  $(document).ready(function() {
     initTable();
     var filterMenu = [
          {title: "{% trans 'Name' %}", value: "name"},
          {title: "{% trans 'Validity' %}", value: "is_valid"},
          {title: "{% trans 'IP' %}", value: "ip"},
          {title: "{% trans 'Hostname' %}", value: "hostname"},
          {title: "{% trans 'Node' %}", value: "node"},
          {title: "{% trans 'System user' %}", value: "system_user"},
          {title: "{% trans 'Inherit' %}", value: "all", submenu: [
              {title: "{% trans 'Include' %}", value: "1"},
              {title: "{% trans 'Exclude' %}", value: "0"},
          ]},
      ];
      initTableFilterDropdown('#permission_list_table_filter input', filterMenu, 15, 38)
  })
  .on('click', '.toggle', function (e) {
      e.preventDefault();
      var detailRows = [];
      var tr = $(this).closest('tr');
      var row = table.row(tr);
      var idx = $.inArray(tr.attr('id'), detailRows);
  
      if (row.child.isShown()) {
          tr.removeClass('details');
          $(this).children('i:first-child').removeClass('fa-angle-down').addClass('fa-angle-right');
          row.child.hide();
  
          // Remove from the 'open' array
          detailRows.splice(idx, 1);
      }
      else {
          tr.addClass('details');
          $(this).children('i:first-child').removeClass('fa-angle-right').addClass('fa-angle-down');
          row.child(format(row.data())).show();
          // Add to the 'open' array
          if ( idx === -1 ) {
              detailRows.push(tr.attr('id'));
          }
      }
  })
  .on('click', '.btn-del', function () {
      var $this = $(this);
      var uid = $this.data('uid');
      var name = $this.data('name');
      var the_url = '{% url "api-perms:asset-permission-detail" pk=DEFAULT_PK %}'
              .replace('{{ DEFAULT_PK }}', uid);
      objectDelete($this, name, the_url);
  })
  </script>
  {% endblock %}
  