<script lang="ts">
  import { addAdmin, fetchAdmins } from './actions.ts';
  import Icon from '@iconify/svelte';
  import { onMount } from 'svelte';
  import CreateOrEditPopup from '@app/admin/admins/CreateOrEditPopup.svelte';

  // lifecycle
  onMount(() => {
    fetchAdmins();
  });

  // states
  let newTeamPopupOpen = $state(false);
</script>

<div>
  <button class="btn btn-soft w-full" onclick={() => (newTeamPopupOpen = true)}>
    <Icon icon="heroicons:plus-16-solid" />
    <span>Neuer Admin</span>
  </button>
</div>

{#key newTeamPopupOpen}
  <CreateOrEditPopup
    popupTitle="Admin erstellen"
    submitButtonTitle="Admin erstellen"
    confirmPopupTitle="Admin erstellen"
    confirmPopupMessage="Bist du sicher, dass du den Admin erstellen möchtest?"
    admin={null}
    open={newTeamPopupOpen}
    onSubmit={addAdmin}
    onClose={() => (newTeamPopupOpen = false)}
  />
{/key}
