<script lang="ts">
	import Puzzle from '$lib/components/Puzzle.svelte';

	export let data;

	$: chapter = data.chapter;
</script>

<section class="flex w-full flex-col space-y-6">
	<div class="flex flex-col">
		<div class="flex flex-col justify-between md:flex-row md:items-center">
			<div class="flex items-center gap-x-2">
				<h1 class="text-xl font-semibold">{chapter.name}</h1>
				<!-- {!isInEventGroup(chapter) && isBeforeStart(chapter) && (
              <Dialog
                key={chapter.id}
                title={chapter.name}
                open={isOpen[chapter.id]}
                onOpenChange={() => handleClick(chapter.id)}
                trigger={
                  <button class="flex items-center gap-x-2 text-sm font-semibold text-muted hover:text-brand">
                    {/* <Icon name="group-line" /> */}
                    Rejoindre un groupe
                  </button>
                }
                class="right-96 p-4"
              >
                <GroupForm chapter={chapter} token={token} />
              </Dialog>
            )} -->
			</div>
		</div>
		<ul class="mt-4 flex flex-col space-y-4">
			{#each chapter.puzzles as puzzle}
				<Puzzle {puzzle} />
			{/each}
		</ul>
		<!-- {isInEventGroup(chapter) && (
          <ul class="mt-4 flex flex-col space-y-4">
            {filteredData &&
              filteredData
                .sort((a, b) => a.scoreMax - b.scoreMax)
                .map((puzzle) => (
                  <PuzzleProp key={puzzle.id} puzzle={puzzle} chapter={chapter} />
                ))}
          </ul>
        )} -->
	</div>
</section>
