<script lang="ts">
	import globe_icon from '$lib/extra-icons/globe.svg';

	let team = [
		{
			name: 'Elias',
			nickname: 'MineTec',
			roles: ['Gründer', 'Support', 'Organisation', 'Softwareentwicklung', 'Systemadministrator'],
			links: [{ name: 'Website', href: 'https://mhsl.eu/aboutme/', icon: globe_icon }]
		},
		{
			name: 'Jannik',
			nickname: 'Goldi187',
			roles: ['Support', 'Organisation']
		},
		{
			name: 'Martin',
			nickname: 'olischma',
			roles: ['Support', 'Systemadministrator', 'Softwareentwicklung']
		},
		{
			name: 'Adrian',
			nickname: 'h0nny27',
			roles: ['Support']
		},
		{
			name: 'Ruben',
			nickname: 'bytedream',
			roles: ['Softwareentwicklung'],
			links: [{ name: 'Website', href: 'https://bytedream.dev', icon: globe_icon }]
		},
		{
			name: 'Lars',
			nickname: '28Pupsi28',
			roles: ['Softwareentwicklung']
		}
	];
</script>

<svelte:head>
	<title>Team</title>
</svelte:head>

<h1 class="text-3xl lg:text-5xl mb-4">Das Team</h1>
<div class="grid grid-cols-3 gap-4 my-4 justify-center">
	{#each team as member}
		<div class="card w-96 bg-base-200">
			<div class="card-body px-4 py-6">
				<div class="flex flex-col items-center">
					<div class="avatar placeholder mb-2">
						<div class="bg-neutral text-neutral-content w-24 rounded-xl">
							<span class="text-3xl">{member.name.at(0).toUpperCase()}</span>
						</div>
					</div>
					<p class="text-center text-lg mb-1">{member.name} · {member.nickname}</p>
					<p class="text-center text-sm font-light">{member.roles.join(' · ')}</p>
					{#if member.links}
						<div class="w-full flex items-center flex-col">
							<div class="w-1/2 h-[1px] my-3 rounded bg-base-content" />
							<div class="flex gap-3">
								{#each member.links as link}
									<a
										class="block w-9 h-9 p-2 border rounded-full border-base-content"
										href={link.href}
										target="_blank"
										title={link.name}
									>
										<img class="w-full h-full invert" src={link.icon} alt={link.name} />
									</a>
								{/each}
							</div>
						</div>
					{/if}
				</div>
			</div>
		</div>
	{/each}
</div>
