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

  let modal: HTMLDialogElement;
  let form: HTMLFormElement;

  teamPopupOpen.subscribe((value) => {
    if (value) modal.show();
    else form?.reset();
  });
</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.</p>
      <fieldset class="fieldset">
        <legend class="fieldset-legend">
          <span>Teamname <span class="text-red-700">*</span></span>
        </legend>
        <input id="teamName" name="teamName" class="input validator" type="text" required />
      </fieldset>
      <button class="mt-4 btn btn-neutral">Team registrieren</button>
    </form>
  </div>
</dialog>
