<html>
<head>
  <title>detail-list-sk demo</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <script src="bower_components/d3/d3.js"></script>
  <script src="../common/js/common.js"></script>
  <script src="../js/gold.js"></script>
  <script src="testdata.js"></script>

  <link rel="import" href="bower_components/polymer/polymer.html">
  <link rel="import" href="commits-dialog-sk.html">
  <link rel="import" href="digest-details-sk.html">
  <link rel="import" href="detail-list-sk.html">

</head>
<body>
  <h1>detail-list-sk demo</h1>

  <dom-module id="main-document-element">
    <style type="text/css" media="screen">
      digest-details-sk {
        display: block;
        box-shadow: 3px 3px 6px 1px rgba(133,133,133,1);
        margin-top: 1em;
        margin-bottom: 1em;
        margin-left: 0;
        margin-right: 0;
        padding-left: 1em;
        padding-top: 1em;
        padding-bottom: 1em;
        padding-right: 0;
      }

      digest-details-sk[data-focus] {
        box-shadow: 3px 3px 6px 5px #FF7F00;
      }
    </style>
    <template>
      <div>
        <detail-list-sk id="list">
          <template is="dom-repeat" items="[[data.digests]]">
            <digest-details-sk
              id$="[[_entryId(item)]]"
              mode="list"
              triage
              details="[[item]]"
              commits="[[data.commits]]"
              issue="[[data.issue.id]]">
            </digest-details-sk>
          </template>
        </detail-list-sk>
      </div>
      <commits-dialog-sk></commits-dialog-sk>

      Event: {{eventData}}
    </template>

    <script>
      HTMLImports.whenReady(function () {
        Polymer({
          is: 'main-document-element',

          ready: function() {
            this.data = {
              digests: testdata.newSearchDetails,
              commits: testdata.commits,
              issue: null,
              offset: 0,
              size: testdata.newSearchDetails.length,
            }
            this.$.list.startUse();
          },

          _handler: function(e) {
            console.log("Received event: " + e.type);
            this.eventData = e.type + " :: " + JSON.stringify(e.detail);
            e.stopPropagation();
          },

          _entryId: function(item) {
            // Make sure it's a valid selector.
            return (item.test + '_' + item.digest).replace(/[^_A-Za-z0-9]/g, '_');
          },
        });
      });
    </script>
  </dom-module>

  <!-- Instantite the element defined above -->
  <main-document-element></main-document-element>

</body>
</html>