<div class="modal-head">
  <h2><%= @project ? "Edit Permission #{message("projects_role.#{h @role }")} For: " + h(@project.name) : "Edit Global Permission: #{message("global_permissions.#{h @role}")}" -%></h2>
</div>

<div class="modal-body">
  <div id="select-users-permissions"></div>
</div>

<div class="modal-foot">
  <a href="#" onclick="window.location.reload();return false" id="cancel-update-permission-users"><%= h message('close') -%></a>
</div>

<script>
  var selectList = new SelectList({
    el: '#select-users-permissions',
    width: '100%',
    format: function (item) { return item.name + ' <div class="subtitle">' + item.login + '</div>'; },
    searchUrl: baseUrl + '/permissions/search_users?permission=<%= u @role -%><%= @project ? "&component=" + u(@project.key) : "" -%>',
    selectUrl: baseUrl + '/api/permissions/add',
    deselectUrl: baseUrl + '/api/permissions/remove',
    extra: {
      permission: '<%= escape_javascript @role -%>'
      <%= @project ? ", component: '" + escape_javascript(@project.key) + "'" : "" %>
    },
    selectParameter: 'user',
    selectParameterValue: 'login',
    labels: {
      selected: 'With',
      deselected: 'Without',
      all: 'All'
    },
    tooltips: {
      select: 'Click to grant the permission to the user',
      deselect: 'Click to revoke the permission from the user'
    }
  });
</script>
