<script setup lang="ts">
definePageMeta({ title: '媒体' })

const route = useRoute()

function tabActive(to: string): boolean {
  const p = route.path
  if (to === '/me/media') {
    return p === '/me/media' || p === '/me/media/'
  }
  if (to === '/me/media/orphans') {
    return p === '/me/media/orphans' || p.startsWith('/me/media/orphans/')
  }
  return false
}
</script>

<template>
  <UContainer class="py-8 space-y-6">
    <div>
      <h1 class="text-2xl font-semibold">
        媒体
      </h1>
      <p class="text-sm text-muted mt-1">
        在此上传图片并复制链接，用于文章与资料。未被引用的文件清理请切换到「孤儿清理」。
      </p>
    </div>

    <div class="flex flex-wrap gap-2">
      <UButton
        to="/me/media"
        size="sm"
        :variant="tabActive('/me/media') ? 'solid' : 'ghost'"
        :color="tabActive('/me/media') ? 'primary' : 'neutral'"
      >
        资源库
      </UButton>
      <UButton
        to="/me/media/orphans"
        size="sm"
        :variant="tabActive('/me/media/orphans') ? 'solid' : 'ghost'"
        :color="tabActive('/me/media/orphans') ? 'primary' : 'neutral'"
      >
        孤儿清理
      </UButton>
    </div>

    <NuxtPage />
  </UContainer>
</template>
