{% extends 'template.html' %}

{% block title %}Content Units{% endblock %}

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

{% block page_content %}

    <div class="card card-fluid">
      <h6 class="card-header"> Content Units </h6><!-- .card-body -->
      <div class="card-body">
        <!-- .table-responsive -->
        <div class="table-responsive">
          <!-- .table -->
          <table class="table" id="content_units">
            <!-- thead -->
            <thead>
              <tr>
                <th> Id </th>
                <th> Name </th>
                <th> Status </th>
                <th style="width:100px; min-width:100px;"> &nbsp; </th>
              </tr>
            </thead><!-- /thead -->
            <!-- tbody -->
            <tbody>
              {% for contentUnit in contentUnits %}
              <!-- tr -->
              <tr>
                <td class="align-middle"> <span class="badge badge-primary badge-pill"> {{ contentUnit.id }} </span></td>
                <td class="align-middle"> {{ contentUnit.name }} </td>
                <td class="align-middle">
                    {% if contentUnit.status == 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: 'content_units', action: 'edit'} in privileges %}
                  <a href="/content-units/{{ contentUnit.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: 'content_units', action: 'delete'} in privileges %}
                  <a href="#" data-href="/content-units/{{ contentUnit.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">
  $('#content_units').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 %}