<!--
  Renders a list of code review issues that have trybot runs associated with them.

  Attributes:
    None

  Methods:
    pageSelected(ctx) - Called by the router when the view becomes visible.
          ctx is the context provided in the route dispatch of page.js.

    pageDeselected - Called by the router when the view is no longer visible.

  Events:
    None

  Mailboxes:
    None

-->

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-icons/image-icons.html">

<link rel="import" href="../common/imp/paging.html">

<link rel="import" href="activity-sk.html">
<link rel="import" href="shared-styles.html">

<dom-module id="trybot-page-sk">
  <template>
    <style include="shared-styles">
        .nameHeader,
        .issueHeader,
        .dateTimeHeader,
        .subjectHeader,
        .patchsetHeader {
          font-weight: bold;
        }

        .nameHeader,
        .nameValue {
          width: 8em;
        }

        .dateTimeHeader,
        .dateTimeValue {
          width: 12em;
        }

        .subjectHeader,
        .subjectValue {
          min-width: 15em;
          max-width: 35em;
        }

        .issueHeader,
        .issueValue {
          width: 6em;
        }

        .patchsetHeader,
        .patchsetValue {
          width: 7em;
        }

        .headerContainer {
          padding-top: 2em;
        }

        tr.rowEntry:hover td {background:#DDDDDD}
    </style>

    <activity-sk id="activityTrybot" busy="{{_hideAll}}"></activity-sk>
    <div hidden$="{{_hideAll}}">
      <paging-sk id="trybotPagination" pagination="{{_pagination}}"></paging-sk>
      <table class="headerContainer" hidden$="_">
        <thead>
          <tr>
            <td class="issueHeader">Issue</td>
            <td class="patchsetHeader">Results<br>Up To</td>
            <td class="nameHeader">Owner</td>
            <td class="dateTimeHeader">Updated</td>
            <td class="subjectHeader">Subject</td>
          </tr>
          <template is="dom-repeat" items="{{_trybotEntries}}">
            <tr class="rowEntry">
              <td class="issueValue"><a target="_blank" title="See codereview in a new window" href$="{{item.url}}">{{item.id}}</a></td>
              <td class="patchsetValue">
                <a title$="Results up to Patchset {{item.patchsets.length}}"
                   href$="/search?issue={{item.id}}&unt=true&query={{_queryStr}}&master=false">
                      Patchset <span>{{item.patchsets.length}}</span>
                </a>
              </td>
              <td class="nameValue">{{item.owner}}</td>
              <td class="dateTimeValue">{{_humanDiffDate(item.updated)}}</td>
              <td class="subjectValue">{{item.subject}}</td>
            </tr>
          </template>
        </thead>
      </table>
    </div>
  </template>

  <script>
    Polymer({
      is: "trybot-page-sk",

      behaviors: [gold.PageStateBehavior],

      properties: {
        _pagination: {
          type: Object,
          value: function() { return sk.object.shallowCopy(gold.defaultPagination); }
        }
      },

      ready: function() {
        this.listen(this.$.trybotPagination, 'pagechange', '_stateChanged');
        this._setDefaultState(gold.defaultPaginationState, false);
      },

      pageSelected: function(ctx) {
        this._initState(ctx, this._getDefaultStateWithCorpus());
        this._load();
      },

      pageDeselected: function() {
        // This function is called by the router in gold-app-sk for all top level views.
      },

      _stateChanged: function(ev) {
        // We only need pagination here, because the toggle writes directly to state.
        this._redirectToState(this._pagination);
      },

      // Load the listing.
      _load: function() {
        var q = window.location.search;
        this.$.activityTrybot.startSpinner("Loading ...");
        sk.get("/json/tryjob"+q).then(JSON.parse).then(function (json) {
          this._trybotEntries = json.data;
          this._replaceState(json.pagination);
          this.set('_pagination', json.pagination);
          this.$.activityTrybot.stopSpinner();
        }.bind(this)).catch(function(e) {
          sk.errorMessage(e);
          this.$.activityTrybot.stopSpinner();
        }.bind(this));
      },

      _humanDiffDate: function (timeStampMs) {
        return sk.human.diffDate(timeStampMs);
      }
    });
  </script>
</dom-module>