<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at polymer.github.io/PATENTS.txt –>

<link rel=“import” href=“../bower_components/polymer/polymer.html”> <link rel=“import” href=“../bower_components/paper-fab/paper-fab.html”> <link rel=“import” href=“app-icons.html”>

<dom-module id=“article-detail”>

<template>

  <style>

    :host {
      display: block;
    }

    .image {
      height: 240px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }

    .header {
      position: relative;
      padding: 24px 0;
      text-align: center;
      font-size: 14px;
      letter-spacing: 1px;
      color: #999;
    }

    .title {
      padding: 16px 0;
      font-size: 30px;
      font-weight: 600;
    }

    paper-fab {
      position: absolute;
      top: -28px;;
      right: 40px;
      background-color: var(--app-primary-color);
    }

    .main {
      padding: 24px 80px;
      border-top: 1px solid #ddd;
      font-size: 18px;
      line-height: 32px;
      letter-spacing: 1px;
    }

    h3 {
      font-size: 24px;
      font-weight: 400;
      line-height: 32px;
    }

    /* narrow layout */
    @media (max-width: 808px) {

      .main {
        padding: 24px;
      }

      /* position fab to the bottom right corner of the screen */
      paper-fab {
        position: fixed;
        top: auto;
        right: 24px;
        bottom: 24px;
      }

    }

  </style>

  <div class="image" style$="background-color: {{article.primaryColor}}; background-image: url('{{article.image}}')"></div>

  <div class="header">
    <div>{{article.author}}</div>
    <div class="title" style$="color: {{article.secondaryColor}};">{{article.title}}</div>
    <div>{{article.date}}</div>
    <paper-fab icon="app:googleplus-reshare"></paper-fab>
  </div>

  <section class="main">
    <h3>{{article.desc}}</h3>
    <p>{{article.content}}</p>
  </section>

</template>

<script>

  Polymer({

    is: 'article-detail',

    properties: {

      article: Object

    }

  });

</script>

</dom-module>