{% extends 'partials/base.html.twig' %}

{% block body %}
<div class="bg-white overflow-hidden shadow sm:rounded-lg">
	<div class="px-4 py-5 sm:p-6">
		<h1 class="text-3xl font-header font-bold text-fisoPrimary">{{ header.frontPageBoxTitle }}</h1>
		<h2 class="text-xl font-medium text-slate-600">{{ header.frontPageBoxSubtitle }}</h2>

		<div class="mt-6 grav-body-styling">
			{{ page.content | raw }}
		</div>
	</div>
</div>

<div class="bg-white overflow-hidden shadow sm:rounded-lg my-6">
	<div class="px-4 py-5 sm:p-6">
		<h2 class="text-2xl font-header font-bold text-fisoSecondary">Our Board</h2>
		<p>{{ header.boardIntro }}</p>
		<ul role="list" class="grid gap-y-8 my-8">
			{% for boardie in header.board %}
			<li>
				<div class="flex items-center gap-x-6">
					<img class="h-16 w-16 rounded-full" src="{{ page.media[boardie.photo].url }}">
					<div>
						<h3 class="text-base/7 font-semibold tracking-tight text-gray-900">{{ boardie.name }}</h3>
						<p class="text-sm/6 font-semibold">
							<span class="text-slate-600">{{ boardie.function }}</span><br />
							<span class="text-fisoPrimary">{{ boardie.email }}</span>
						</p>
					</div>
				</div>
			</li>
			{% endfor %}
		</ul>

		<hr>
		<p class="my-4 text-sm">
			Supervised by the Supervisory Council<br />
			<span class="text-fisoPrimary">supervisory-council@fiso-eindhoven.nl</span>
		</p>
	</div>
</div>
{% endblock %}