include mixins
doctype html
html
	include header
	link(href="/stylesheets/bootstrap-datepicker.min.css", rel="stylesheet")
	script(src='/javascripts/bootstrap-datepicker.min.js' )
	script(src='/javascripts/bootstrap-datepicker.de.min.js' )
	script(src='/javascripts/pfiswebsocket.js')
	script(src='/templates/pentrymove_parishday.js')
	script(src='/javascripts/runtime.js')
	link(href="/stylesheets/style_week.css", rel="stylesheet")
	style.
		.cell_element { display: table-cell; }
		.td_new_celebration { padding-top: 10px; }
		.give_margin_left { padding-left: 10px; }
		@media only screen and (max-width: 768px) {
			.cell_element {
				display: block;
				margin-bottom: 15px;
			}
			.td_new_celebration { padding-top: 0px; }
			.give_margin_left { padding-left: 0px; }
		}
	body
		
		.root
		
			.new_flex_zero
				+nav("PfarrInfoSystem", "dropdown_menu")
				
				.container-fluid
					h1 #{pentrytype_pretty} #{clone_or_move_pretty_verb2}
						.small &raquo#{pentryname}&laquo
							.small(style="white-space: nowrap; font-size: 80%;") am #{date.weekday_short}, #{date.day}. #{date.month} #{date.year}</span>

				.container-fluid
					
					p Auf welches Datum soll #{clone_or_move_pretty_verb} werden?
					
					form(method="POST", action="/pentry/#{date.date}/#{pentrytype}/#{uuid}/#{clone_or_move}", role="form", id="form-clonemove")
						input(type="hidden", name="pcalview", value="#{pcalview}")
						input(type="hidden", name="new_date", id="new_date", value="#{date.date}")
						
						button(class="btn btn-success btn-sm", type="button", onclick="checked_submit()")
							span(class="glyphicon glyphicon-ok", aria-hidden="true")
							span 
							span #{clone_or_move_pretty_noun}
							
					.alert.alert-danger(style="display: none")
						a(class="close", data-hide="alert") &times;
						strong Fehler!
						span 
						span Es kann nicht auf den ursprünglichen Tag #{clone_or_move_pretty_verb} werden!
					
					//- http://eternicode.github.io/bootstrap-datepicker/
					
	
							
			.new_flex_one(style="margin-top: 15px;", id="scroll_parent")
				.container-fluid
					#datepicker.cell_element(data-date="#{date.date}", style="vertical-align: top;")
					.cell_element.give_margin_left(id="dayinfo", style="width: 100%;")
							
		script.
			
			// WebSocket setup
			var ws = new PfISWebSocket("#{sessionuuid}");
			ws.bind_standard_close_handler();
			
			
			ws.bind('get_parishday_result',function(data){
					console.log('got_parishday');
					console.log(data);
					var html = pentrymove_parishday_template({day: data.day } );
					$("#dayinfo").html(html);
					$("#scroll_parent").scrollTop(0);
				});
		
			$('#datepicker').datepicker({format: "yyyy-mm-dd", language: "de", calendarWeeks: true, todayHighlight: true});
			$("#datepicker").on("changeDate", function(event) {
						
					var d = $("#datepicker").datepicker('getFormattedDate');
					console.log('date: ', d);
						
					$("#new_date").val(d);
					
					$(".alert").hide();
					
					ws.send('get_parishday', { date: d });
				});
				
			checked_submit = function(e) {
				var new_date = $("#new_date").val();
				console.log(new_date);
				
				if(new_date === "#{date.date}") {
					$(".alert").show();
					return;
				}
				
				$("#form-clonemove").submit();
			}
			$(function(){
				ws.send('get_parishday', { date: "#{date.date}" });
				
				$("[data-hide]").on("click", function(){
					$("." + $(this).attr("data-hide")).hide();
				/*
				 * The snippet above will hide all elements with the class specified in data-hide,
				 * i.e: data-hide="alert" will hide all elements with the alert property.
				 *
				 * Xeon06 provided an alternative solution:
				 * $(this).closest("." + $(this).attr("data-hide")).hide();
				 * Use this if are using multiple alerts with the same class since it will only find the closest element
				 * 
				 * (From jquery doc: For each element in the set, get the first element that matches the selector by
				 * testing the element itself and traversing up through its ancestors in the DOM tree.)
				*/
				});
			});