include mixins

- var actual_background = "yellow";

mixin do_location(location)
	- style="cursor: pointer;";
	- style_text="";
	- if(actual_location_id === location.id) { style+="background-color: " + actual_background; style_text="font-weight: bold;" }
	li(class="list-group-item" style=style, onclick="select_location('#{location.id}')")
		table(width="100%")
			tr
				td(style="width: 80%;")
					span(id="#{location.id}", style=style_text) #{location.name}
				td
					span(id="#{location.id}_sign", style=style_text) #{location.sign}
			//-div(style="float: left;")
			
			//-div(style="float: right;")
			

mixin do_unit(unit)
	li(class="list-group-item")
		<b>#{unit.name}</b>
	if unit.locations.length > 0
		ul(class="list-group", style="margin-left: 12px; margin-bottom: 0px;")
			each location in unit.locations
				+do_location(location)
	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 Ort aus der Liste!
							
					.flex-one(style="overflow: auto; padding-left: 15px; padding-right: 15px;")
						form(class="form-horizontal" method="POST", action="#{pentry_edit_base}/add_predefined_location")
							input(type="hidden", name="actual_location_id", id="actual_location_id", value="#{actual_location_id}")
							input(type="hidden", name="actual_location_name", id="actual_location_name", value="#{actual_location_name}")
							input(type="hidden", name="actual_location_sign", id="actual_location_sign", value="#{actual_location_sign}")
							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_location_id}" === "")
								$("#submit_button").prop('disabled', true);
								
							select_location = function(location_id)
							{
								console.log("SELECTED: " + location_id)
								actual = $("#actual_location_id").val();
								if(actual === location_id)
								{
									console.log("NOTHIN CHANGED");
									return;
								}
								
								$("#"+actual).css("font-weight", "normal");
								$("#"+actual+"_sign").css("font-weight", "normal");
								$("#"+actual).closest("li").css("background-color", "#fff");
								
								$("#"+location_id).css("font-weight", "bold");
								$("#"+location_id+"_sign").css("font-weight", "bold");
								$("#"+location_id).closest("li").css("background-color", "#{actual_background}");
								
								$("#actual_location_id").val(location_id);
								$("#actual_location_name").val($("#"+location_id).text());
								$("#actual_location_sign").val($("#"+location_id+"_sign").text());
								
								$("#submit_button").prop('disabled', false);
							}