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

<polymer-element name="xinu-email-unread" attributes="boxes" noscript>
    <template>
        <style>
        a {
            color: #000;
            text-decoration: none;
        }

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

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

        <template repeat="{{box in boxes}}">
          <paper-item>
            <a href="#{{box.name}}" target="_self">
              <div horizontal layout>
                <div flex>{{box.name}}</div>
                <div end>{{box.count}}</div>
              </div>
            </a>
          </paper-item>
        </template>
    </template>
</polymer-element>
