post-card.back

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

<polymer-element name="post-card" attributes="post">
  <template>
    <style>
    :host {
      display: block;
      position: relative;
      background-color: white;
      padding: 20px;
      max-width: 450px;
      min-width: 300px;
    }
    .card-header {
      margin-bottom: 10px;
    }
    h2, h3 {
      font-weight: 300;
    }
    h2 {
      margin: 0;
      font-size: 1.8rem;
    }
    h3 {
      font-size: 1.2rem;
    }
    .timestamp {
      font-size: 12px;
      color: #BBB;
    }
    .card-header img {
      width: 70px;
      border-radius: 50%;
      margin: 10px;
    }
    core-icon-button {
      position: absolute;
      top: 3px;
      right: 3px;
    }
    </style>
    <div class="container">
      <div class="card-header" layout horizontal center>
        <img src="{{post.thumbnail}}"/>
        <div>
          <h2>{{post.by}}</h2>
          <span class="timestamp">6 minutes ago</span>
        </div>
        <core-icon-button
          icon="favorite"
          data-uid="{{post.uid}}"
          on-tap="{{favoriteTapped}}">
        </core-icon-button>
      </div>
      <div class="card-content">
        <h3>{{post.title}}</h3>
      </div>
    </div>
  </template>
  <script>
  Polymer('post-card', {
    favoriteTapped: function(event, detail, sender) {
      var uid = sender.getAttribute('data-uid');
      this.fire('favorite-tap', {uid: uid});
    }
  });
  </script>
</polymer-element>