<!-- #region StorageSettings [C:2] [TYPE Component] [SEMANTICS settings, storage, path, backup] -->
<!-- @BRIEF Storage configuration tab: root path, backup path, repo path. -->
<!-- @LAYER UI -->
<!-- @PRE: settings object with storage config is provided. -->
<!-- @POST: User can view and edit storage paths. -->
<script lang="ts">
  import { t } from "$lib/i18n/index.svelte.js";

  let { settings = $bindable(), onSave } = $props();
</script>

<div class="text-lg font-medium mb-4">
  <h2 class="text-xl font-bold mb-4">
    {$t.settings?.storage_title}
  </h2>
  <p class="text-gray-600 mb-6">
    {$t.settings?.storage_description}
  </p>

  <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
    <div class="grid grid-cols-1 gap-4">
      <div>
        <label
          for="storage_path"
          class="block text-sm font-medium text-gray-700"
          >{$t.storage?.root}</label
        >
        <input
          type="text"
          id="storage_path"
          bind:value={settings.storage.root_path}
          class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
        />
      </div>
      <div>
        <label
          for="backup_path"
          class="block text-sm font-medium text-gray-700"
          >{$t.storage?.backups}</label
        >
        <input
          type="text"
          id="backup_path"
          bind:value={settings.storage.backup_path}
          class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
        />
      </div>
      <div>
        <label
          for="repo_path"
          class="block text-sm font-medium text-gray-700"
          >{$t.storage?.repositories}</label
        >
        <input
          type="text"
          id="repo_path"
          bind:value={settings.storage.repo_path}
          class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
        />
      </div>
    </div>

    <div class="mt-6 flex justify-end">
      <button
        onclick={() => onSave()}
        class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-hover"
      >
        {$t.settings?.save_storage_config}
      </button>
    </div>
  </div>
</div>
<!-- #endregion StorageSettings -->
