<!– @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/app-route/app-location.html”> <link rel=“import” href=“../bower_components/app-route/app-route.html”>

<link rel=“import” href=“../bower_components/iron-flex-layout/iron-flex-layout.html”> <link rel=“import” href=“../bower_components/iron-pages/iron-pages.html”> <link rel=“import” href=“../bower_components/iron-selector/iron-selector.html”>

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

<link rel=“import” href=“../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html”> <link rel=“import” href=“../bower_components/app-layout/app-drawer/app-drawer.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-toolbar/app-toolbar.html”> <link rel=“import” href=“../bower_components/app-layout/app-scrollpos-control/app-scrollpos-control.html”>

<link rel=“import” href=“recipe-detail.html”> <link rel=“import” href=“recipe-list.html”> <link rel=“import” href=“app-icons.html”>

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

<template>

  <style>
  .avatar-container {
    position: relative;
    border: 2px solid #00AA8D;
    border-radius: 50%;
    height: 90px;
    padding: 2px;
    width: 90px;
    margin: 20px auto;
  }

  .avatar-container .image {
    background-image: url('//app-layout-assets.appspot.com/assets/pesto/avatar.jpg');
    background-size: contain;
    border-radius: 50%;
    height: 100%;
    width: 100%;
  }

  .contact-info {
    margin: 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #CCC;
    text-align: center;
  }

  .contact-info .name {
    font-weight: bold;
  }

  .contact-info .email {
    color: #999;
  }

  paper-item {
    @apply(--layout-center-center);
    height: 54px;
  }

  paper-icon-button {
    --paper-icon-button-ink-color: white;
  }
  </style>

  <app-location route="{{_route}}" use-hash-as-path></app-location>
  <app-route
      route="{{_route}}"
      pattern="/:page"
      data="{{_pageData}}"
      tail="{{_subRoute}}"></app-route>
  <app-route
      route="{{_subRoute}}"
      pattern="/:id"
      data="{{_idData}}"></app-route>

  <app-drawer-layout responsive-width="1280px">

    <!-- nav panel -->
    <app-drawer id="drawer" swipe-open>
      <app-header-layout has-scrolling-region>

        <app-header fixed>
          <div class="avatar-container">
            <div class="image"></div>
          </div>
          <div class="contact-info">
            <div class="name">Jonathan</div>
            <div class="email">heyfromjonathan@gmail.com</div>
          </div>
        </app-header>

        <!-- nav menu -->
        <paper-listbox
            selected="{{_pageData.page}}"
            attr-for-selected="name"
            on-iron-activate="_drawerSelected">
          <paper-item name="home">Home</paper-item>
          <paper-item name="favorites">Favorites</paper-item>
          <paper-item name="saved">Saved</paper-item>
          <paper-item name="trending">Trending</paper-item>
        </paper-listbox>

      </app-header-layout>
    </app-drawer>

    <app-scrollpos-control
        selected="[[_pageData.page]]"
        reset="[[_isDetailPage(_pageData.page)]]"></app-scrollpos-control>

    <!-- list/detail pages -->
    <iron-pages selected="[[_pageData.page]]" attr-for-selected="name">

      <recipe-list name="home" recipes="[[recipes]]">
        <paper-icon-button icon="app:menu" drawer-toggle></paper-icon-button>
      </recipe-list>

      <recipe-list name="favorites">
        <paper-icon-button icon="app:menu" drawer-toggle></paper-icon-button>
      </recipe-list>

      <recipe-list name="saved">
        <paper-icon-button icon="app:menu" drawer-toggle></paper-icon-button>
      </recipe-list>

      <recipe-list name="trending">
        <paper-icon-button icon="app:menu" drawer-toggle></paper-icon-button>
      </recipe-list>

      <recipe-detail
          id="detailView"
          name="detail"
          recipe="[[_getRecipe(recipes, _idData.id)]]"></recipe-detail>

    </iron-pages>

  </app-drawer-layout>

</template>

<script>

Polymer({

  is: 'recipe-app',

  properties: {

    recipes: Object,

    _route: Object,

    _subRoute: Object,

    _pageData: Object,

    _idData: Object

  },

  attached: function() {
    this.async(function() {
      if (!this._route.path) {
        this.set('_route.path', '/home');
      }
    });
  },

  _isDetailPage: function(page) {
    return page === 'detail';
  },

  _getRecipe: function() {
    if (this.recipes && this._idData.id) {
      for (var i = 0; i < this.recipes.length; ++i) {
        var r = this.recipes[i];
        if (r.id === this._idData.id) {
          return r;
        }
      }
    }
    return null;
  },

  _drawerSelected: function() {
    if (!this.$.drawer.persistent) this.$.drawer.close();
  }

});

</script>

</dom-module>