{% import "Toucan/macros/master.html" as master with context %}
{% import "Toucan/macros/forms.html" as f 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>

<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>



<!-- MODAL: EDIT USER -->
<div class="modal fade" id="modal-edit-user-roles" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">

  <form method="POST" action="{{url_for('UserAdmin:roles')}}">
    {{- f.csrf_field() -}}
    <input type="hidden" name="id" value="">
    <input type="hidden" name="action" value="">

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Edit User Role</h4>
      </div>
      <div class="modal-body">

            <div class="form-group">
                <label>Name</label>
                <input type="text" class="form-control"  name="name" placeholder="Name" value="">
            </div>

            <div class="form-group">
                <label>Level</label>
                {{ f.tag("select", 'level', options=levels_options) }}
            </div>
      </div>

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

  </form>
  </div>
</div>

</div>

<script>
    $(function(){

        var modalEditRoles = $("#UserAdmin #modal-edit-user-roles")
        modalEditRoles.on('show.bs.modal', function (event) {

            var button = $(event.relatedTarget)
            var modal = $(this)


            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>