include mixins

- var actual_background = "yellow";

mixin do_actor(actor)
	- style="cursor: pointer; ";
	- style_text="";
	- if(actual_actor_id === actor.id) { style+="background-color: " + actual_background; style_text="font-weight: bold;" }
	li(class="list-group-item", style=style, onclick="select_actor('#{actor.id}')", data-status="#{actor.status}")
		span(id="#{actor.id}", style=style_text) #{actor.name}

mixin do_unit(unit)
	li(class="list-group-item")
		<b>#{unit.name}</b>
	if unit.actors.length > 0
		ul(class="list-group", style="margin-left: 12px; margin-bottom: 0px;")
			each actor in unit.actors
				+do_actor(actor)
	if unit.subunits.length > 0
		ul(class="list-group", style="margin-left: 12px; margin-bottom: 0px;")
			each sub in unit.subunits
				+do_unit(sub)
	
doctype html
html
	include header
	body(style="overflow: hidden;")
		
		.container-horizontal(style="overflow: hidden;")
    
			.flex-one(style="overflow: hidden; height: 100%;")
      
				.container-vertical
      
					.flex-zero
						+nav("PfarrInfoSystem", "dropdown_menu")
						
						.container-fluid(style="margin-bottom: 18px;")
							p.
								Wählen Sie einen Beteiligten aus der Liste!
							
							label
								input(type="checkbox", checked, id="show_retired")
								span 
								span Ausgeschiedene anzeigen
		
					.flex-one(style="overflow: auto; padding-left: 15px; padding-right: 15px;")
						form(class="form-horizontal" method="POST", action="#{pentry_edit_base}/add_actor")
							input(type="hidden", name="actual_actor_id", id="actual_actor_id", value="#{actual_actor_id}")
							input(type="hidden", name="actual_actor_name", id="actual_actor_name", value="#{actual_actor_name}")
							input(type="hidden", name="for_role", value="#{for_role}")
							button(class="btn btn-success btn-xs", type="submit", id="submit_button") 
								span(class="glyphicon glyphicon-ok", aria-hidden="true")
								span 
								span Übernehmen
								
							ul(class="list-group")
								for unit in units
									+do_unit(unit)
							
						script.
							if("#{actual_actor_id}" === "")
								$("#submit_button").prop('disabled', true);
								
							$("#show_retired").change(function()
								{
									if(this.checked)
										$("[data-status='retired']").show();
									else
										$("[data-status='retired']").hide();
								});
							
							select_actor = function(actor_id)
							{
								console.log("SELECTED: " + actor_id)
								actual = $("#actual_actor_id").val();
								if(actual === actor_id)
								{
									console.log("NOTHIN CHANGED");
									return;
								}
								
								$("#"+actual).css("font-weight", "normal");
								$("#"+actual).parent().css("background-color", "#fff");
								
								$("#"+actor_id).css("font-weight", "bold");
								$("#"+actor_id).parent().css("background-color", "#{actual_background}");
								
								$("#actual_actor_id").val(actor_id);
								$("#actual_actor_name").val($("#"+actor_id).text());
								
								$("#submit_button").prop('disabled', false);
							}