{#-
 # Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 #
 # Licensed under the Apache License, Version 2.0 (the "License").
 # You may not use this file except in compliance with the License.
 # A copy of the License is located at
 #
 #     http://www.apache.org/licenses/LICENSE-2.0
 #
 # or in the "license" file accompanying this file. This file is
 # distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 # ANY KIND, either express or implied. See the License for the specific
 # language governing permissions and limitations under the License.
-#}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    Pipeline {{ pipe["name"] }}
  </title>
<style>
#title{
  background-color: #ec407a;
  color: white;
  padding: 2em;
}
h1 {
  margin-bottom: 0em;
}
#subtitle {
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.2em;
}
.run-info ul {
  list-style: none;
}
.run-info ul li {
  display: inline;
  margin-right: 6em;
  margin-left: -3em;
  text-transform: uppercase;
  font-size: small;
  color: #ec407a;
}
#content {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2em;
  color: #263238;
  font-family: Helvetica, sans-serif;
}
p {
  margin: 0;
}
.command-table {
  background-color: #eceff1;
  padding: 0.3em;
  border-radius: 0.3em;
  margin-bottom: 4em;
}
.command-table .fail-ignored {
  background-color: #e65100cc;
  padding: 0.3em;
  border-radius: 0.3em;
}
.command-table .success {
  background-color: #1a237ecc;
  padding: 0.3em;
  border-radius: 0.3em;
}
.command-table .in-progress {
  background-color: #26323844;
  padding: 0.3em;
  border-radius: 0.3em;
}
.command-table .fail {
  background-color: #f44336cc;
  padding: 0.3em;
  border-radius: 0.3em;
}
.command-content {
  background-color: #eceff1;
  padding: 1em;
}
.command-description {
  color: #26323899;
  font-size: smaller;
  text-align: center;
  margin-bottom: 1em;
  font-weight: bold;
}
.command-invocation {
  padding: 1em;
  color: #fff;
  background-color: #005662;
  font-size: small;
  font-family: monospace;
  border-radius: 0.5em;
  text-shadow: 0 0 2px #ffccbccc;
}
.command-stats-table {
  margin-top: 0.2em;
  border-radius: 0.5em;
  padding: 0.2em;
  padding-top: 0.4em;
  display: flex;
  flex-direction: column;
  background-color: #eae3998a;
  color: #263238cc;
  margin-bottom: 0.2em;
}
.command-stats-row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 0.4em;
  margin-bottom: 0.4em;
  font-size: small;
  text-transform: uppercase;
}
.command-stats-row p .value {
  color: #00251aaa;
  text-shadow: 0 0 2px #82ada944;
  font-weight: bold;
}
.output-box {
  margin-top: 0.4em;
  margin-bottom: 0.2em;
  padding: 1em;
  color: #000a12;
  background-color: #cfd8dc;
  font-size: small;
  font-family: monospace;
  border-radius: 0.5em;
  max-height: 20em;
  overflow-x: auto;
  overflow-y: auto;
}
.output-box xmp{
  white-space: pre;
}
.stage-name p {
  margin-left: 0.5em;
  color: #546e7a;
  text-shadow:  -1px  0px 0px #fff
               ,-2px  0px 0px #ffffff99
               ,-1px  1px 0px #ffffff99
               ;
  font-size: 48pt;
  font-variant: small-caps;
  text-transform: lowercase;
  font-weight: bold;
  font-style: italic;
}
.stage-name .underline {
  width: 100%;
  height: 1.1em;
  background-color: #546e7a;
  margin-top: -1.6em;
}
.stage-name {
  margin-top: 6em;
  margin-bottom: 3em;
}

