{{/* 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 "content"}}
{{$outdirRel:=.outdirRel}}
{{$outdirRevBaseURL:=.outdirRevBaseURL}}
{{$currentRev:=.currentRev}}
{{$inOtherRevs:=.inOtherRevs}}
{{$stepID:=.step.StepID}}
<div class="step-page">
  <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>
      {{.step.Outputs}} output(s)
    </li>
  </ul>
  <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>

<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}}/steps/{{.StepID}}/">
          <span class="rev-label-note">{{formatIntervalMetricHuman .Duration}} in</span>
          {{buildTimeHumanReadable $r}}
          <md-ripple></md-ripple>
        </a>
        <div class="rev-info">
          <relative-time datetime="{{timeRFC3339 $r.Mtime}}"></relative-time>
        </div>
        {{else}}
        <span class="rev-label disabled">
          Not found in
          {{buildTimeHumanReadable $r}}
        </span>
        <div class="rev-info">
          <relative-time datetime="{{timeRFC3339 $r.Mtime}}"></relative-time>
        </div>
        {{end}}
      {{end}}
    </li>
    {{end}}
  </ul>
</aside>
{{end}}