<!-- The <diff-page-sk> custom element declaration.

  A container element to display difference between two digests within the same test.

  Attributes:
    None

  Methods:
    pageSelected: This function has to be called if the page is selected by the router.
    pageDeselected: This function has to be called if the page is deselected by the router.

  Events:
    None

  Mailboxes:
    None
-->

<link rel="import" href="bower_components/polymer/polymer.html">

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

<dom-module id="diff-page-sk">
  <template>
    <style include="shared-styles" clas>
      .diffContainer {
        margin: 2em 0 0 2em;
      }
    </style>
    <div class="diffContainer">
      <digest-details-sk
              mode="diff"
              details="{{data.left}}"
              right="{{data.right}}"
              metric="combined">
      </digest-details-sk>
    </div>
    <zoom-dialog-sk></zoom-dialog-sk>
  </template>
  <script>
    Polymer({
      is: "diff-page-sk",

      behaviors: [gold.ZoomTargetBehavior],

      properties: {
        data: {
          type: Object,
          notify: true
        }
      },

      ready: function() {
        this.listen(this, 'triage', '_handleTriage');
      },

      // Called when the page is selected into view.
      pageSelected: function(routeName) {
        var q = window.location.search;
        sk.get("/json/diff" + q).then(JSON.parse).then(function (json) {
          this.set('data', json);
        }.bind(this)).catch(sk.errorMessage);
      },

      // Called when the page is no long viewed.
      pageDeselected: function() {},

      _handleTriage: function(ev) {
        ev.stopPropagation();
        sk.post('/json/triage', JSON.stringify(ev.detail)).catch(sk.errorMessage);
      }

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