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

    <leasing-list-sk>

  This is the side navigation menu for the Skia Fuzzer

  To use this file import it:

    <link href="leasing-list-sk.html" rel="import" />

  Usage:

    <leasing-list-sk></leasing-list-sk>

  Attributes:
    tasks - An array of leasing tasks that should be displayed in this element.

  Events:
    None

  Methods:
    displayCurrentTime - Returns the current UTC time.
-->

<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="/res/common/imp/app-sk.html" />
<link rel="import" href="leasing-menu-sk.html" />
<link rel="import" href="leasing-shared-styles.html" />
<link rel="import" href="leasing-task-sk.html" />

<dom-module id="leasing-list-sk">
  <template>
    <style include="iron-positioning leasing-app-style">
      .current-time {
        padding-right: 3em;
      }
    </style>

   <app-sk class="fit" header_height="60px">
      <span header class="title">Leasing Server for Swarming Bots</span>
      <span rtoolbar class="current-time">Current time: [[ displayCurrentTime() ]]</span>
      <leasing-menu-sk navigation></leasing-menu-sk>
      <br/><br/>
      <template is="dom-repeat" items="{{tasks}}">
        <leasing-task-sk task="[[item]]"></leasing-task-sk>
        <br/>
      </template>
    </app-sk>

  </template>
  <script>
  Polymer({
    is: "leasing-list-sk",
    properties: {
      tasks: {
        type: Array,
        value: [],
      }
    },

    displayCurrentTime: function() {
      var d = new Date();
      return d.toUTCString();
    },
  });
  </script>
</dom-module>