<div id="proctor_${element_id}">
    <h2>Welcome: <b>${pp.user.profile.name or pp.user}</b></h2>

    <p>${name} has not been released</p>

    <p><input id="proctor_${element_id}" type="button" value="Request Access"></p>

    <div id="proctor_stat_${element_id}"></div>

    % if is_staff:

    <p><input id="proctor_release" type="button" value="Staff override: Release Module for myself"/></p>

    % endif

</div>

% if is_staff:
<script type="text/javascript">
do_release = function(){
    $.get( "${ajax_url}/release", function( data ) {
      $( "#proctor_release" ).html( data );
      procrel.set_skiperr();
      alert( "release successful" );
      location.reload();
    });
}
$('#proctor_release').click(do_release);
</script>
% endif

<script type="text/javascript">
procrel = (function(){
    var el = $('#proctor_${element_id}');

    var skiperr = false;

    var set_skiperr = function(){ skiperr = true; }

    var mkurl = function(cmd) {
        ps = encodeURIComponent("${pp.procset_name}");
        return "${pp.proc_url}/cmd/" + cmd + "/${pp.user.id}/" + ps;
    }

    var statel = $('#proctor_stat_${element_id}');

    var setstat = function(status){
        statel.html('<font color="green">' + status + '</font>');
    }

    var do_pp_get = function(cmd, gfun){
        $.ajax({ url: mkurl(cmd),
                 type: 'GET',
		 data: { "uname": "${pp.user.username}",
		         "name": "${pp.user.profile.name}"
		       },
		 xhrFields: {
		      withCredentials: true
		 },
		 username: "${pp.proc_user}",
		 password: "${pp.proc_pass}",
                 success: gfun,
		 dataType: "json",
                 error: function(xhr, status, error) {
		     if (!skiperr){
                         alert('Error: cannot connect to server ' + status + " error: " + error);
		     }
                 }
               });
    }

    var check_access = function(){
        do_pp_get('status', function(data){
	    console.log(data);
	    if (data.enabled) {
	        alert ("Access Granted!");
		location.reload();
	    }
	});
    }

    var check_count = 0;

    var periodic_check = function() {
        check_count = check_count + 1;
	if (check_count < 100){			// >
            setTimeout(periodic_check, 2000);
	}
	check_access();
    }

    var make_request = function(){
        check_count = 0;
	do_pp_get('request', function(result, status, xhr){
		     setstat(result.status);
		     periodic_check();
                 });
    }

    el.click(make_request);

    return { "check": check_access, "make": make_request,
             "mkurl": mkurl, "do_pp_get": do_pp_get,
	     "set_skiperr": set_skiperr
	   };

}() );
</script>
