<script setup lang="ts">
definePageMeta({ auth: false, layout: 'blank' })

async function signInAgain() {
  await navigateTo('/auth/oidc/login', { external: true })
}
</script>

<template>
  <AuthShell
    status="Some services degraded · authentik"
    status-tone="warn"
  >
    <div class="badge" data-tone="warn">
      <UiIcon name="shield" :size="28" />
    </div>
    <AuthHeading
      eyebrow="Session ended"
      title="You were signed out"
      body="For your security we ended your idle session. Sign in to pick up where you left off."
    />
    <AuthButton variant="primary" @click="signInAgain">Sign in again</AuthButton>
    <AuthFooterLink>
      not you? <span class="sep">·</span> <NuxtLink to="/auth/login">use a different account</NuxtLink>
    </AuthFooterLink>
  </AuthShell>
</template>

<style scoped>
.badge {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px 0;
}

.badge[data-tone='warn'] {
  background: rgba(232, 154, 31, 0.12);
  color: var(--warn);
}

.sep {
  color: var(--text-dim);
  padding: 0 6px;
}
</style>
