{% extends "./template.html" %}
{% block content %}
{% load static %}
    <script type="text/javascript" src="{% static 'NearBeach/javascript/csrf_finder.js' %}"></script>

    <div class="card mt-4">
        <div class="card-header">
            <h2>Search Permission Sets</h2>
        </div>
        <div class="card-body">
            <a href="{% url 'new_permission_set' %}">Create new permission set</a>
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <td>Permission Set Name</td>
                        <td>Date Created</td>
                        <td>Delete/Restor</td>
                    </tr>
                </thead>
                {% for row in permission_set_results %}
                    <tr>
                        {% if row.permission_set_id == 1 %}
                            <td>Administration</td>
                            <td>{{ row.date_created }}</td>
                            <td> --- </td>
                        {% else %}
                            <td><a href="{% url 'permission_set_information' row.permission_set_id %}">{{ row.permission_set_name }}</a></td>
                            <td>{{ row.date_created }}</td>
                            <td>
                                {% if row.is_deleted == 'FALSE' %}
                                    <a href="javascript:void(0)" onclick="confirm_delete_permission_set({{ row.permission_set_id }})">Delete</a>
                                {% endif %}
                            </td>
                        {% endif %}
                    </tr>
                {% endfor %}
            </table>
        </div>
    </div>

    <!-- CONFIRM DELETION OF PERMISSION SET -->
    <div class="modal" tabindex="-1" role="dialog" id="confirm_permission_set_delete">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <!-- HEADER -->
                <div class="modal-header">
                    <h5 class="modal-title">Delete Permission Set?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <!-- BODY -->
                <div class="modal-body">
                    <p>
                        Are you sure you want to delete the permission set? Deleting a permission set will ALSO delete any users connected with this permission set.
                        <strong> This can not be reversed.</strong>
                    </p>
                </div>


                <!-- FOOTER -->
                <div class="modal-footer">
                    <button id="remove_permission_confirmed" disabled type="button" class="btn btn-danger btn-ok">Delete Permission Set</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function confirm_delete_permission_set(permission_set_id) {
            /*
            First we have to confirm that the user wants to delete the permission set. This will bring up a modal
            and force them to wait 2 seconds before deleting. It also warns them about the dangers of doing this.

            Method
            ~~~~~~
            1. Bring up modal
            2. Change the remove permission button attribute to the correct function
            2. Wait 2 seconds
            3. Enable button
             */
            $("#confirm_permission_set_delete").modal("show");

            //Change the attribute for the confirmation button
            $("#remove_permission_confirmed").attr('onclick','delete_permission_set("' + permission_set_id + '");')

            //Set the timeout of the button
            setTimeout(function() {
                document.getElementById("remove_permission_confirmed").disabled = false;
            }, 2000);
        }


        function delete_permission_set(permission_set_id) {
            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            $.ajax({
                url: '/delete_permission_set/' + permission_set_id + '/',
                data: {},
                dataType: 'HTML',
                type: 'POST',
                success: function(data) {
                    window.location.reload();
                },
                error: function() {
                    alert("Sorry, the permission set was not deleted");
                }
            })
        }
    </script>
{% endblock %}