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

  <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<dom-module id="xinu-email-unread">
  <style>
    /* TODO(polyup): For speed, consider reworking these styles with .classes
                     and #ids rather than [attributes].
    */
    [layout] {
      @apply(--layout);
    }
    [layout][horizontal] {
      @apply(--layout-horizontal);
    }
  </style>
  <style>
        a {
            color: #000;
            text-decoration: none;
        }

        /*
        .item {
            background: linear-gradient(#fff, #f8f8f8);
            padding: .5em;
        }

        .item:hover {
            background: linear-gradient(#e8e8e8, #eee);
        }
        */
        </style>
  <template>

        <template is="dom-repeat" items="{{boxes}}" as="box">
          <paper-item>
            <a target="_self" href$="{{computeHref(box)}}">
              <div horizontal="" layout="">
                <div flex="">{{box.name}}</div>
                <div end="">{{box.count}}</div>
              </div>
            </a>
          </paper-item>
        </template>
    </template>
  <script>
    Polymer({
      is: 'xinu-email-unread',
      properties: { boxes: { notify: true } },
      computeHref: function (box) {
        return '#' + box.name;
      }
    });
  </script>
</dom-module>
