<script lang="ts">
	import {rulesLong, rulesShort} from '$lib/rules';
</script>

<svelte:head>
	<title>Craftattack - Regeln</title>
</svelte:head>

<h1 class="text-3xl lg:text-5xl mb-4">CraftAttack 6 Regelwerk</h1>
<div class="collapse collapse-arrow">
	<input type="checkbox" autocomplete="off" checked />
	<div class="collapse-title">
		<p>0. Vorwort</p>
	</div>
	<div class="collapse-content">
		<p>{rulesShort.header}</p>
		<p class="mt-1 text-[.75rem]">{rulesShort.footer}</p>
	</div>
	<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
</div>
{#each rulesShort.sections as section, i}
	<div class="collapse collapse-arrow">
		<input type="checkbox" autocomplete="off" />
		<div class="collapse-title">
			<p>{i + 1}. {section.title}</p>
		</div>
		<div class="collapse-content">
			<p>{section.content}</p>
		</div>
	</div>
	<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
{/each}
