<!-- #region GitInitPanel [C:3] [TYPE Component] [SEMANTICS git, init, repository, remote, config] -->
<!-- @BRIEF Git initialization panel: select config, create remote repo, init local repo. -->
<!-- @LAYER UI -->
<!-- @RELATION DEPENDS_ON -> [GitUtils] -->
<!-- @RELATION CALLS -> [EXT:frontend:gitService] -->
<!-- @UX_STATE Idle -> Config selector, remote URL input, create/init buttons. -->
<!-- @UX_STATE Loading -> Buttons disabled, spinner visible. -->
<script lang="ts">
  import { t } from "$lib/i18n/index.svelte.js";
  import { Button, Card, Select, Input, HelpTooltip } from "$lib/ui";

  let {
    configs,
    selectedConfigId = $bindable(),
    remoteUrl = $bindable(),
    creatingRemoteRepo,
    loading,
    onCreateRemoteRepo,
    onInit,
  } = $props();
</script>

<div class="mx-auto max-w-md py-8">
  <Card>
    <p class="mb-6 text-sm text-gray-600">
      {$t.git?.not_linked || 'Этот дашборд еще не привязан к Git-репозиторию.'}
    </p>

    <div class="space-y-6">
      <Select
        label={$t.git?.server || 'Git сервер'}
        bind:value={selectedConfigId}
        options={configs.map(c => ({ value: c.id, label: `${c.name} (${c.provider})` }))}
      />
      {#if configs.length === 0}
        <p class="-mt-4 text-xs text-red-500">{$t.git?.no_servers_configured || 'Нет сконфигурированных Git серверов'}</p>
      {/if}

      <Input
        label={$t.git?.remote_url || 'Remote URL'}
        bind:value={remoteUrl}
        placeholder={$t.git?.remote_url_placeholder}
      />
      <Button
        variant="secondary"
        onclick={onCreateRemoteRepo}
        disabled={creatingRemoteRepo || configs.length === 0 || !selectedConfigId}
        isLoading={creatingRemoteRepo}
        class="w-full"
      >
        Create repo
      </Button>

      <Button
        onclick={onInit}
        disabled={loading || configs.length === 0 || creatingRemoteRepo}
        isLoading={loading}
        class="w-full"
      >
        {$t.git?.init_repo || 'Инициализировать Git-репозиторий'}
      </Button>
    </div>
  </Card>
</div>
<!-- #endregion GitInitPanel -->
