include mixins

- var actual_background = "yellow";

mixin punit(pu)
	- style="cursor: pointer; ";
	- style_text="";
	- if(actual_punit_dn === pu.dn) { style+="background-color: " + actual_background; style_text="font-weight: bold;" }
	li(class="list-group-item", style=style, onclick="select_pastoralunit('#{pu.dn}');")
		span(id="#{pu.dn}", style=style_text) #{pu.name}
	if pu.subunits.length > 0
		ul(class="list-group", style="margin-left: 12px; margin-bottom: 0px;")
			each sub in pu.subunits
				+punit(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 den zugehörigen pastoralen Kontext aus!
							
		
					.flex-one(style="overflow: auto; padding-left: 15px; padding-right: 15px;")
						form(class="form-horizontal" method="POST", action="#{pentry_edit_base}/pastoralunit_selected")
							input(type="hidden", name="actual_punit_dn", id="actual_punit_dn", value="#{actual_punit_dn}")
							input(type="hidden", name="actual_punit_name", id="actual_punit_name", value="#{actual_punit_name}")
							button(class="btn btn-success btn-xs", type="submit") 
								span(class="glyphicon glyphicon-ok", aria-hidden="true")
								span 
								span Übernehmen
								
							ul(class="list-group")
								for pu in pastoralunits
									+punit(pu)
							
							
						script.
							select_pastoralunit = function(punit_dn)
							{
								console.log("SELECTED: " + punit_dn)
								actual = $("#actual_punit_dn").val();
								if(actual === punit_dn)
								{
									console.log("NOTHIN CHANGED");
									return;
								}
								
								actual_jquery = actual.replace(/\//g, "\\/");
								$("#"+actual_jquery).css("font-weight", "normal");
								$("#"+actual_jquery).parent().css("background-color", "#fff");
								
								punit_dn_jquery = punit_dn.replace(/\//g, "\\/");
								console.log(punit_dn_jquery);
								
								$("#"+punit_dn_jquery).css("font-weight", "bold");
								$("#"+punit_dn_jquery).parent().css("background-color", "#{actual_background}");
								
								$("#actual_punit_dn").val(punit_dn);
								$("#actual_punit_name").val($("#"+punit_dn_jquery).text());
							}