{% extends "base.html" %}

{% block content %}
<div class="bg-violet-900 min-h-screen flex items-center justify-center text-white">
	<div class="text-center">
		<div class="bg-white text-gray-900 p-10 rounded-lg shadow-lg max-w-2xl mx-auto transform -translate-y-10">
			<h1 class="text-4xl font-bold text-violet-700 mb-6">{{ title }}</h1>
			<p class="text-2xl italic leading-relaxed text-left">
				{% for line in context.haiku.lines %}
					{{ line }}<br>
				{% endfor %}
			</p>
		</div>
		<a href="{{ url_for('index_view') }}"
			class=" inline-block bg-violet-600 hover:bg-violet-700 text-white font-bold py-2 px-4 rounded-lg">
			Back to Home
		</a>
	</div>
</div>
<script>
	if ('speechSynthesis' in window){
		//Speech supported
	}
	else{
		//Speech not supported
		alert("Sorry your browser does not support Speech synthesis");
	}
	var msg = new speechSynthesisUtterance();
	msg.text = {context.haiku.lines};
	window.speak(msg);
</script>
{% endblock %}