{% extends 'admin/layout/admin_app.html' %}

{% block content %}
    {% if messages %}
      <script>
          document.addEventListener('DOMContentLoaded', function() {
              {% for message in messages %}
                  showToastr("{{ message }}", "{{ message.tags }}");
              {% endfor %}
          });
      </script>
    {% endif %}
    <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <div class="content-header">
                <div class="container-fluid">
                    <div class="card">
                        <div class="row m-1">
                            <div class="col-sm-6">
                                <h1 class="ml-2">Role</h1>
                            </div><!-- /.col -->
                            <div class="col-sm-6">
                                <ol class="breadcrumb float-sm-right mr-2">
                                    <li class="breadcrumb-item"><a href="/admin/dashboard/">Home</a></li>
                                    <li class="breadcrumb-item active">Role</li>
                                </ol>
                            </div><!-- /.col -->
                        </div><!-- /.row -->
                    </div>
                </div>
                <!-- /.container-fluid -->
            </div>
            <!-- /.content-header -->

            <!-- Main content -->
            <section class="content">
                <div class="container-fluid">
                    <div class="card">
                        <div class="row">
                            {% if 1 in actions %}
                                <div class="col-12 text-right">
                                    <a class="btn btn-primary mr-4 mt-2" href="/admin/role-list/role-add-view/">Add Role</a>
                                </div>
                            {% endif %}
                            <div class="col-12">
                                <!-- /.card-header -->
                                <div class="card-body">
                                    <table id="role_list" class="table table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Status</th>
                                                <th>Created At</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for role in roles %}
                                            <tr>
                                                <td>{{ role.name }}</td>
                                                <td>
                                                    {% if role.status %} 
                                                        Active
                                                    {% else %}
                                                        Inactive
                                                    {% endif %}
                                                </td>
                                                <td>{{ role.created_at }}</td>
                                                <td>
                                                    {% if 2 in actions %}
                                                        <a class="btn btn-info btn-sm" href="{% url 'role_edit' role.id %}">
                                                            <i class="fas fa-pencil-alt" title="Edit"></i>
                                                        </a>
                                                    {% endif %}
                                                    {% if 3 in actions %}
                                                    <a class="btn btn-danger btn-sm" href="#" onclick="setDeleteUrl('{{ role.id }}')" data-toggle="modal" data-target="#deleteModal">
                                                        <i class="fas fa-trash" title="Delete"></i>
                                                    </a>
                                                    {% endif %}
                                                    {% if 4 in actions %}
                                                    <a class="btn btn-primary btn-sm" href="{% url 'role_view' role.id %}">
                                                        <i class="fas fa-eye" title="View"></i>
                                                    </a>
                                                    {% endif %}
                                                    {% if 2 in actions %}
                                                        <a class="btn btn-danger btn-sm" href="{% url 'role_permission' role.id %}">
                                                            <i class="fas fa-key" title="Permission"></i>
                                                        </a>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                    {% if roles.has_other_pages %}
                                        <div class="dataTables_paginate paging_simple_numbers">
                                            <ul class="pagination">
                                                {% if roles.has_previous %}
                                                    <li class="paginate_button page-item previous"><a href="?page={{ roles.previous_page_number }}" class="page-link">Previous</a></li>
                                                {% else %}
                                                    <li class="paginate_button page-item previous disabled"><a class="page-link">Previous</a></li>
                                                {% endif %}
                                                {% for i in roles.paginator.page_range %}
                                                    {% if roles.number == i %}
                                                        <li class="paginate_button page-item active"><a href="?page={{ i }}" class="page-link">{{ i }}</a></li>
                                                    {% else %}
                                                        <li class="paginate_button page-item"><a href="?page={{ i }}" class="page-link">{{ i }}</a></li>
                                                    {% endif %}
                                                {% endfor %}
                                                {% if roles.has_next %}
                                                    <li class="paginate_button page-item next"><a href="?page={{ roles.next_page_number }}" class="page-link">Next</a></li>
                                                {% else %}
                                                    <li class="paginate_button page-item next disabled"><a href="#" class="page-link">Next</a></li>
                                                {% endif %}
                                            </ul>
                                        </div>
                                    {% endif %}
                                </div>

                                
                            </div>
                            <!-- /.card -->
                        </div>
                        <!-- /.col -->
                    </div>
                </div>
                <!-- /.container-fluid -->
            </section>
            <!-- /.content -->
        </div>
    <!-- /.content-wrapper -->

    <!-- Delete Model -->
        <div class="modal fade" id="deleteModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Delete Role</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>Are you sure want to delete this Role?</p>
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
              <a id="deleteLink" href="#"><button type="button" class="btn btn-primary">Delete</button></a>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
    
{% endblock %}

{% block custom_js %}
    <script>
        $('#role_list').DataTable({
            "paging": false,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            columnDefs: [
                {
                    targets: [3],
                    orderable: false 
                }
            ],
            "order": [],
            "info": false,
            "autoWidth": false,
            "responsive": true,
        });
    </script>
    
    <script>
        function setDeleteUrl(roleId) {
            var deleteLink = document.getElementById('deleteLink');
            deleteLink.href = "{% url 'role_delete' 0 %}".replace('0', roleId);
        }
    </script>
{% endblock %}