<!--
    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.
-->
{{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 $workflow := .Workflows}}
        <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>
          </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>
          <table class="TaskList">
            <thead>
              <tr class="TaskList-item TaskList-itemHeader">
                <th class="TaskList-itemHeaderCol TaskList-itemExpand"></th>
                <th class="TaskList-itemHeaderCol TaskList-itemState">State</th>
                <th class="TaskList-itemHeaderCol TaskList-itemName">Name</th>
                <th class="TaskList-itemHeaderCol TaskList-itemStarted">Started</th>
                <th class="TaskList-itemHeaderCol TaskList-itemUpdated">Updated</th>
                <th class="TaskList-itemHeaderCol TaskList-itemResult">Result</th>
              </tr>
            </thead>
            {{$tasks := index $.WorkflowTasks $workflow.ID}}
            {{range $task := $tasks}}
              <tbody>
                <tr class="TaskList-item TaskList-itemSummary TaskList-expandableItem">
                  <td class="TaskList-itemCol TaskList-itemExpand">
                    <span class="TaskList-itemExpandClosed">
                      <img class="TaskList-itemExpandControl" alt="unfold more" src="{{baseLink "/static/images/chevron_right_black_24dp.svg"}}" />
                    </span>
                    <span class="TaskList-ItemExpandOpened">
                      <img class="TaskList-itemExpandControl" alt="unfold less" src="{{baseLink "/static/images/expand_more_black_24dp.svg"}}" />
                    </span>
                  </td>
                  <td class="TaskList-itemCol TaskList-itemState">
                    {{if $task.Error.Valid}}
                      <img class="TaskList-itemStateIcon" alt="error" src="{{baseLink "/static/images/error_red_24dp.svg"}}" />
                    {{else if $task.Finished}}
                      <img class="TaskList-itemStateIcon" alt="finished" src="{{baseLink "/static/images/check_circle_green_24dp.svg"}}" />
                    {{else}}
                      <img class="TaskList-itemStateIcon" alt="pending" src="{{baseLink "/static/images/pending_yellow_24dp.svg"}}" />
                    {{end}}
                  </td>
                  <td class="TaskList-itemCol TaskList-itemName">
                    {{$task.Name}}
                  </td>
                  <td class="TaskList-itemCol TaskList-itemStarted">
                    {{$task.CreatedAt.UTC.Format "Mon Jan _2 2006 15:04:05"}}
                  </td>
                  <td class="TaskList-itemCol TaskList-itemUpdated">
                    {{$task.UpdatedAt.UTC.Format "Mon Jan _2 2006 15:04:05"}}
                  </td>
                  <td class="TaskList-itemCol TaskList-itemResult">
                    {{$task.Result}}
                  </td>
                </tr>
                <tr class="TaskList-itemLogsRow">
                  <td class="TaskList-itemLogs" colspan="6">
                    {{if $task.Error.Valid}}
                      <div class="TaskList-itemLogLine TaskList-itemLogLineError">
                        {{- $task.Error.Value -}}
                      </div>
                    {{end}}
                    {{range $log := $.Logs $workflow.ID  $task.Name}}
                      <div class="TaskList-itemLogLine">
                        {{- $log.CreatedAt.UTC.Format "2006/01/02 15:04:05"}} {{$log.Body -}}
                      </div>
                    {{end}}
                  </td>
                </tr>
              </tbody>
            {{end}}
          </table>
        </li>
      {{end}}
    </ul>
  </section>
{{end}}