<script setup lang="ts">
const pushApi = usePushApi();
const draft = ref("");

onMounted(() => {
  pushApi.hydrateToken();
  draft.value = pushApi.token.value;
});
</script>

<template>
  <UCard v-if="!pushApi.token.value" class="mx-auto mt-16 max-w-lg">
    <template #header>
      <div>
        <h2 class="text-lg font-bold">Admin-Zugang</h2>
        <p class="text-sm text-gray-500">Gib den Admin-Token aus der Push-Server-Umgebung ein.</p>
      </div>
    </template>
    <form class="space-y-4" @submit.prevent="pushApi.setToken(draft)">
      <UInput v-model="draft" type="password" placeholder="ADMIN_TOKEN" icon="i-lucide-key-round" autofocus />
      <UButton type="submit" block icon="i-lucide-log-in">Verbinden</UButton>
    </form>
  </UCard>
  <slot v-else />
</template>
