<template>
  <div>
    <!-- Page Header -->
    <div class="mb-8">
      <h1 class="text-2xl font-bold text-white">{{ t('menu.system_logs') }}</h1>
      <p class="text-slate-400 mt-1">{{ t('system.logs.subtitle') }}</p>
    </div>

    <!-- Placeholder: System audit log viewer -->
    <div class="bg-slate-800 rounded-xl border border-slate-700 p-8 text-center">
      <svg class="w-16 h-16 mx-auto text-slate-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
      </svg>
      <h3 class="text-lg font-semibold text-slate-400 mb-2">{{ t('system.logs.placeholder_title') }}</h3>
      <p class="text-sm text-slate-500 max-w-md mx-auto">
        {{ t('system.logs.placeholder_desc') }}
      </p>
    </div>
  </div>
</template>

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

const { t } = useI18n()
</script>
