<!--
Copyright 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<script src="../bower_components/sugar/release/sugar-full.development.js"></script>
<script src="../scripts/results.js"></script>

<link rel="import" href="../bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="ct-results-panel.html">
<link rel="import" href="ct-unexpected-failures.html">

<polymer-element name="ct-sheriff-o-matic">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      header {
        -webkit-user-select: none;
        align-items: center;
        background-color: #212121;
        color: white;
        cursor: default;
        display: flex;
        justify-content: space-between;
        font-size: 1.1em;
        padding: 0 5px;
      }
      header a, header span {
        color: white;
        display: inline-block;
        padding: 0.25em 4px;
        text-decoration: none;
      }
      #right-toolbar {
        display: flex;
        align-items: center;
      }
      ct-last-updated {
        margin: 0 5px;
      }
      core-animated-pages {
        flex: 1;
      }
    </style>

    <header>
      <div>
        <template if="{{ selected == 0 }}">
          <img src="../favicon.ico"> <span>Sheriff-o-matic</span>
        </template>
        <template if="{{ selected == 1 }}">
          <a on-click="{{ onBack }}">
            &lt;&lt; Go back
          </a>
        </template>
      </div>
      <div id="right-toolbar">
        <ct-last-updated date="{{ lastUpdateDate }}"></ct-last-updated>
        <!-- FIXME: Use a proper polymer component with data binding. -->
        <select id="tree" on-change="{{ _updateTree }}">
          <option value="blink">Blink</option>
          <option value="chromium">Chromium</option>
        </select>
      </div>
    </header>

    <core-animated-pages selected="{{ selected }}" transitions="slide-from-right">
      <ct-unexpected-failures tree="{{ tree }}" lastUpdateDate="{{ lastUpdateDate }}" on-ct-examine-failures="{{ onExamine }}"></ct-unexpected-failures>
      <ct-results-panel failures="{{ currentFailures }}" tree="{{ tree }}"></ct-results-panel>
    </core-animated-pages>
  </template>
  <script>
    Polymer({
      // FIXME: Make chromium the default.
      // That requires updating the select to the right value.
      tree: 'blink',
      selected: 0,
      currentFailures: [],

      _updateTree: function() {
        this.tree = this.$.tree.selectedOptions[0].value;
      },

      onBack: function() {
        this.selected = 0;
      },

      onExamine: function(event) {
        this.currentFailures = event.detail.failures;
        this.selected = 1;
      },
    });
  </script>
</polymer-element>
