<script>
  import { page } from '$app/stores';
  import { t } from '$lib/i18n/store.js';

  const tabs = [
    { href: '/admin/reports',    key: 'admin.tabs.reports' },
    { href: '/admin/categories', key: 'admin.tabs.categories' },
    { href: '/admin/backups',    key: 'admin.tabs.backups' }
  ];

  $: current = $page.url.pathname;
  function isActive(href) {
    return current === href || current.startsWith(href + '/');
  }
</script>

<h1>{$t('admin.title')}</h1>

<nav class="tabs" aria-label="Admin sections">
  {#each tabs as tab}
    <a href={tab.href} class:active={isActive(tab.href)} aria-current={isActive(tab.href) ? 'page' : undefined}>
      {$t(tab.key)}
    </a>
  {/each}
</nav>

<div class="tab-panel">
  <slot />
</div>

<style>
  h1 { margin-bottom: 0.75rem; }
  .tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid #e5e8ee;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
  }
  .tabs a {
    padding: 0.55rem 1rem;
    text-decoration: none;
    color: #1d2330;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    margin-bottom: -2px;
    font-weight: 500;
    background: transparent;
  }
  .tabs a:hover {
    background: #eef1f6;
    color: #1d2330;
  }
  .tabs a.active {
    background: #fff;
    border-color: #e5e8ee;
    border-bottom-color: #fff;
    color: #006a4e;
  }
</style>
