<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../post-service/post-service.html">
<link rel="import" href="post-card.html">

<polymer-element name="post-list" attributes="show">
  <template>
    <style>
    :host {
      display: block;
      width: 100%;
    }
    post-card {
      margin-bottom: 30px;
    }
    </style>

    <!-- add markup here -->
    <post-service id="service" posts="{{posts}}">
    </post-service>

    <div layout vertical center>

      <template repeat="{{post in posts}}">
        <post-card>
          <img src="{{post.avatar}}" width="70" height="70">
          <h2>{{post.username}}</h2>
          <p>{{post.text}}</p>
        </post-card>
      </template>

    </div>

  </template>

  <script>
  Polymer({
    // define the element's JavaScript prototype here
  });
  </script>

</polymer-element>
