<!-- [DEF:StorageBackupsPage:Page] -->
<!--
@TIER:      STANDARD
@SEMANTICS: backup, page, tools
@PURPOSE:   Entry point for the Backup Management interface (moved from /tools/backups).
@LAYER:     Page
@RELATION:  USES -> BackupManager

@INVARIANT: BackupManager component is always rendered.
-->

<script lang="ts">
  /**
   * @UX_STATE: Loading -> (via BackupManager) showing spinner.
   * @UX_STATE: Idle -> Showing BackupManager interface.
   * @UX_FEEDBACK: Toast -> (via BackupManager) success/error notifications.
   */
  // [SECTION: IMPORTS]
  import { t } from '$lib/i18n';
  import { PageHeader } from '$lib/ui';
  import BackupManager from '../../../components/backups/BackupManager.svelte';
  // [/SECTION]
</script>

<!-- [SECTION: TEMPLATE] -->
<div class="container mx-auto p-4 max-w-6xl">
  <PageHeader title={$t.nav?.backups || "Backups"} />
  
  <div class="mt-6">
    <BackupManager />
  </div>
</div>
<!-- [/SECTION] -->

<!-- [/DEF:StorageBackupsPage:Page] -->
