{{ define "title" }}{{ .Workflow }} &middot; Pipeline {{ .Pipeline.Id }} &middot; {{ .RepoInfo.FullName }} &middot; 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 "repoContent" }}
<section class="w-full grid grid-cols-1 md:grid-cols-4 gap-2 mt-2">
  <div class="col-span-1">
    {{ block "sidebar" . }} {{ end }}
  </div>
  <div class="col-span-1 md:col-span-3">
    <!-- TODO(boltless): explicitly check for pipeline cancel permission -->
    {{ if $.RepoInfo.Roles.IsOwner }}
    <div class="flex justify-between mb-2">
      <div id="workflow-error" class="text-red-500 dark:text-red-400"></div>
      <button
        class="btn"
        hx-post="/{{ $.RepoInfo.FullName }}/pipelines/{{ .Pipeline.Id }}/workflow/{{ .Workflow }}/cancel"
        hx-swap="none"
        {{ if (index .Pipeline.Statuses .Workflow).Latest.Status.IsFinish -}}
          disabled
        {{- end }}
      >Cancel</button>
    </div>
    {{ end }}
    {{ with (index .Pipeline.Statuses .Workflow).Latest }}
      {{ if .Error }}
      <div class="mb-2 flex items-start gap-2 p-3 rounded border border-red-200 dark:border-red-900/60 bg-red-50/60 dark:bg-red-950/20 text-red-700 dark:text-red-400 text-sm">
        {{ i "triangle-alert" "size-4 shrink-0 mt-0.5" }}
        <div class="flex-1 min-w-0">
          <div class="break-words whitespace-pre-wrap">{{- .ErrorMessage -}}</div>
          {{- with .ErrorDetails }}
          <div class="font-mono break-words whitespace-pre-wrap">{{- . -}}</div>
          {{- end }}
        </div>
      </div>
      {{ end }}
    {{ end }}
    {{ block "logs" . }} {{ end }}
  </div>
</section>
{{ template "fragments/workflow-timers" }}
{{ end }}

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

  {{ $activeTab := "bg-white dark:bg-gray-700 drop-shadow-sm" }}
  {{ $inactiveTab := "bg-gray-100 dark:bg-gray-800" }}

  {{ with .Pipeline }}
    {{ $id := .Id }}
    <div class="sticky top-2 grid grid-cols-1 rounded border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700">
      {{ range $name, $all := .Statuses }}
      <a href="/{{ $.RepoInfo.FullName }}/pipelines/{{ $id }}/workflow/{{ $name }}" class="no-underline hover:no-underline hover:bg-gray-100/25 hover:dark:bg-gray-700/25">
        <div
          class="flex gap-2 items-center justify-between p-2 {{ if eq $name $active }} {{ $activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}">
          {{ $lastStatus := $all.Latest }}
          {{ $kind := $lastStatus.Status.String }}

          <div id="left" class="flex items-center gap-2 flex-1 min-w-0">
            <div id="workflow-symbol-{{ normalizeForHtmlId $name }}" class="flex-shrink-0">
              {{ template "repo/pipelines/fragments/workflowSymbol" $all }}
            </div>
            <span class="truncate" title="{{ $name }}">
              {{ $name }}
            </span>
          </div>
          <div id="right" class="flex items-center gap-2 flex-shrink-0">
            <span class="font-bold">{{ $kind }}</span>
            {{ if .TimeTaken }}
            {{ template "repo/fragments/duration" .TimeTaken }}
            {{ else }}
            {{ template "repo/fragments/shortTimeAgo" $lastStatus.Created }}
            {{ end }}
          </div>
        </div>
      </a>
      {{ end }}
    </div>
  {{ end }}
{{ 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-2">
      <div class="text-base text-gray-500 flex items-center justify-center italic p-12 only:flex hidden border border-gray-200 dark:border-gray-700 rounded">
        <span class="flex items-center gap-2">
          {{ i "triangle-alert" "size-4" }} No logs for this workflow
        </span>
      </div>
    </div>
  </div>
{{ end }}
