<script lang="ts">
  import Icon from '@iconify/svelte';
  import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
  import { addAdmin, fetchAdmins } from '@app/admin/admins/admins.ts';
  import { Permissions } from '@util/permissions.ts';

  // state
  let createPopupOpen = $state(false);

  // lifecycle
  $effect(() => {
    fetchAdmins();
  });
</script>

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

<CrudPopup
  texts={{
    title: 'Admin erstellen',
    submitButtonTitle: 'Erstellen',
    confirmPopupTitle: 'Admin erstellen?',
    confirmPopupMessage: 'Soll der Admin erstellt werden?'
  }}
  target={null}
  keys={[
    [
      { key: 'username', type: 'text', label: 'Username', options: { required: true } },
      { key: 'password', type: 'password', label: 'Passwort', options: { required: true } }
    ],
    [
      {
        key: 'permissions',
        type: 'bit-badge',
        label: 'Berechtigungen',
        default: 0,
        options: { available: Permissions.asOptions() }
      }
    ]
  ]}
  onSubmit={addAdmin}
  bind:open={createPopupOpen}
/>