</style>
</head>
<body>
<div id="content">

  <div id="title">
    <h1>
      {{ run["project"] }} pipeline &lsquo;{{ pipe["name"] }}&rsquo;
    </h1>
    <p id="subtitle">
      Litani CI Dashboard
    </p>
  </div><!-- id="title" -->

  <div class=run-info>
    <ul>
      <li>Pipeline status: {{ pipe["status"] }}</li>
      <li>{{ run["start_time"] }}</li>
      <li>{{ run["run_id"] }}</li>
    </ul>
  </div><!-- class=run-info -->

  {% for stage in pipe["ci_stages"] %}
  <div class="stage">
    <div class="stage-name">
      <p>{{ stage["name"] }}</p>
      <div class="underline"></div>
    </div><!-- class="stage-name" -->

    {% for job in stage["jobs"] %}
    <div class="command-table">
      {% if not job["complete"] %}
      <div class="in-progress">
      {% elif not job["command_return_code"] %}
      <div class="success">
      {% else %}
      <div class="fail">
      {% endif %}{# not job["complete"] #}
        <div class="command-content">
          <div class="command-description">
            {% if "description" in job["wrapper_arguments"] %}
            <p>
              {{ job["wrapper_arguments"]["description"] }}
            </p>
            {% endif %}{# "description" in job #}
          </div><!-- class="command-description" -->
          <div class="command-invocation">
            <p>
            {{ job["wrapper_arguments"]["command"] }}
            </p>
          </div><!-- class="command-invocation" -->

          {% if job["complete"] %}
          <div class="command-stats-table">
            <div class="command-stats-row">
              <p>Command return code:
              <span class="value">
                {{ job["command_return_code"] }}
              </span></p>
              <p>OK returns:
              <span class="value">
                {{ job["wrapper_arguments"]["ok_returns"] }}
              </span></p>
              <p>Ignored returns:
              <span class="value">
                {{ job["wrapper_arguments"]["ignore_returns"] }}
              </span></p>
            </div><!-- class="command-stats-row" -->
            <div class="command-stats-row">
              <p>Timeout:
              <span class="value">
                {{ job["wrapper_arguments"]["timeout"] }}
              </span></p>
              <p>Timeout ok:
              <span class="value">
                {{ job["wrapper_arguments"]["timeout_ok"] }}
              </span></p>
              <p>Timeout ignored:
              <span class="value">
                {{ job["wrapper_arguments"]["timeout_ignore"] }}
              </span></p>
              <p>Timeout reached:
              <span class="value">
                {{ job["timeout_reached"] }}
              </span></p>
            </div><!-- class="command-stats-row" -->
            <div class="command-stats-row">
              <p>Start time:
              <span class="value">
                {{ job["start_time"] }}
              </span></p>
              <p>Duration:
              <span class="value">
                {{ job["duration_str"] }}
              </span></p>
              <p>End time:
              <span class="value">
                {{ job["end_time"] }}
              </span></p>
            </div><!-- class="command-stats-row" -->
            <div class="command-stats-row">
              <p>Command successful:
              <span class="value">
              {% if job["command_return_code"] %}
              no
              {% else %}
              yes
              {% endif %}{# job["command_return_code"] #}
              </span></p>
            </div><!-- class="command-stats-row" -->
          </div><!-- class="command-stats-table" -->
          {% endif %}{# job["complete"] #}

          {% if job["stdout"] %}
          <div class="output-box"><xmp>stdout:
            {% for line in job["stdout"] %}
{{ line.strip() }}
            {%- endfor %}{# line in job["stdout"] #}
            </xmp>
          </div><!-- class="output-box" -->
          {% endif %}{# job["stdout"] #}

          {% if job["stderr"] %}
          <div class="output-box"><xmp>stderr:
            {% for line in job["stderr"] %}
{{ line.strip() }}
            {%- endfor %}{# line in job["stderr"] #}
            </xmp>
          </div><!-- class="output-box" -->
          {% endif %}{# job["stderr"] #}

        </div><!-- class="command-content" -->
      </div><!-- class="fail" -->
    </div><!-- id="command-table" -->
    {% endfor %}{# command in stage["jobs"] #}

  </div><!-- class="stage" -->
  {% endfor %}{# stage in pipe["ci_stages"] #}


</div><!-- id="content" -->
</body>
</html>
