
<div class="container-fluid dashboard-content">
    <!-- Header -->
    {% set title = "Applications List" %}
    {% set navigation = [('Admin', ''), ('Applications', '')] %}
    {% include 'include_header.html' %}

    <!-- table row -->
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Applications List</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="applications-table" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                            <tr>
                                <th>id</th>
                                <th>code</th>
                                <th>created</th>
                                <th>status</th>
                                <th>alias</th>
                                <th>title</th>
                                <th>creator</th>
                                <th>template</th>
                                <th>invoice reference</th>
                                <th>pi-list</th>
                                <th>resource_allocation</th>
                                <th>extra</th>
                                <th>actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for a in applications %}
                            <tr>
                                <td>{{ a.id }}</td>
                                <td>{{ a.code }}</td>
                                <td>{{ a.created }}</td>
                                <td>{{ a.status }}</td>
                                <td>{{ a.alias }}</td>
                                <td>{{ a.title }}</td>
                                <td>{{ a.creator.name }}</td>
                                <td>{{ a.template.id }}</td>
                                <td>{{ a.invoice_reference }}</td>
                                <td>{{ a.users }}</td>
                                <td>{{ a.resource_allocation }}</td>
                                <td>{{ a.extra|tojson }}</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-light"><i class="far fa-edit"></i></button>
                                    <button class="btn btn-sm btn-outline-light"><i class="far fa-copy"></i></button>
                                    <button class="btn btn-sm btn-outline-light" data-toggle="modal" data-target="#deleteModal"
                                            data-id="{{ a.id }}" data-alias="{{ a.alias }}"><i class="far fa-trash-alt"></i></button>
                                </td>
                            </tr>
                            {% endfor %}

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end table row -->

</div>

<!-- Modal -->
<div class="modal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLongTitle">Delete User</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Delete</button>
      </div>
    </div>
  </div>
</div>


<script>
  $('#deleteModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget); // Button that triggered the modal

      // Extract info from data-* attributes
      var id = button.data('id')
      var name = button.data('name')

      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
      var modal = $(this)
      // modal.find('.modal-title').text('New message to ' + recipient)
      modal.find('.modal-body').html('<p> Do you want to DELETE user <b>' + name + '</b> (id = ' + id + ') ? </p>')
    })

    $('#applications-table').DataTable();
</script>