<!--
    Copyright 2020 The Go Authors. All rights reserved.
    Use of this source code is governed by a BSD-style
    license that can be found in the LICENSE file.
-->
{{template "layout" .}}

{{define "content"}}
  <section class="Workflows">
    <div class="Workflows-header">
      <h2>Workflows</h2>
      <a href="{{baseLink "/workflows/new"}}" class="Button">New</a>
    </div>
    <ul class="WorkflowList">
      {{range $wfid := .WorkflowIDs}}
        {{$detail := index $.WorkflowDetails $wfid}}
        {{$workflow := $detail.Workflow}}
        <li class="WorkflowList-item">
          <h3 class="WorkflowList-title">
            {{$workflow.Name.String}}
            <span class="WorkflowList-titleTime">
              {{$workflow.CreatedAt.UTC.Format "2006/01/02 15:04 MST"}}
            </span>
            {{if not (or $workflow.Finished $workflow.Error)}}
              <div class="WorkflowList-titleStop">
                <form action="{{baseLink (printf "/workflows/%s/stop" $wfid)}}" method="post">
                  <input type="hidden" id="workflow.id" name="workflow.id" value="{{$wfid}}" />
                  <input name="workflow.stop" class="Button Button--red" type="submit" value="STOP" onclick="return this.form.reportValidity() && confirm('This will stop the workflow and all in-flight tasks.\n\nAre you sure you want to proceed?')" />
                </form>
              </div>
            {{end}}
          </h3>
          <table class="WorkflowList-params">
            <tbody>
              <tr>
                <td>State:</td>
                <td class="WorkflowList-paramData">
                  {{if $workflow.Error}}
                    Error
                    <div class="WorkflowList-workflowStateIcon Workflowlist-workflowStateIcon--error"></div>
                  {{else if $workflow.Finished}}
                    Success
                    <div class="WorkflowList-workflowStateIcon Workflowlist-workflowStateIcon--success"></div>
                  {{else}}
                    Pending
                    <div class="WorkflowList-workflowStateIcon Workflowlist-workflowStateIcon--pending"></div>
                  {{end}}
                </td>
              </tr>
              <tr>
                <td>Output:</td>
                <td class="WorkflowList-paramData">{{$workflow.Output}}</td>
              </tr>
              <tr>
                <td>Error:</td>
                <td class="WorkflowList-paramData">{{$workflow.Error}}</td>
              </tr>
              {{range $name, $value := $.WorkflowParams $workflow}}
                <tr>
                  <td>{{$name}}:</td>
                  <td class="WorkflowList-paramData">{{$value}}</td>
                </tr>
              {{end}}
            </tbody>
          </table>
          <h4 class="WorkflowList-sectionTitle">Tasks</h4>
          {{template "task_list" $detail}}
        </li>
      {{end}}
    </ul>
  </section>
{{end}}