{% extends 'template.html' %}

{% block title %}Users{% endblock %}

{% block button_toolbar %}
  <div class="btn-toolbar">
      {% if {module: 'users', action: 'add'} in privileges %}
      <a href="/users/add" type="button" class="btn btn-primary">Add User</a>
      {% endif %}
  </div>
{% endblock %}

{% block page_content %}

    <div class="card card-fluid">
      <h6 class="card-header"> Users </h6><!-- .card-body -->
      <div class="card-body">
        <!-- .table-responsive -->
        <div class="table-responsive">
          <!-- .table -->
          <table class="table" id="users">
            <!-- thead -->
            <thead>
              <tr>
                <th> Name </th>
                <th> Email </th>
                <th> Privilege </th>
                <th> Status </th>
                <th style="width:100px; min-width:100px;"> &nbsp; </th>
              </tr>
            </thead><!-- /thead -->
            <!-- tbody -->
            <tbody>
              {% for user in users %}
              <!-- tr -->
              <tr>
                <td class="align-middle"> {{ user.name }} </td>
                <td class="align-middle"><strong> {{ user.email }} </strong></td>
                <td class="align-middle"> {{ user.privilege }} </td>
                <td class="align-middle">
                    {% if user.is_active == 1 %}<span class="badge badge-success">active</span>
                    {% else %} <span class="badge badge-danger">inactive</span>
                    {% endif %}
                </td>
                <td class="align-middle text-right">
                  {% if {module: 'users', action: 'edit'} in privileges %}
                  <a href="/users/{{ user.id }}/edit" class="btn btn-sm btn-icon btn-warning"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></a>
                  {% endif %}

                  {% if {module: 'users', action: 'delete'} in privileges %}
                  <a href="#" data-href="/users/{{ user.id }}/delete" class="btn btn-sm btn-icon btn-danger" data-toggle="modal" data-target="#alerdDelete"><i class="far fa-trash-alt"></i> <span class="sr-only">Delete</span></a>
                  {% endif %}
                </td>
              </tr><!-- /tr -->
              {% endfor %}
            </tbody><!-- /tbody -->
          </table><!-- /.table -->
        </div><!-- /.table-responsive -->
      </div><!-- /.card-body -->
    </div><!-- /.card -->

{% endblock %}

{% block page_includes %}
<script src="/assets/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="/assets/vendor/datatables/extensions/buttons/dataTables.buttons.min.js"></script>
<script src="/assets/vendor/datatables/extensions/buttons/buttons.bootstrap4.min.js"></script>
<script src="/assets/vendor/datatables/extensions/buttons/buttons.html5.min.js"></script>
<script src="/assets/vendor/datatables/extensions/buttons/buttons.print.min.js"></script> <!-- END PLUGINS JS -->
<script src="/assets/javascript/pages/dataTables.bootstrap.js"></script>

<script type="text/javascript">
  $('#users').DataTable( {
      responsive: true,
      "lengthMenu": [10, 25, 50, 100],
      dom: 'Blfrtip',
      order: [[ 0, "asc" ]]
  } );
</script>
{% endblock %}