<!-- #region DashboardHeader [C:2] [TYPE Component] [SEMANTICS sveltekit, dashboard, header, git, branch] -->
<!-- @BRIEF Top title area, breadcrumb, Git branch selector, and action buttons for dashboard detail. -->
<!-- @LAYER UI -->
<!-- @RELATION DEPENDS_ON -> [EXT:frontend:BranchSelector] -->
<!-- @RELATION DEPENDS_ON -> [Icon] -->
<!-- @UX_STATE Idle -> Header with back button, title, Git status badge, and action buttons. -->
<script lang="ts">
  import { t } from "$lib/i18n/index.svelte.js";
  import Icon from "$lib/ui/Icon.svelte";
  import BranchSelector from "../../../../components/git/BranchSelector.svelte";

  let {
    dashboard,
    resolvedDashboardId,
    dashboardRef,
    envId,
    gitDashboardRef,
    hasGitRepo,
    currentBranch = $bindable(),
    gitMeta,
    gitStatus,
    isStartingBackup,
    showGitManager = $bindable(),
    goBack,
    handleBranchChange,
    runBackupTask,
    loadDashboardPage
  } = $props();
</script>

<div class="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
  <div class="min-w-0 space-y-2">
    <button
      class="inline-flex items-center gap-2 rounded-lg px-2 py-1 text-sm text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
      onclick={goBack}
    >
      <Icon name="chevronLeft" size={16} />
      {$t.common?.back}
    </button>

    <div class="flex flex-wrap items-center gap-3">
      <h1 class="text-2xl font-bold text-slate-900">
        {dashboard?.title || $t.dashboard?.overview}
      </h1>
      {#if hasGitRepo && gitDashboardRef}
        <div class="w-full max-w-xs rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
          <BranchSelector
            dashboardId={gitDashboardRef}
            {envId}
            bind:currentBranch
            onchange={handleBranchChange}
          />
        </div>
      {/if}
    </div>

    <p class="mt-1 flex flex-wrap items-center gap-2 text-sm text-slate-500">
      <span>{$t.common?.id}: {resolvedDashboardId ?? dashboardRef}{#if dashboard?.slug} • {dashboard.slug}{/if}</span>
      <span class="text-slate-300">|</span>
      <span class={`inline-flex items-center gap-2 rounded-full border px-2 py-1 text-xs font-semibold ${gitMeta.pillClass}`}>
        <span class={`h-2 w-2 rounded-full ${gitMeta.dotClass}`}></span>
        Git: {gitMeta.label}
        {#if gitStatus?.ahead_count > 0}
          ({gitStatus.ahead_count})
        {/if}
      </span>
    </p>
  </div>

  <div class="flex flex-wrap items-center gap-2">
    <button
      class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
      onclick={() => (showGitManager = true)}
    >
      {$t.git?.management}
    </button>
    <button
      class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
      onclick={runBackupTask}
      disabled={isStartingBackup}
    >
      {isStartingBackup ? $t.common?.loading : $t.dashboard?.run_backup}
    </button>
    <button
      class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-hover"
      onclick={loadDashboardPage}
    >
      {$t.common?.refresh}
    </button>
  </div>
</div>
<!-- #endregion DashboardHeader -->