{% import "Juice/macros/html.html" as html with context %}
{% import "Juice/macros/forms.html" as forms with context %}
{% import "Juice/macros/widget.html" as widget with context %}

<div id="UserAdmin">

    <div class="pull-right">
        <div class="btn btn-info"
                data-toggle="modal"
                data-target="#modal-edit-user-roles"
                data-id=""
                data-name=""
                data-level=""
                data-action="create"
                >New Role</div>
    </div>
    <div class="clearfix"></div>

    <br>

{% call widget.panel("User Roles", type="table") %}
    <table class="table table-bordered">
        <thead>
            <th>Name</th>
            <th>Level</th>
        </thead>

        <tbody>
            {% for role in roles %}
            <tr>

                <td><a href="javascript://"
                        data-toggle="modal"
                        data-target="#modal-edit-user-roles"
                        data-id="{{ role.id }}"
                        data-name="{{ role.name }}"
                        data-level="{{ role.level }}"
                        >{{ role.name }}</a></td>
                <td>{{ role.level }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
{% endcall %}


{% call widget.modal("Edit User Role", id="modal-edit-user-roles") %}

    <footer>
        <button type="submit" class="btn btn-success pull-left"><i class="fa fa-check"></i> SAVE</button>
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-danger pull-right delete-btn" data-dismiss="modal"><i class="fa fa-trash"></i> Delete</button>
    </footer>

    {% call forms.post('UserAdmin:roles') %}
        {{ forms.hidden(name="id", value="") }}
        {{ forms.hidden(name="action", value="") }}
        {{ forms.input(label="Name", name="name", data={"validation": "required"}) }}
        {{ forms.select(label="Level", name="level", options=levels_options) }}
    {% endcall %}

{% endcall %}



<script>
    $(function(){

        var modalEditRoles = $("#modal-edit-user-roles");
        Juice.Widget.onModalShow(modalEditRoles, function(button, modal){

            if(button.data("action") == "create") {
                modal.find(".delete-btn").hide()
            } else {
                modal.find(".delete-btn").show()
            }

            modal.find("[name='id']").val(button.data("id"))
            modal.find("[name='name']").val(button.data("name"))
            modal.find("[name='level']").val(button.data("level"))
            modal.find("[name='action']").val("update")
        })

        modalEditRoles.find(".delete-btn").click(function(){
            if(confirm("Do you want to delete this role?")) {
                modalEditRoles.find("[name='action']").val("delete")
                modalEditRoles.find("form").first().submit()
            }
        })

    })
</script>