<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">

<link rel="import" href="../catalog-element/catalog-element.html">

<dom-module id="cart-item">
  <style>
    :host {
      display: block;
      font-size: 16px;
      padding: 12px 16px;
      @apply(--layout);
      @apply(--layout-horizontal);
      cursor: pointer;
    }

    :host(:hover) iron-icon {
      opacity: 0.85;
    }

    iron-icon:hover {
      opacity: 1.0;
    }

    iron-icon {
      width: 16px !important;
      height: 16px !important;
      cursor: pointer;
      margin: 0 6px;
      opacity: 0.0;
      transition: var(--material-curve-320);
    }
  </style>
  <template>
    <span class="flex">[[element.name]]</span>
    <iron-icon icon="description" view="docs" on-tap="_nav"></iron-icon>
    <iron-icon icon="visibility" view="demo" on-tap="_nav"></iron-icon>
    <iron-icon icon="clear" on-tap="_remove"></iron-icon>
  </template>
</dom-module>

<script>
Polymer({
  is: 'cart-item',
  properties: {
    element: String
  },
  _remove: function() {
    this.fire('remove');
  },
  _nav: function(e) {
    var view = e.currentTarget.getAttribute('view');
    this.fire('nav', {url: '/elements/' + this.element.name + '?view=' + view});
  }
});
</script>