<script>
	import DirectionCard from '../../components/DirectionCard.svelte';
	import { people } from '$lib/data/people';
</script>

<div>
	<h1 class="text-center">Our Team.</h1>
	{#if people.length}
		{#each people as person, i (person.email)}
			<div class="row border-bottom">
				<DirectionCard
					imageSpec={{ image: person.image, alt: person.name }}
					direction={i % 2 ? 'left' : 'right'}
				>
					<h2>{person.name}, {person.position}</h2>
					<a href="mailto:{person.email}"><p>{person.email}</p></a>
					<p style="white-space: pre-line">{person.bio}</p>
				</DirectionCard>
			</div>
		{/each}
	{/if}
</div>
