<script lang="ts">
  import { teamPopupOpen, teamPopupName } from '@app/website/signup/TeamPopup.ts';
  import Input from '@components/input/Input.svelte';
  import { onDestroy } from 'svelte';

  let modal: HTMLDialogElement;
  let form: HTMLFormElement;

  const cancel = teamPopupOpen.subscribe((value) => {
    if (value) modal.show();
    else form?.reset();
  });

  onDestroy(cancel);
</script>

<dialog class="modal" bind:this={modal} onclose={() => ($teamPopupOpen = false)}>
  <div class="modal-box">
    <form method="dialog">
      <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
    </form>
    <form method="dialog" bind:this={form} onsubmit={() => ($teamPopupName = form.teamName.value)}>
      <h3 class="text-lg font-geist">Team erstellen</h3>
      <p class="py-4">Es wurde noch kein Team für dich und deinen Mitspieler erstellt. Wie soll euer Team heißen?</p>
      <Input id="teamName" type="text" label="Teamname" required>
        {#snippet notice()}
          <span>
            Dein Team ist erst vollständig registriert, wenn dein Teamparter sich ebenfalls angemeldet hat. Eine
            Teilnahme ohne Teampartner ist nicht möglich.
            <br />
            Prüfe bitte nach, ob dein Team auf der Startseite aufgelistet wird, sobald beide Teammitglieder registriert sind!
          </span>
        {/snippet}
      </Input>
      <button class="mt-4 btn btn-neutral">Team registrieren</button>
    </form>
  </div>
</dialog>
