<!– @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/iron-flex-layout/iron-flex-layout.html”> <link rel=“import” href=“../bower_components/iron-icon/iron-icon.html”>

<link rel=“import” href=“../bower_components/paper-card/paper-card.html”> <link rel=“import” href=“../bower_components/paper-fab/paper-fab.html”> <link rel=“import” href=“../bower_components/paper-listbox/paper-listbox.html”> <link rel=“import” href=“../bower_components/paper-icon-button/paper-icon-button.html”> <link rel=“import” href=“../bower_components/paper-item/paper-icon-item.html”> <link rel=“import” href=“../bower_components/paper-menu-button/paper-menu-button.html”>

<link rel=“import” href=“../bower_components/app-layout/app-header-layout/app-header-layout.html”> <link rel=“import” href=“../bower_components/app-layout/app-header/app-header.html”> <link rel=“import” href=“../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html”> <link rel=“import” href=“../bower_components/app-layout/app-toolbar/app-toolbar.html”>

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

<template>

  <style>

  :host {
    display: block;
    background-attachment: fixed;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  #header {
    color: white;

    --app-header-background-rear-layer: {
      background-color: #00AA8D;
    };
  }

  paper-icon-button {
    color: white;
    --paper-icon-button-ink-color: white;
  }

  .card-container {
    position: relative;
    width: 720px;
    margin: 300px auto 40px;
  }

  paper-fab {
    position: absolute;
    top: -28px;
    right: 40px;

    --paper-fab-background: #EF5458;
    --paper-fab-keyboard-focus-background: #DF4448;
  }

  paper-card {
    padding: 16px 0 16px 100px;
    width: 100%;
    sizing: border-box;
  }

  paper-card p {
    margin: 12px 0;
    color: #999;
  }

  h4 {
    margin: 60px 0 12px;
  }

  .ingredient-item {
    margin: 20px 0;
    @apply(--layout-horizontal);
  }

  .ingredient-amount {
    margin-left: -80px;
    width: 60px;
    padding-right: 20px;
    color: rgb(33, 169, 143);
    text-align: right;
  }

  .ingredient-name {
    @apply(--layout-flex);
  }

  @media (max-width: 720px) {

    .card-container {
      width: 100%;
      margin: 150px 0 0;
    }

  }

  </style>

  <!-- main panel -->
  <app-header-layout>

    <app-header id="header" effects="waterfall fade-background" reveals>

      <!-- top toolbar -->
      <app-toolbar>
        <!-- back button -->
        <a href="#/home" tabindex="-1">
          <paper-icon-button icon="app:arrow-back"></paper-icon-button>
        </a>

        <div main-title></div>

        <paper-menu-button horizontal-align="right">
          <paper-icon-button icon="app:more-vert" class="dropdown-trigger" alt="menu"></paper-icon-button>
          <paper-listbox class="dropdown-content">
            <paper-icon-item>
              <iron-icon icon="app:share" item-icon></iron-icon>
              Tweet recipe
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="app:email" item-icon></iron-icon>
              Email recipe
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="app:textsms" item-icon></iron-icon>
              Message recipe
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="app:group" item-icon></iron-icon>
              Share on Facebook
            </paper-icon-item>
          </paper-listbox>
        </paper-menu-button>
      </app-toolbar>

    </app-header>

    <div class="card-container">

      <paper-card heading="{{recipe.name}}">
        <div class="card-content">

          <p>{{recipe.description}}</p>

          <h4>Ingredients</h4>

          <template is="dom-repeat" items="{{recipe.ingredients}}">
            <div class="ingredient-item">
              <div class="ingredient-amount">{{item.amount}}</div>
              <div class="ingredient-name">{{item.description}}</div>
            </div>
          </template>

          <h4>Steps</h4>

          <template is="dom-repeat" items="{{recipe.steps}}">
            <div class="ingredient-item">
              <div class="ingredient-amount">{{item.duration}}</div>
              <div class="ingredient-name">{{item.description}}</div>
            </div>
          </template>

        </div>
      </paper-card>

      <paper-fab icon="{{__computeFavIcon(__favorite)}}" on-tap="__toggleFavorite"></paper-fab>
    </div>

  </app-header-layout>

</template>

<script>

Polymer({

  is: 'recipe-detail',

  properties: {

    recipe: {
      type: Object,
      observer: '__recipeChanged'
    },

    __favorite: {
      type: Boolean,
      value: false
    }

  },

  __recipeChanged: function(recipe) {
    if (recipe) {
      this.style.backgroundImage = 'url(' + recipe.imageUrl + ')';
    }
  },

  __toggleFavorite: function(event, detail) {
    this.__favorite = !this.__favorite;
  },

  __computeFavIcon: function(favorite) {
    return favorite ? 'app:favorite' : 'app:favorite-border';
  }

});

</script>

</dom-module>