{{ define "title" }}pipelines · {{ .RepoInfo.FullName }}{{ end }}

{{ define "extrameta" }}
    {{ $title := "pipelines"}}
    {{ $url := printf "https://tangled.org/%s/pipelines" .RepoInfo.FullName }}
    {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo "Title" $title "Url" $url) }}
{{ end }}

{{ define "repoContent" }}
  {{ $active := .FilterKind }}

  {{ $all :=
     (dict
       "Key" "all"
       "Value" "all"
       "Icon" "package"
       "Meta" "") }}
  {{ $push :=
     (dict
       "Key" "push"
       "Value" "push"
       "Icon" "git-commit-horizontal"
       "Meta" "") }}
  {{ $pr :=
     (dict
       "Key" "pull_request"
       "Value" "pull request"
       "Icon" "git-pull-request"
       "Meta" "") }}
  {{ $values := list $all $push $pr }}

  <div class="flex justify-between items-center gap-4">
    <div>
      {{ template "fragments/tabSelector" (dict "Name" "trigger" "Values" $values "Active" .FilterKind) }}
    </div>
    <div class="text-sm text-gray-600 dark:text-gray-400">
      {{ .Total }} pipeline run{{ if ne .Total 1 }}s{{ end }}
    </div>
  </div>
{{ end }}

{{ define "repoAfter" }}
{{ if .Pipelines }}
  <div class="flex flex-col gap-2 mt-2">
    {{ range .Pipelines }}
      {{ template "pipelineCard" (dict "Root" $ "Pipeline" .) }}
    {{ end }}
  </div>
{{ else }}
  <div class="mt-2 py-12 flex flex-col items-center justify-center gap-6 text-center border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-800">
    <div class="flex justify-center">
      {{ i "package" "size-16 text-gray-300 dark:text-gray-700" }}
    </div>

    <div class="flex flex-col gap-2">
      <p class="text-lg font-semibold dark:text-white">
        No pipelines have been run yet
      </p>
      <p class="text-sm text-gray-600 dark:text-gray-400 max-w-md">
        Get started by configuring CI/CD for this repository
      </p>
    </div>

    <div class="flex flex-col gap-3 text-left max-w-md">
      <div class="flex items-start gap-3">
        <span class="mt-0.5 text-xs bg-gray-200 dark:bg-gray-700 rounded-full size-6 flex items-center justify-center font-semibold shrink-0">1</span>
        <p class="text-sm text-gray-700 dark:text-gray-300">
          Choose a spindle in your
          <a href="/{{ .RepoInfo.FullName }}/settings?tab=pipelines" class="underline hover:no-underline">repository settings</a>
        </p>
      </div>
      <div class="flex items-start gap-3">
        <span class="mt-0.5 text-xs bg-gray-200 dark:bg-gray-700 rounded-full size-6 flex items-center justify-center font-semibold shrink-0">2</span>
        <p class="text-sm text-gray-700 dark:text-gray-300">
          Configure your CI/CD
          <a href="https://docs.tangled.org/spindles.html#pipelines" class="underline hover:no-underline" target="_blank" rel="noopener">pipeline</a>
        </p>
      </div>
      <div class="flex items-start gap-3">
        <span class="mt-0.5 text-xs bg-gray-200 dark:bg-gray-700 rounded-full size-6 flex items-center justify-center font-semibold shrink-0">3</span>
        <p class="text-sm text-gray-700 dark:text-gray-300">
          Trigger a workflow with a push or pull request
        </p>
      </div>
    </div>
  </div>
{{ end }}
{{ end }}

{{ define "pipelineCard" }}
  {{ $root := .Root }}
  {{ $p := .Pipeline }}
  {{ with $p }}
  <div class="relative rounded drop-shadow-sm bg-white px-6 py-4 dark:bg-gray-800">
    <div class="grid grid-cols-[1fr_auto] md:grid-cols-[1fr_auto_9rem_7rem] gap-3 md:gap-4 items-start md:items-center">
      <!-- Trigger info -->
      <div class="flex items-center gap-2 flex-wrap">
        {{ $target := .Trigger.TargetRef }}
        {{ $workflows := .Workflows }}

        <!-- Status icon with tooltip -->
        <span class="relative z-50 mr-4">
          {{ template "repo/pipelines/fragments/pipelineSymbolLong" (dict "Pipeline" . "RepoInfo" $root.RepoInfo) }}
        </span>

        {{ if .IsResponding }}
          <a href="/{{ $root.RepoInfo.FullName }}/pipelines/{{ .Id }}/workflow/{{ index $workflows 0 }}" class="flex items-center gap-2 flex-wrap no-underline hover:underline">
        {{ end }}
        {{ if .Trigger.IsPush }}
          {{ i "git-commit-horizontal" "size-4 text-gray-500 dark:text-gray-400 shrink-0" }}
          <span class="text-sm text-gray-600 dark:text-gray-400">Push to</span>
          <span class="font-semibold dark:text-white">{{ $target }}</span>
        {{ else if .Trigger.IsPullRequest }}
          {{ i "git-pull-request" "size-4 text-gray-500 dark:text-gray-400 shrink-0" }}
          <span class="text-sm text-gray-600 dark:text-gray-400">Pull request</span>
          <span class="font-semibold dark:text-white">{{ $target }}</span>
          {{ i "arrow-left" "size-3 text-gray-500 dark:text-gray-400" }}
          <span class="font-semibold dark:text-white">{{ .Trigger.PRSourceBranch }}</span>
        {{ end }}
        {{ if .IsResponding }}
          </a>
        {{ end }}
      </div>

      <!-- Metadata stacked on mobile, separate columns on desktop -->
      <div class="flex flex-col gap-2 items-end md:contents">
        <!-- Commit SHA -->
        <div class="font-mono text-xs text-gray-500 dark:text-gray-400">
          <a href="/{{ $root.RepoInfo.FullName }}/commit/{{ .Sha }}" class="text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-900 no-underline hover:underline px-2 py-1 rounded">
            {{ slice .Sha 0 8 }}
          </a>
        </div>

        <!-- Time -->
        <div class="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap text-right">
          {{ template "repo/fragments/time" .Created }}
        </div>

        <!-- Duration -->
        <div class="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap text-right">
          {{ $t := .TimeTaken }}
          {{ if $t }}
            <span class="flex items-center gap-1">
              {{ i "clock" "size-3" }}
              <time title="{{ $t }}">{{ $t | durationFmt }}</time>
            </span>
          {{ else }}
            <span class="text-gray-400 dark:text-gray-600">--</span>
          {{ end }}
        </div>
      </div>
    </div>
  </div>
  {{ end }}
{{ end }}