{{ define "title" }}{{ .Workflow }} · Pipeline {{ .Pipeline.Id }} · {{ .RepoInfo.FullName }} · Tangled{{ 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 "repoContentLayout" }}
<section class="w-full rounded bg-white py-4 pl-5 pr-8 dark:bg-gray-800">
  <div class="grid grid-cols-1 gap-[14px] lg:grid-cols-[240px_minmax(0,1fr)]">
    <div class="min-w-0">
      {{ template "sidebar" . }}
    </div>
    <div class="min-w-0">
      {{ template "repoContent" . }}
    </div>
  </div>
</section>
{{ template "fragments/workflow-timers" }}
{{ end }}

{{ define "repoContent" }}
  {{ with (index .Pipeline.Statuses .Workflow).Latest }}
    {{ if .Error }}
    <div class="mb-4 flex items-start gap-2 rounded border border-red-200 bg-red-50/60 p-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/20 dark:text-red-400">
      {{ i "triangle-alert" "size-4 shrink-0 mt-0.5" }}
      <div class="min-w-0 flex-1">
        <div class="break-words whitespace-pre-wrap">{{- .ErrorMessage -}}</div>
        {{- with .ErrorDetails }}
        <div class="break-words whitespace-pre-wrap font-mono">{{- . -}}</div>
        {{- end }}
      </div>
    </div>
    {{ end }}
  {{ end }}
  {{ template "logs" . }}
{{ end }}

{{ define "sidebar" }}
  {{ $active := .Workflow }}

  {{ with .Pipeline }}
    {{ $id := .Id }}
    {{ $pipeline := . }}
    <div class="sticky top-2 flex h-full min-h-[398px] w-full flex-col gap-2 lg:w-[240px]">
      <div class="flex flex-col gap-2">
        {{ range $name, $all := .Statuses }}
        {{ $lastStatus := $all.Latest }}
        {{ $status := $lastStatus.Status }}
        {{ $kind := $status.String }}
        <div
          class="flex flex-col gap-1.5 rounded px-3 py-2.5 transition-colors {{ if eq $name $active }}border border-transparent bg-gray-100 dark:bg-gray-700{{ else }}border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800{{ end }}">
          <div class="flex h-5 items-center justify-between gap-[14px]">
            <a href="/{{ $.RepoInfo.FullName }}/pipelines/{{ $id }}/workflow/{{ $name }}" class="flex min-w-0 items-center gap-0.5 no-underline hover:no-underline">
              <span class="truncate text-sm font-medium leading-5 text-gray-900 dark:text-gray-100" title="{{ $name }}">{{ $name }}</span>
              {{ i "arrow-up-right" "size-4 shrink-0 text-gray-900 dark:text-gray-100" }}
            </a>
            <div class="shrink-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
              {{ template "repo/fragments/shortTimeAgo" $lastStatus.Created }}
            </div>
          </div>
          <div class="flex h-8 items-center justify-between gap-2">
            <div class="flex min-w-0 items-center gap-1">
              <div id="workflow-symbol-{{ normalizeForHtmlId $name }}" class="flex-shrink-0">
                {{ template "repo/pipelines/fragments/workflowSymbol" $all }}
              </div>
              <span class="truncate text-sm font-semibold leading-5 text-gray-900 dark:text-gray-100">{{ $kind }}</span>
            </div>
            {{ template "workflowActions" (dict "Root" $ "Pipeline" $pipeline "Name" $name "Kind" $kind "Status" $status) }}
          </div>
        </div>
        {{ end }}
      </div>
      {{ template "sidebarActions" $ }}
    </div>
  {{ end }}
{{ end }}

{{ define "workflowActions" }}
  {{ $root := .Root }}
  {{ $status := .Status }}
  {{ $kind := .Kind }}
  {{ if and $root.RepoInfo.Roles.IsPushAllowed (ne $kind "success") }}
    <div class="flex shrink-0 items-center gap-0.5">
      <button
        class="group inline-flex h-8 w-[30px] min-h-8 items-center justify-center rounded px-2 py-1.5 text-gray-900 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-700"
        title="Retry workflow"
        hx-post="/{{ $root.RepoInfo.FullName }}/pipelines/{{ .Pipeline.Id }}/workflow/{{ .Name }}/retry"
        hx-swap="none"
        hx-disabled-elt="this"
      >
        {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
        {{ i "rotate-ccw" "size-4 group-[.htmx-request]:hidden" }}
      </button>
      {{ if not $status.IsFinish }}
      <button
        class="group inline-flex h-8 w-[30px] min-h-8 items-center justify-center rounded px-2 py-1.5 text-gray-900 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-700"
        title="Cancel workflow"
        hx-post="/{{ $root.RepoInfo.FullName }}/pipelines/{{ .Pipeline.Id }}/workflow/{{ .Name }}/cancel"
        hx-swap="none"
        hx-disabled-elt="this"
      >
        {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
        {{ i "x" "size-4 group-[.htmx-request]:hidden" }}
      </button>
      {{ end }}
    </div>
  {{ end }}
{{ end }}

{{ define "sidebarActions" }}
  <div class="mt-auto flex w-full flex-col gap-2">
    {{ with .SSHLogCommand }}
    <button type="button" class="btn flex h-9 min-h-9 w-full items-center justify-center gap-1.5 px-2 py-2 text-sm leading-5" onclick="navigator.clipboard.writeText({{ printf "%q" . }})" title="{{ . }}">
      {{ i "copy" "size-4" }} Watch logs via SSH
    </button>
    {{ end }}
    {{ if .RepoInfo.Roles.IsPushAllowed }}
    <div class="flex w-full gap-2">
      <div id="workflow-error" class="empty:hidden text-red-500 dark:text-red-400"></div>
      <button
        class="btn group flex h-9 min-h-9 flex-1 items-center justify-center gap-1.5 px-2 py-2 text-sm leading-5"
        hx-post="/{{ .RepoInfo.FullName }}/pipelines/{{ .Pipeline.Id }}/retry"
        hx-swap="none"
        hx-disabled-elt="this"
      >
        {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
        {{ i "rotate-ccw" "size-4 group-[.htmx-request]:hidden" }}
        <span>Retry all</span>
      </button>
      {{ if .Pipeline.InProgress }}
      <button
        class="btn group flex h-9 min-h-9 flex-1 items-center justify-center gap-1.5 px-2 py-2 text-sm leading-5"
        hx-post="/{{ .RepoInfo.FullName }}/pipelines/{{ .Pipeline.Id }}/cancel"
        hx-swap="none"
        hx-disabled-elt="this"
      >
        {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
        {{ i "circle-stop" "size-4 group-[.htmx-request]:hidden" }}
        <span>Cancel all</span>
      </button>
      {{ end }}
    </div>
    {{ end }}
  </div>
{{ end }}

{{ define "logs" }}
  <div id="log-stream"
       class="text-sm"
       hx-ext="ws"
       ws-connect="/{{ $.RepoInfo.FullName }}/pipelines/{{ .Pipeline.Id }}/workflow/{{ .Workflow }}/logs">
    <div id="lines" class="flex flex-col gap-3">
      <div class="hidden items-center justify-center rounded border border-gray-200 p-12 text-base italic text-gray-500 only:flex dark:border-gray-700">
        <span class="flex items-center gap-2">
          {{ i "triangle-alert" "size-4" }} No logs for this workflow
        </span>
      </div>
    </div>
  </div>
{{ end }}