{% extends ../base.html %}

{% block title %}temBoard / Settings / Users{% end %}

{% block head %}
<!-- DataTables CSS -->
<link href="/js/datatables/datatables.min.css" rel="stylesheet">
<!-- Multiselect -->
<link href="/css/bootstrap-multiselect.css" rel="stylesheet">
{% end %}

{% block content %}
<!-- User update modal -->
<div class="modal fade" id="UserModal" tabindex="-1" role="dialog" aria-labelledby="UserModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="UserModalLabel"></h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body" id="UserModalInfo">
      </div>
      <div class="modal-body" id="UserModalBody">
      </div>
      <div class="modal-footer" id="UserModalFooter">
        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-3 col-xl-2">
    {% include menu.html %}
  </div>
  <div class="col-md-9 col-xl-10">
    <div class="row">
      <div class="col-md-12 text-right">
        <p>
          <button id="buttonLoadAddUserForm" class="btn btn-success btn-sm">
            New user
          </button>
        </p>
      </div>
    </div>
    <table class="table table-striped table-bordered table-hover" id="tableUsers" cellspacing="0">
    <thead>
      <tr>
        <th>Username</th>
        <th>Email</th>
        <th>Phone</th>
        <th width="40">Active</th>
        <th width="40">Admin.</th>
        <th>Groups</th>
        <th class="no-sort"></th>
        <th class="no-sort"></th>
      </tr>
    </thead>
    <tbody>
    {% for role_item in role_list %}
      <tr>
        <td>{{role_item.role_name}}</td>
        <td>{{role_item.role_email or ''}}</td>
        <td>{{role_item.role_phone or ''}}</td>
        <td class="text-center">{% if role_item.is_active is True %}<span class="badge badge-success">Yes</span>{% else %}<span class="badge badge-danger">No</span>{% end %}</td>
        <td class="text-center">{% if role_item.is_admin is True %}<span class="badge badge-success">Yes</span>{% else %}<span class="badge badge-danger">No</span>{% end %}</td>
        <td>{% for group in role_item.groups %} <span class="badge border text-muted">{{group.group_name}}</span>{% end %}</td>
        <td class="text-center">
          <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="tooltip" data-placement="bottom" title="Edit" data-username="{{role_item.role_name}}" data-action="edit"><i class="fa fa-edit"></i></button>
        </td>
        <td class="text-center">
          <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="tooltip" data-placement="bottom" title="Delete" data-username="{{role_item.role_name}}" data-action="delete"><i class="fa fa-trash-o"></i></button>
        </td>
      </tr>
    {% end %}
    </tbody>
    </table>
  </div>
</div>
<script src="/js/temboard.settings.user.js"></script>
<script src="/js/datatables/datatables.min.js"></script>
<script src="/js/bootstrap-multiselect.js"></script>
<script>
$(document).ready(function() {
  $('#tableUsers').DataTable({
    stateSave: true
  });
});

$('#buttonLoadAddUserForm').click(function () {
  $('#UserModal').modal('show');
  $('[data-toggle=popover]').popover('hide');
  load_add_user_form('UserModal');
});

$(document).on('click', '[data-action=edit]', function () {
  $('#UserModal').modal('show');
  $('[data-toggle=popover]').popover('hide');
  load_update_user_form('UserModal', $(this).data('username'));
});

$(document).on('click', '[data-action=delete]', function () {
  $('#UserModal').modal('show');
  $('[data-toggle=popover]').popover('hide');
  load_delete_user_confirm('UserModal', $(this).data('username'));
});

</script>
{% end %}
