<!-- [DEF:BackupList:Component] -->
<!--
@SEMANTICS: backup, list, table
@PURPOSE:   Displays a list of existing backups.
@LAYER:     Component
@RELATION:  USED_BY -> frontend/src/components/backups/BackupManager.svelte
-->

<script lang="ts">
  // [SECTION: IMPORTS]
  import { t } from '../../lib/i18n';
  import { Button } from '../../lib/ui';
  import type { Backup } from '../../types/backup';
  import { goto } from '$app/navigation';
  // [/SECTION]

  // [SECTION: PROPS]
  /**
   * @type {Backup[]}
   * @description Array of backup objects to display.
   */
  export let backups: Backup[] = [];
  // [/SECTION]

</script>

<!-- [SECTION: TEMPLATE] -->
<div class="overflow-x-auto rounded-lg border border-gray-200">
  <table class="min-w-full divide-y divide-gray-200">
    <thead class="bg-gray-50">
      <tr>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
          {$t.storage.table.name}
        </th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
          {$t.tasks.target_env}
        </th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
          {$t.storage.table.created_at}
        </th>
        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
          {$t.storage.table.actions}
        </th>
      </tr>
    </thead>
    <tbody class="bg-white divide-y divide-gray-200">
      {#each backups as backup}
        <tr class="hover:bg-gray-50 transition-colors">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
            {backup.name}
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
            {backup.environment}
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
            {new Date(backup.created_at).toLocaleString()}
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <Button
              variant="ghost"
              size="sm"
              class="text-blue-600 hover:text-blue-900"
              on:click={() => goto(`/tools/storage?path=backups/${backup.name}`)}
            >
              {$t.storage.table.go_to_storage}
            </Button>
          </td>
        </tr>
      {:else}
        <tr>
          <td colspan="4" class="px-6 py-10 text-center text-gray-500">
            {$t.storage.no_files}
          </td>
        </tr>
      {/each}
    </tbody>
  </table>
</div>
<!-- [/SECTION] -->

<style>
</style>

<!-- [/DEF:BackupList:Component] -->