{% extends 'template.html' %}

{% block title %}Job Files{% endblock %}

{% block button_toolbar %}
  <div class="btn-toolbar">
      {% if {module: 'job_files', action: 'upload'} in privileges %}
      <a href="/job-files/upload" type="button" class="btn btn-primary">Upload Job Files</a>
      {% endif %}
  </div>
{% endblock %}

{% block page_content %}

    <div class="card card-fluid">
      <h6 class="card-header"> Uploaded Job Files </h6><!-- .card-body -->
      <div class="card-body">
        <!-- .table-responsive -->
        <div class="table-responsive">
          <!-- .table -->
          <table class="table" id="job_files">
            <!-- thead -->
            <thead>
              <tr>
                <th> Name </th>
                <th> Size </th>
                <th> Date </th>
                <th style="width:100px; min-width:100px;"> &nbsp; </th>
              </tr>
            </thead><!-- /thead -->
            <!-- tbody -->
            <tbody>
              {% for jobFile in jobFiles %}
              <!-- tr -->
              <tr>
                <td class="align-middle"><div class="tile bg-success mr-1"><span class="menu-icon fas fa-file-archive"></span></div> <a href="#">{{ jobFile.name }}</a> </td>
                <td class="align-middle"> {{ jobFile.size }} MB </td>
                <td class="align-middle"> {{ jobFile.date }} </td>
                <td class="align-middle text-right">
                  {% if {module: 'job_files', action: 'delete'} in privileges %}
                  <a href="#" data-href="/job-files/0/delete?filename={{ jobFile.name }}" 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">
  $('#job_files').DataTable( {
      responsive: true,
      "lengthMenu": [10, 25, 50, 100],
      dom: 'l'
  } );
</script>
{% endblock %}