<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">

  <xi:include href="master.html" />
  <xi:include href="lib.html" />

  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
    <title>$c.project.name / Permissions</title>

    <py:def function="role_select(name)">
      <select name="$name">
        <option py:for="r in c.project.roles"
                value="$r._id">${r.display()}</option>
      </select>
    </py:def>
  </head>

  <body>
    <h1 class="title">Project Permissions for $c.project.shortname</h1>
    <div class="content">
      <div class="row">
        <div class="column grid_12">
          <div py:if="c.project.deleted" class="notice">This project has been deleted and is not visible to non-admin users</div>
          <form method="POST" class="can-retry" action="update_user_roles" id="roles_form">
            <input py:for="i,r in enumerate(c.project.roles)" py:if="r.name in ['Developer','Admin']"
              type="hidden"
              name="role-${i}.id"
              value="$r._id"/>
            <table>
              <thead>
                <tr>
                  <th>Role</th>
                  <th>Users</th>
                  <th>Add User</th>
                  <th/>
                </tr>
              </thead>
              <tbody>
                <tr py:for="i, r in enumerate(c.project.roles)" py:if="r.name in ['Developer','Admin']" class="${i%2 and 'even' or ''}">
                  <td>${r.display()}</td>
                  <td py:with="users=r.users_with_role()">
                    <py:if test="r.name != 'Admin' or len(users) > 1">
                      <span py:for="j, u in enumerate(users)" class="removable">
                        ${u.display_name}
                        <input type="hidden" name="role-${i}.users-${j}.id" value="$u._id"/>
                      </span>
                    </py:if>
                    <span py:if="r.name == 'Admin' and len(users) == 1">
                      ${users[0].display_name}
                    </span>
                  </td>
                  <td class="add_role">
                    ${c.user_select.display(name="role-%s.new.id" % i,value='')}
                  </td>
                </tr>
              </tbody>
            </table>
            <input type="submit" value="Save Changes"/>
          </form>
        </div>
      </div>
    </div>
    <div id="delete-confirm" style="display:none">
      Warning: You can not undo this. This will remove your permissions to manage this project.
    </div>
  </body>
  <script type="text/javascript">
    var user_id = '${c.user._id}';
    var id_to_delete = null;
    var roles_form = $('#roles_form');
    /*<![CDATA[*/
    var delete_user = function(){
      var vals = roles_form.serializeArray();
      var del_name = id_to_delete.name.replace('.id','.delete');
      vals.push({name:del_name, value:'Del'});
      $.post(roles_form[0].action, vals, function(){
        var holder = id_to_delete.parentNode.parentNode;
        holder.removeChild(id_to_delete.parentNode);
        var remaining = $('span', holder);
        if(remaining.length == 1){
          $(remaining).removeClass('removable');
        }
        id_to_delete = null;
      });
    };
    $("#delete-confirm").dialog({
      resizable: false,
      height:200,
      modal: true,
      autoOpen: false,
      buttons: {
        'Delete': function() {
          delete_user();
          $(this).dialog('close');
        },
        Cancel: function() {
          $(this).dialog('close');
          id_to_delete = null;
        }
      }
    });
    $('span.removable').click(function(e){
      // make sure this is still removable when clicked
      if($(e.target).hasClass('removable')){
        var id_input = $('input', this)[0];
        id_to_delete = id_input;
        if(id_input.value == user_id){
            $('#delete-confirm').dialog('open');
            $('div.ui-dialog-buttonpane > button:last').focus();
        }
        else{
          delete_user();
        }
      }
    });
    $('#roles_form').submit(function(e){
      var roles_form = $(this);
      var vals = roles_form.serialize();
      $('td.add_role input', this).each(function(){
        if(this.value){
          roles_form.append('<input type="hidden" name="'+this.name.replace('.id','.add')+'" value="Add"/>');
        }
      });
    });
    /*]]>*/
  </script>

</html>
