<script setup>

const createEMailAddress = ref("")
const createEMailType = ref("imap")
const showEmailAddressModal = ref(false)

const items = ref([])

const setupPage = async () => {
  items.value = await useNuxtApp().$api("/api/email/accounts")
}

const createAccount = async () => {
  showEmailAddressModal.value = false
}

setupPage()


const templateColumns = [
  {
    key: "email",
    label: "E-Mail Adresse:"
  },
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))



</script>

<template>
  <UModal
    v-model:open="showEmailAddressModal"
  >
    <template #content>
      <UCard>
        <template #header>
          E-Mail Adresse
        </template>
<!--      <UFormField
        label="E-Mail Adresse:"
      >

      </UFormField>-->

      <UInput
          v-model="createEMailAddress"
      />
<!--      <UFormField
        label="Account Typ:"
      >
        <USelectMenu
          :options="[{key: 'imap',label:'IMAP'}]"
          option-attribute="label"
          value-attribute="key"
          v-model="createEMailType"
        />
      </UFormField>-->
        <template #footer>
          <UButton
              @click="createAccount"
          >
            Erstellen
          </UButton>
        </template>
      </UCard>
    </template>

  </UModal>
  <UDashboardNavbar title="E-Mail Konten">
      <template #right>
        <UTooltip title="In der Beta nicht verfügbar">
          <UButton
              @click="navigateTo('/settings/emailaccounts/create')"
          >
            + E-Mail Konto
          </UButton>
        </UTooltip>

      </template>
  </UDashboardNavbar>
  <UTable
    :data="items"
    :columns="normalizeTableColumns(columns)"
    class="w-full"
    :on-select="(i) => navigateTo(`/settings/emailaccounts/edit/${i.id}`)"
    :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
    :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine E-Mail Konten anzuzeigen' }"
  >
  </UTable>
</template>

<style scoped>

</style>
