{% extends "snippets/layout.html" %}

{% block title 'Hochzeit: f(m) { return "2023-04-01"; }' %}

{% block css %}
	.main {
		margin-top: 4rem;
	}

	.index-list > li {
		margin-bottom: 1rem;
	}

	body {
		background-color: #1c1c1c;
	}

	#footer {
		background-color: #e1e1e1;
	}
	.string {
		color: #ddd277;
	}
	.keyword {
		color: #cd015f;
	}
	.tab-over-space {
		margin-left: 2rem;
	}
	@media (max-width: 490px) {
		.tab-over-space-on-mobile {
			margin-left: 2rem;
		}
	}
	.text-muted {
		color: #808080 !important;
	}

	fform {
		padding: 1.5rem;
		margin-right: 0;
		margin-left: 0;
		border-width: .2rem;
		position:relative;
	}

	.btn-submit {
		background-color: #f07206;
		border-color: #f07206;
	}
	.hidden {
		display:none;
	}
{% endblock %}

{% block main %}

<div class="container">

	{% for person in data %}
		{% if loop.first %}
			Hallo 
		{% else %}
			hallo
		{% endif %}

		{% if not loop.last %}
			{{ person.name }}, 
		{% else %}
			{{ person.name }},<br>
		{% endif %}
	{% endfor %}

	<br>

	{% if data | length > 1 %}
	<p>ihr seid herzlich zu unserer Hochzeit am <u><strong>1. April 2023</strong></u> eingeladen. Um uns unsere Planung zu erleichtern, haben wir ein paar wichtige Fragen an euch:</p>
	{% else %}
		<p>du bist herzlich zu unserer Hochzeit am <u><strong>1. April 2023</strong></u> eingeladen. Um uns unsere Planung zu erleichtern, haben wir ein paar wichtige Fragen an dich:</p>
	{% endif %}
		<br>

	{% if updated %}
		<strong style=color:green>Dankeschön für die Eintragung!</strong>
		<br>
		<br>
	{% endif %}

		<form method="GET" action="/submit">
			<h2>
	{% if data | length > 1 %}
			Kommt ihr zu unserer Hochzeit?
	{% else %}
			Kommst du zu unserer Hochzeit?
	{% endif %}
			</h2>
			<div class="form-check form-check-inline">
			  <input class="form-check-input" type="radio" name="zusage" id="zusage" value="zusage">
			  <label class="form-check-label" for="zusage">&nbsp; Ja!</label>
			</div>
			<div class="form-check form-check-inline">
			  <input class="form-check-input" type="radio" name="zusage" id="zusage_absage" value="absage">
			  <label class="form-check-label" for="zusage_absage">&nbsp; 
				  {% if data | length > 1 %}
				  	Leider passt uns der Termin nicht
				  {% else %}
					  Leider passt mir der Termin nicht.
				  {% endif %}
			  </label>
			</div>
			{% if data | length > 1 %}
			<div class="form-check form-check-inline">
			  <input class="form-check-input" type="radio" name="zusage" id="zusage_teilweise" value="teilweise">
			  <label class="form-check-label" for="zusage_teilweise">&nbsp; 
				 Teilweise 
			  </label>
			</div>
			{% else %}
				<div id="zusage_teilweise" class="hidden"></div> <!-- Javascript hasst mich -->
			{% endif %}

			<br>
			<br>

			{% if data | length > 1 %}
				<div class="hidden" id="zusage_detail">
				{% for person in data %}
					{{ person.name }}:
					<br>
					<div class="form-check form-check-inline">
						<input class="form-check-input" type="radio" name="{{ person.id }}_zusage" id="{{ person.id }}_zusage" value="zusage">
					  <label class="form-check-label" for="{{ person.id }}_zusage">&nbsp; Ja!</label>
					</div>
					<div class="form-check form-check-inline">
					  <input class="form-check-input" type="radio" name="{{ person.id }}_zusage" id="{{ person.id }}_zusage_absage" value="absage">
					  <label class="form-check-label" for="{{ person.id }}_zusage_absage">&nbsp; Nein, ich komme nicht
					  </label>
					</div>
					
				<br>
				{% endfor %}

				<br>

				</div>
			{% endif %}

			<h2>
			{% if data | length > 1 %}
				Kommt ihr mit dem Auto?
			{% else %}
				Kommst du mit dem Auto?
			{% endif %}
			</h2>
			<div class="form-check form-check-inline">
			  <input class="form-check-input" type="radio" name="auto" id="auto_zusage" value="zusage">
			  <label class="form-check-label" for="auto_zusage">&nbsp;
			{% if data | length > 1 %}
				Ja, wir kommen mit dem Atuo
			{% else %}
				  Ja, ich kommt mit meinem Auto
			{% endif %}
				  </label>
			</div>
			<div class="form-check form-check-inline">
			  <input class="form-check-input" type="radio" name="auto" id="auto_zusage_absage" value="absage">
			  <label class="form-check-label" for="auto_zusage_absage">&nbsp;
			{% if data | length > 1 %}
				Nein, wir brauchen eventuell Plätze in freien Autos
			{% else %}
				Nein, ich brauche eventuell einen freien Platz in einem Auto
			{% endif %}
			  </label>
			</div>
			<div class="form-check form-check-inline">
			  <input class="form-check-input" type="radio" name="auto" id="auto_unbekannt" value="unbekannt">
			  <label class="form-check-label" for="auto_unbekannt">&nbsp;
			{% if data | length > 1 %}
				Wissen wir noch nicht
			{% else %}
				Weiß ich noch nicht
			{% endif %}
			  </label>
			</div>

				<br>

			<div class="hidden" id="auto_freie_plätze">
				<br>
				<h2>
				{% if data | length > 1 %}
					Hättet ihr noch Plätze im Auto frei? Wenn ja, wie viele?
				{% else %}
					Hättest du noch Plätze im Auto frei? Wenn ja, wie viele?
				{% endif %}
				</h2>
				<div class="form-group">
					<div class="form-row">
						<div class="col-xl-2 col-12 ">
							<input type="number" class="form-control" name="plätze" id="plätze" aria-describedby="" value=0>
						</div>
					</div>
				</div>
			</div>

			<br>
			<h2>
			{% if data | length > 1 %}
				Möchtet ihr vegetarisch oder mit Fleisch essen?
			{% else %}
				Möchtest du vegetarisch oder mit Fleisch essen?
			{% endif %}
			</h2>
				{% for person in data %}

					{% if data | length > 1 %}
						{{ person.name }}:
						<br>
					{% endif %}

					<div class="form-check form-check-inline">
						<input class="form-check-input" type="radio" name="{{ person.id }}_essenwahl" id="{{ person.id }}_mit_fleisch" value="mit_fleisch">
					  <label class="form-check-label" for="{{ person.id }}_mit_fleisch">&nbsp; Mit Fleisch (Ente)</label>
					</div>
					<div class="form-check form-check-inline">
					  <input class="form-check-input" type="radio" name="{{ person.id }}_essenwahl" id="{{ person.id }}_ohne_fleisch" value="ohne_fleisch">
					  <label class="form-check-label" for="{{ person.id }}_ohne_fleisch">&nbsp; Vegetarisch
					  </label>
					</div>
					<!--
					<div class="form-check form-check-inline">
					  <input class="form-check-input" type="radio" name="{{ person.id }}_essenwahl" id="{{ person.id }}_essen_egal" value="essen_egal">
					  <label class="form-check-label" for="{{ person.id }}_essen_egal">&nbsp; Egal
					  </label>
					</div>
					-->
					
				<br>
				{% endfor %}

			<br>
			<p><h2>Für das Abendessen steht ein Caterer bereit. Anstatt Geschenke wünschen wir uns einen Beitrag für einen Snack nach der kirchlichen Trauung, bzw. Beiträge zum Kaffee & Kuchen.
					{% if data | length > 1 %}
						Würdet ihr etwas mitbringen?
					{% else %}
						Würdest du etwas mitbringen?
					{% endif %}
			</h2></p>
			<div class="form-row">
				<textarea class="col-12" rows=3 name="buffetbeitrag"></textarea>
			</div>
			<br>

			<p><h2>Wünsche oder Bemerkungen!</h2><span class="text-muted">(Zum Beispiel veganes Essen, gewünschte Musik oder ähnliches)</span></p>
				<div class="form-row">
					<textarea class="col-12" rows=3 name="bemerkungsfeld"></textarea>
				</div>

			<br>
			<br>
			<input type="hidden" name="familie" value="{{ data[0].familien_id }}">
			<button type="submit" class="btn btn-submit mb-2">Abschicken!</button>
		</form>
</div>

<script>
window.addEventListener("load",function() {
	document.getElementById('zusage_teilweise').addEventListener("click", function(e){
		document.getElementById('zusage_detail').classList.remove("hidden");
	});
	document.getElementById('auto_zusage').addEventListener("click", function(e){
		document.getElementById('auto_freie_plätze').classList.remove("hidden");
	});
});
</script>

{% endblock %}