{{/* Copyright 2024 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. */}}

{{define "breadcrumbs"}}
<div class="breadcrumb">
  <a class="breadcrumb-label" href="{{.outdirRevBaseURL}}/{{if .useLit}}steps_lit{{else}}steps{{end}}/">Build Steps{{if .useLit}} (Lit){{end}}</a>
</div>
<div class="breadcrumb">
  <span class="breadcrumb-label">{{trimPrefix .step.Output (printf "%s/" .outdirRel)}}</span>
</div>
{{end}}

{{define "tabs"}}
  {{template "invocation_tabs" .}}
{{end}}

{{define "scripts"}}
{{if .useLit}}
<script type="module" src="/static/siso-step-details.js"></script>
{{end}}
{{end}}

{{define "content"}}
{{$outdirRel:=.outdirRel}}
{{$outdirRevBaseURL:=.outdirRevBaseURL}}
{{$currentRev:=.currentRev}}
{{$inOtherRevs:=.inOtherRevs}}
{{$stepID:=.step.StepID}}
{{if .useLit}}
<siso-step-details
  endpoint="{{$outdirRevBaseURL}}/api/steps/{{$stepID}}">
</siso-step-details>
{{else}}
<div class="step-page surface">
  <h2>{{trimPrefix .step.Output (printf "%s/" $outdirRel)}}</h2>
  <ul class="step-details">
    <li>
      <md-icon>category</md-icon>
      <span>Used ninja action <code>{{.step.Action}}</code></span>
    </li>
    <li>
      <md-icon>description</md-icon>
      {{if .step.Rule}}
        <span>Applied siso rule <code>{{.step.Rule}}</code></span>
      {{else}}
        <span>No siso rule applied</span>
      {{end}}
    </li>
    <li>
      <md-icon>target</md-icon>
      <span>Part of GN target <code id="step-{{$stepID}}-gntarget">{{.step.GNTarget}}</code></span>
      <clipboard-copy for="step-{{$stepID}}-gntarget">
        <md-icon-button>
          <md-icon>content_copy</md-icon>
        </md-icon-button>
      </clipboard-copy>
    </li>
    <li>
      <md-icon>timer</md-icon>
      Ran in {{formatIntervalMetricHuman .step.Duration}}
    </li>
    <li class="remote-indicator">
      {{if .step.IsLocal}}
        <md-icon>cloud_off</md-icon>
        Local Execution
      {{else if and (not .step.Cached) (not .step.NoExec)}}
        <md-icon class="icon-cache-miss">cloud</md-icon>
        Remote Execution
      {{else if .step.Cached}}
        <md-icon class="icon-cache-hit">cloud_done</md-icon>
        Cache Hit
      {{end}}
    </li>
    {{if .step.Digest}}
    <li>
      <md-icon>cloud_circle</md-icon>
      <span>
        Digest:
        <code id="step-{{$stepID}}-digest">{{.step.Digest}}</code>
      </span>
      <clipboard-copy for="step-{{$stepID}}-digest">
        <md-icon-button>
          <md-icon>content_copy</md-icon>
        </md-icon-button>
      </clipboard-copy>
      <form id="recall-form"
        action="{{$outdirRevBaseURL}}/steps/{{$stepID}}/recall/" method="POST" hx-push-url="false"
        hx-select="#page-content" hx-target="#recall-dialog-form" hx-swap="innerHTML"
        hx-on:htmx:before-request="document.getElementById('recall-dialog').show()">
        <!-- TODO: show these in future, for now hardcode these. -->
        <input name="project" label="Cloud project ID" type="hidden" value="rbe-chrome-untrusted">
        <input name="reapi_instance" label="RE API instance name" type="hidden" value="default_instance">
        <md-outlined-button>
          Recall...
        </md-outlined-button>
      </form>
      <md-dialog id="recall-dialog">
        <div slot="headline">
          Recall step
        </div>
        <form slot="content" id="recall-dialog-form" method="dialog" hx-trigger="none">
          <md-circular-progress four-color indeterminate></md-circular-progress>
          Loading...
        </form>
        <div slot="actions">
          <md-text-button form="recall-dialog-form">Ok</md-text-button>
        </div>
      </md-dialog>
    </li>
    {{end}}
    <li>
      <md-icon>input_circle</md-icon>
      {{.step.Inputs}} input(s)
    </li>
    <li>
      <md-icon>output_circle</md-icon>
      {{len .step.Outputs}} output(s)
    </li>
  </ul>
  {{if gt (len .step.Outputs) 1}}
  <details class="step-outputs-details">
    <summary>Outputs ({{len .step.Outputs}})</summary>
    <ul class="step-outputs">
      {{range .step.Outputs}}
      <li><code>{{trimPrefix . (printf "%s/" $outdirRel)}}</code></li>
      {{end}}
    </ul>
  </details>
  {{end}}
  <details>
    <summary>Raw metrics</summary>
    <dl class="step-raw">
      {{range $key, $value := .stepRaw}}
      <dt>{{$key}}</dt>
      <dd>
        <span id="step-{{$stepID}}-{{$key}}-value">{{$value}}</span>
        <clipboard-copy for="step-{{$stepID}}-{{$key}}-value">
          <md-icon-button>
            <md-icon>content_copy</md-icon>
          </md-icon-button>
        </clipboard-copy>
      </dd>
      {{end}}
    </dl>
  </details>
</div>
{{end}}
{{end}}

{{define "sidebar"}}
{{$outdirRel:=.outdirRel}}
{{$outdirRevBaseURL:=.outdirRevBaseURL}}
{{$currentRev:=.currentRev}}
{{$inOtherRevs:=.inOtherRevs}}
{{$stepID:=.step.StepID}}
<aside id="page-sidebar">
  {{/* TODO: deduplicate this with timeline on steps page? */}}
  <ul class="revs-timeline">
    {{range $r := .revs}}
    <li{{if eq $r.Rev $currentRev}} class="selected"{{end}}>
      {{with (index $inOtherRevs $r.Rev)}}
        {{if .StepID}}
        <a class="rev-label" href="{{$outdirRevBaseURL}}/../{{$r.Rev}}/{{if $.useLit}}steps_lit{{else}}steps{{end}}/{{.StepID}}/">
          <span class="rev-label-note">{{formatIntervalMetricHuman .Duration}} in</span>
          {{buildTimeHumanReadable $r}}
          <md-ripple></md-ripple>
        </a>
        <div class="rev-info">
          {{if not $r.Started.IsZero}}
          <relative-time datetime="{{timeRFC3339 $r.Started.Time}}"></relative-time>{{if $r.Started.Inferred}} <abbr title="Inferred start time (file modification time minus duration)">*</abbr>{{end}}
          {{end}}
        </div>
        {{else}}
        <span class="rev-label disabled">
          Not found in
          {{buildTimeHumanReadable $r}}
        </span>
        <div class="rev-info">
          {{if not $r.Started.IsZero}}
          <relative-time datetime="{{timeRFC3339 $r.Started.Time}}"></relative-time>{{if $r.Started.Inferred}} <abbr title="Inferred start time (file modification time minus duration)">*</abbr>{{end}}
          {{end}}
        </div>
        {{end}}
      {{end}}
    </li>
    {{end}}
  </ul>
</aside>
{{end}}