<!-- #region BackupsPage [C:3] [TYPE Page] [SEMANTICS sveltekit, backup, management, tool, workspace] -->
<!-- @BRIEF Page component: routes/tools/backups/+page.svelte -->
<!-- @LAYER Page -->
<!--
@SEMANTICS: backup, management, tools, workspace
@PURPOSE:   Entry point for the Backup Management interface.
@LAYER     Page
@RELATION  IMPLEMENTS -> [EXT:frontend:RoutePages]
@RELATION  IMPLEMENTS -> [PageContracts]
@RELATION  BINDS_TO -> [NavigationContracts]
@RELATION  USES -> [EXT:frontend:BackupManager]
@UX_STATE:  Loading -> Shared page shell mounts before backup management content becomes interactive.
@UX_STATE:  Ready -> Backup management tools render inside the tools workspace.
@UX_STATE:  Error -> Nested manager feedback remains contained within the backup workspace.
-->

<script lang="ts">
  // [SECTION: IMPORTS]
  import { t } from '$lib/i18n/index.svelte.js';
  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.tools_backups} />
  
  <div class="mt-6">
    <BackupManager />
  </div>
</div>
<!-- [/SECTION] -->

<!-- #endregion BackupsPage -->
