include mixins

- var actual_background = "yellow";

mixin do_actor(actor)
	- style="cursor: pointer;  padding-top: 5px; padding-bottom: 5px;";
	- 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)

.subroot
	.new_flex_zero(style="margin-bottom: 20px;")
		.container-fluid
			h4 Beteiligten aus der Liste hinzufügen
		
			label
				input(type="checkbox", checked, id="show_retired")
				span 
				span Ausgeschiedene anzeigen
	
			form(class="form-horizontal", id="form-filter")
				.form-group
					label(for='edit_filter', class="col-sm-1 control-label") Filter
					.col-sm-11
						input(id="edit_filter", type="text", class="form-control", oninput="adjust_visible_actors(this);")
			script.
				$("#form-filter").on('submit', function(e){
				console.log('FILTER SUBMIT');
				e.preventDefault();
				});
				// HINT: the 'autofocus'-attribute is obviously only interpreted once!!!
				$("#edit_filter").focus();
		
			form(class="form-horizontal", method="POST", action="#{pentry_edit_base}/add_actor", id="form-actorselector")
				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", id="for_role", value="#{for_role}")
				button(class="btn btn-success btn-sm", type="submit", id="submit_button") 
					span(class="glyphicon glyphicon-ok", aria-hidden="true")
					span 
					span Übernehmen
						
				button(class="btn btn-warning btn-sm", type="button", onclick="goto_mainpage();") 
					span(class="glyphicon glyphicon-remove-circle", aria-hidden="true")
					span 
					span Abbrechen

	.new_flex_one(style="padding-bottom: 200px;")
		.container-fluid
			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);
			var actual = $("#actual_actor_id").val();
			console.log(actual);
			if(actual === actor_id)
			{
				console.log("NOTHIN CHANGED");
				return;
			}
			if(actual !== "") {	
				$("#"+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);
		}
		
		function set_visibility_according_to_filter(substrRegex, elems) {
			var actual_id = $("#actual_actor_id").val();
			elems.each(function(index) {
				my_span = $(this).find(':first-child');
				var txt = my_span.text();
				var id = my_span.prop('id');
				
				if(substrRegex.test(txt)) {
					$(this).show();
					if(actual_id === id)
						$("#submit_button").prop('disabled', false);
				}
				else {	
					$(this).hide();
					if(actual_id === id)
						$("#submit_button").prop('disabled', true);
				}
			});
		}
		
		function adjust_visible_actors(my_input) {
			console.log(my_input.value);
			
			// regex used to determine if a string contains the substring `q`
			substrRegex = new RegExp(my_input.value, 'i');
			
			set_visibility_according_to_filter(substrRegex, $("[data-status='active']"));
			
			if(	$("#show_retired").prop('checked') ) {
				set_visibility_according_to_filter(substrRegex, $("[data-status='retired']"));
			}
		}
		
		$("#form-actorselector").on('submit', function(e) {
			var data = {
				for_role: $("#for_role").val(),
				name 	: $("#actual_actor_name").val(),
				id   	: $("#actual_actor_id").val()
			};
			add_involved(data);
			
			e.preventDefault();
		});