<script setup>
/**
 * 관리자 로그아웃
 * @returns {Promise<void>} 로그아웃 처리 결과
 */
const logoutAdmin = async () => {
  await $fetch('/admin/api/auth/logout', {
    method: 'POST'
  })
  await navigateTo('/admin/login')
}
</script>

<template>
  <div class="admin-layout min-h-screen bg-[#f5f5f2] text-ink">
    <aside class="admin-layout__sidebar fixed inset-y-0 left-0 hidden w-64 border-r border-line bg-[#15171a] p-5 text-white lg:block">
      <NuxtLink class="admin-layout__brand block text-lg font-semibold" to="/admin">
        sori.studio
      </NuxtLink>
      <nav class="admin-layout__nav mt-8 grid gap-2 text-sm text-white/75">
        <NuxtLink class="admin-layout__nav-link rounded px-3 py-2 hover:bg-white/10 hover:text-white" to="/admin/posts">
          글
        </NuxtLink>
        <NuxtLink class="admin-layout__nav-link rounded px-3 py-2 hover:bg-white/10 hover:text-white" to="/admin/pages">
          페이지
        </NuxtLink>
        <NuxtLink class="admin-layout__nav-link rounded px-3 py-2 hover:bg-white/10 hover:text-white" to="/admin/tags">
          태그
        </NuxtLink>
        <NuxtLink class="admin-layout__nav-link rounded px-3 py-2 hover:bg-white/10 hover:text-white" to="/admin/settings">
          설정
        </NuxtLink>
        <button class="admin-layout__logout rounded px-3 py-2 text-left hover:bg-white/10 hover:text-white" type="button" @click="logoutAdmin">
          로그아웃
        </button>
      </nav>
    </aside>
    <main class="admin-layout__main min-h-screen p-5 lg:ml-64">
      <slot />
    </main>
  </div>
</template>
