<!--
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.
-->

<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="ct-results-by-builder.html">
<link rel="import" href="ct-embedded-flakiness-dashboard.html">

<polymer-element name="ct-results-panel" attributes="failures tree">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      paper-item.core-selected {
        font-weight: bold;
      }

      .message {
        margin: 20px;
        text-align: center;
      }

      core-menu {
        box-shadow: 0 3px 3px #ccc;
        flex: none;
        /* Override /deep/ selector in core-menu.css. */
        margin: 0 !important;
        max-height: 20%;
        overflow: auto;
        /* So the box-shadow goes on top of the results. */
        z-index: 1;
      }

      .results {
        flex: 1;
        overflow: auto;
        /* Stay below the box shadow of the core-menu. */
        padding-top: 6px;
      }
    </style>
    <template if="{{ !failures.length }}">
      <div class="message">No results to display.</div>
    </template>
    <template if="{{ failures.length }}">
      <core-menu selected="{{ selected }}">
        <template repeat="{{ failure in failures }}">
          <template if="{{ failure.testName }}">
            <paper-item label="{{ failure.testName }}"></paper-item>
          </template>
        </template>
      </core-menu>
      <div class="results">
        <template if="{{ failures[selected].testName }}">
          <ct-embedded-flakiness-dashboard test="{{ failures[selected] }}" tree="{{ tree }}"></ct-embedded-flakiness-dashboard>
        </template>
        <ct-results-by-builder failure="{{ failures[selected] }}"></ct-results-by-builder>
      </div>
    </template>
  </template>
  <script>
    Polymer({
      failures: [],
      selected: 0,
      tree: '',

      failuresChanged: function() {
        this.selected = 0;
      },
    });
  </script>
</polymer-element>