<!--
@license
Copyright (C) 2019 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License 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.
-->

<dom-module id="zuul-status-view">
  <template>
    <style>
      #view-container {
        display: block;
      }
      .container {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
      }
      .header {
        background-color: var(--table-header-background-color);
        justify-content: space-between;
        min-height: 3.2em;
        padding: .5em var(--default-horizontal-margin, 1rem);
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
      }
      .header .label {
        font: inherit;
        font-family: var(--font-family-bold);
        font-size: 1.17em;
        margin-right: 1em;
      }
      .progress {
        overflow: hidden;
        height: 20px;
        margin-bottom: 20px;
        background-color: #f5f5f5;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
        box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
      }
      .progress-bar {
        float: left;
        width: 0;
        height: 100%;
        font-size: 12px;
        line-height: 20px;
        color: #fff;
        text-align: center;
        background-color: #428bca;
        -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
        box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
        -webkit-transition: width .6s ease;
        transition: width .6s ease;
      }
      .zuul-job-result {
        float: right;
        width: 70px;
        height: 15px;
        margin: 2px 0 0 0;
      }
      #progressBar {
        width: var(--progress-bar-width, 0%);
      }
      .genericList th {
        white-space: nowrap;
      }
      .genericList th,
      .genericList td {
        padding-right: 1rem;
      }
      .genericList tr th:first-of-type,
      .genericList tr td:first-of-type {
        padding-left: 1rem;
      }
      .genericList td {
        flex-shrink: 0;
      }
      .genericList .topHeader {
        color: var(--primary-text-color);
        font-weight: var(--font-weight-bold);
        text-align: left;
        vertical-align: middle
      }
      .genericList a {
        color: var(--primary-text-color);
        text-decoration: none;
      }
      .genericList a:hover {
        text-decoration: underline;
      }
      #list {
        padding-bottom: 1em;
      }
      .zuul-job-result {
        float: right;
        width: 70px;
        height: 15px;
        margin: 2px 0 0 0;
      }
      .label {
        display: inline;
        padding: .2em .6em .3em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em;
      }
      .label-danger {
        background-color: #d9534f;
      }
      .label-default {
        background-color: #999;
      }
      .label-info {
        background-color: #5bc0de;
      }
      .label-success {
        background-color: #5cb85c;
      }
      .label-warning {
        background-color: #f0ad4e;
      }
    </style>
    <template is="dom-if" if="[[zuulUrl]]">
      <div id="view-container">
        <div class="header container">
          <div class="container">
            <h3 class="labelName">[[_computeTitle(_response)]]</h3>
          </div>
        </div>
        <div class="bottom container">
          <table id="list" class="genericList">
            <tr class="headerRow">
              <th class="pipeline topHeader">Pipeline</th>
              <th class="jobName topHeader">Job Name</th>
              <th class="progressName topHeader">Progress</th>
            </tr>
            <tbody>
              <template is="dom-repeat" items=[[_response]] as="response">
                <template is="dom-repeat" items=[[response.jobs]] as="jobs">
                  <tr class="table">
                    <td class="pipeline">
                      [[jobs.pipeline]]
                    </td>
                    <td class="jobName">
                      <a href="[[_computeReportURL(jobs)]]" target="_blank"
                         hidden$="[[!jobs.name]]">
                        [[jobs.name]]
                      </a>
                    </td>
                    <td class="progressName">
                      <template is="dom-if" if="[[_getResults(jobs, 'true', 'in progress')]]">
                        <div class="progress zuul-job-result">
                          <div class="progress-bar"
                            id="progressBar"
                            role="progressbar"
                            aria-valuenow$="[[_progressPercent(jobs)]]"
                            aria-valuemin="0"
                            aria-valuemax="100"></div>
                        </div>
                      </template>
                      <template is="dom-if" if="[[!_getResults(jobs, 'true', 'in progress')]]">
                        <span class$="zuul-job-result label [[_renderJobStatusLabel(jobs)]]">
                          [[_getResults(jobs)]]
                        </span>
                      </template>
                    </td>
                  </tr>
                </template>
              </template>
            </tbody>
          </table>
        </div>
      </div>
    </template>
  </template>
  <script src="zuul-status-view.js"></script>
</dom-module>