<!--
  This in an HTML Import-able file that contains the definition
  of the following elements:

    <task-scheduler-status-sk>

  Status information about the task scheduler.

  To use this file import it:

    <link href="/res/imp/task-scheduler-status-sk.html" rel="import" />

  Usage:

    <task-scheduler-status-sk></task-scheduler-status-sk>

  Properties:
    // input
    last_scheduled: String, Time of the last task scheduling
    top_candidates: Array of Objects indicating the next candidates for scheduling:
        commit: String, commit hash
        taskSpec: String, task spec name
        score: Number, score of the task candidate

  Methods:
    None.

  Events:
    None.
-->

<link rel="import" href="/res/common/imp/human-date-sk.html">

<dom-module id="task-scheduler-status-sk">
  <template>
    <style>
    :host {
      font-family: sans-serif;
    }
    .table {
      border-collapse: collapse;
      display: table;
    }
    .tr {
      border-bottom: 1px solid #EEEEEE;
      display: table-row;
    }
    .tr:hover {
      background-color: #F5F5F5;
    }
    .tr:hover .tr:hover {
      background-color: #FFFFFF;
    }
    .td,.th {
      display: table-cell;
      padding: 10px;
    }
    .td {
      color: #212121;
      font-size: 0.813em;
    }
    .th {
      color: #767676;
      font-size: 0.75em;
    }
    </style>
    <div class="table">
      <div class="tr">
        <div class="td">Last Scheduled</div>
        <div class="td">
          <human-date-sk date="[[last_scheduled]]" diff></human-date-sk> ago
        </div>
      </div>
      <div class="tr">
        <div class="td">Top Candidates</div>
        <div class="td">
          <div class="table">
            <div class="tr">
              <div class="th">TaskSpec</div>
              <div class="th">Commit</div>
              <div class="th">Score</div>
            </div>
            <template is="dom-repeat" items="{{top_candidates}}">
              <div class="tr">
                <div class="td">{{item.taskSpec}}</div>
                <div class="td">{{item.commit}}</div>
                <div class="td">{{item.score}}</div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  (function(){
    Polymer({
      is: "task-scheduler-status-sk",

      properties: {
        last_scheduled: {
          type: String,
        },
        top_candidates: {
          type: Array,
        },
      },
    });
  })();
  </script>
</dom-module>