{% extends 'template.html' %}

{% block title %}Clients{% endblock %}

{% block page_content %}

    <div class="card card-fluid">
      <h6 class="card-header"> Clients </h6><!-- .card-body -->
      <div class="card-body">
        <!-- .table-responsive -->
        <div class="table-responsive">
          <!-- .table -->
          <table class="table" id="clients">
            <!-- thead -->
            <thead>
              <tr>
                <th> Id </th>
                <th> Name </th>
                <th> Phone </th>
                <th style="width:150px; min-width:150px;"> &nbsp; </th>
              </tr>
            </thead><!-- /thead -->
            <!-- tbody -->
            <tbody>
              {% for client in clients %}
              <!-- tr -->
              <tr>
                <td class="align-middle"> <span class="badge badge-primary badge-pill"> {{ client.id }} </span></td>
                <td class="align-middle"> <a href="/clients/{{ client.id }}/show"> {{ client.name }} </a> </td>
                <td class="align-middle"> {{ client.phone }} </td>
                <td class="align-middle text-right">
                  {% if {module: 'clients', action: 'show'} in privileges %}
                  <a href="/clients/{{ client.id }}/show" class="btn btn-sm btn-icon btn-info"><i class="fa fa-eye"></i> <span class="sr-only">Show</span></a>
                  {% endif %}
                  {% if {module: 'clients', action: 'edit'} in privileges %}
                  <a href="/clients/{{ client.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: 'clients', action: 'delete'} in privileges %}
                  <a href="#" data-href="/clients/{{ client.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>
<script src="/assets/vendor/datatables/extensions/buttons//jszip.min.js"></script>
<script src="/assets/javascript/pages/dataTables.bootstrap.js"></script>

<script type="text/javascript">
  $('#clients').DataTable( {
      responsive: true,
      "lengthMenu": [10, 25, 50, 100],
      dom: 'Blfrtip',
      buttons: [
        {
           extend: 'copy',
           exportOptions: {
              columns: 'th:not(:last-child)'
           }
        },
        {
           extend: 'print',
           exportOptions: {
              columns: 'th:not(:last-child)'
           }
        },
        {
           extend: 'excel',
           exportOptions: {
              columns: 'th:not(:last-child)'
           }
        }
      ]
  } );
</script>
{% endblock %}