  <!-- The <test-summary-sk> custom element declaration.

    Displays a summary for the given test.

    Attributes:
      summary - A object that gives a summary of a test. Should look like:

           {
             "name": "01-original",
             "diameter": 123242,
             "untriaged": 2,
             "num": 2,
             "untHashes": ["ababab...", "2b2b2b2...", ...],
           }

      search - The url-encoded search string to query the test described by summary
               against the backend.

      clusterSearch - The url-encoded search string to query for the test in the
               cluster view.

    Events:
      None

    Methods:
      None
  -->

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="shared-styles.html">

<dom-module id="test-summary-sk">
  <template>
    <style include="shared-styles"></style>
    <style include="iron-flex iron-flex-alignment">
        .colEntry {
          width: 25em;
          float: left;
          overflow-wrap: break-word;
          margin-left: .6em;
        }

        .colEntry.short {
          width: 6em;
          text-align: left;
        }

        .row {
          margin-top: .3em;
        }

        .blameColumn {
          margin-left: .6em;
        }
    </style>
    <div class="vertical layout">
      <div class="horizontal layout row">
        <span class="colEntry">
          <b>
            <a href$="{{_searchHref(search)}}">
              <span>{{summary.name}}</span>
            </a>
          </b>
        </span>
        <span class="colEntry short">
          <a href$="{{_cmpHref(search)}}">
            <iron-icon icon="apps"></iron-icon>
          </a>
        </span>
        <span class="colEntry short">
          <a href$="{{_clusterHref(clusterSearch)}}">
            <iron-icon icon="radio-button-unchecked"></iron-icon>
          </a>
        </span>
        <span class="colEntry short">{{summary.pos}}</span>
        <span class="colEntry short">{{summary.neg}}</span>
        <span class="colEntry short">{{summary.untriaged}}</span>
        <span class="colEntry short">{{summary.num}}</span>
        <div class="blameColumn vertical layout">
          <template is="dom-repeat" items="{{summary.blame}}" as="b">
            <div>{{formatPercent(b.prob)}}% - {{b.author}}</div>
          </template>
        </div>
      </div>
    </div>
  </template>
  <script>
    Polymer({
      is: 'test-summary-sk',

      properties: {
        "summary": {
          type: Object,
          observer: "_summaryChanged"
        },
        "search": {
          type: String,
        }
      },

      _summaryChanged: function() {
        if (!this.summary) {
          return;
        }

        this.dataset.name = this.summary.name;
        this.dataset.pos = this.summary.pos;
        this.dataset.neg = this.summary.neg;
        this.dataset.untriaged = this.summary.untriaged;
        this.dataset.num  = this.summary.num;
      },

      formatPercent: function (prob) {
        return (prob * 100).toFixed(1);
      },

      _searchHref: function(search) {
        return '/search?' + search;
      },

      _cmpHref: function(search) {
        return '/cmp?' + search
      },

      _clusterHref: function(search) {
        return '/cluster?' + search;
      }

    });
  </script>
</dom-module>