include mixins

- var my_roles_string = JSON.stringify(roles);
- var my_already_defined_roles = JSON.stringify(already_defined_roles);

doctype html
html
	include header
	script(src="/javascripts/typeahead.jquery.min.js")
	link(href="/stylesheets/mytypeahead.css", rel="stylesheet")
	script(src="/javascripts/validator.min.js")
	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.
								Bitte geben Sie den Namen für den Dienst ein!
							
		
					.flex-one(style="overflow: auto; padding-left: 15px; padding-right: 15px;")
						form(class="form-horizontal" method="POST", action="#{pentry_edit_base}/#{submit_dest}", id="form")
							input(type="hidden", name="role_uid", value="#{role_uid}")
							button(class="btn btn-success btn-xs", type="submit", id="submit_button") 
								span(class="glyphicon glyphicon-ok", aria-hidden="true")
									span 
									span Übernehmen
							
							br
							span  
							
							.form-group
								label(for='role_name', class="col-sm-2 control-label") Name
								.col-sm-10
									input(type="text", name="role_name", id="role_name", class="col-sm-12 typeahead form-control", data-role_is_unique="bar", value="#{role_name}", required)
									.help-block.with-errors

						script.
							
							var substringMatcher = function(strs) {
								return function findMatches(q, cb) {
									var matches, substringRegex;

									// an array that will be populated with substring matches
									matches = [];

									// regex used to determine if a string contains the substring `q`
									substrRegex = new RegExp(q, 'i');

									// iterate through the pool of strings and for any string that
									// contains the substring `q`, add it to the `matches` array
									$.each(strs, function(i, str) {
										if (substrRegex.test(str)) {
											matches.push(str);
										}
									});

									cb(matches);
								};
							};

							var roles = !{my_roles_string};
							
							$("#role_name").typeahead({
							  hint: true,
							  highlight: true,
							  minLength: 0
							},
							{
							  name: 'roles',
							  source: substringMatcher(roles)
							});
							
							var submitted = false;
							
							$('#form').validator({ 
								custom: {
											role_is_unique: function(el) 
											{ 
												var already_defined_roles = !{my_already_defined_roles};
												
												for(idx in already_defined_roles)
												{
													if(already_defined_roles[idx] === $("#role_name").val())
														return false;
												}
												
												return true;
											}
										}, 
								errors: {
											role_is_unique: "Ein Dienst mit gleichem Namen existiert bereits; bitte wählen Sie einen anderen Namen!"
									}
							}).on('submit', function(e) {
								if( ! e.isDefaultPrevented() )
								{
									console.log('SUBMITTED: ');
									console.log(submitted);
									if(submitted)
										e.preventDefault();
									submitted = true;
								}
							});
})