<!– @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-fab/paper-fab.html”> <link rel=“import” href=“../bower_components/paper-icon-button/paper-icon-button.html”> <link rel=“import” href=“../bower_components/paper-styles/shadow.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-scroll-effects/app-scroll-effects.html”> <link rel=“import” href=“../bower_components/app-layout/app-header/app-header.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-toolbar/app-toolbar.html”> <link rel=“import” href=“../bower_components/app-layout/app-scrollpos-control/app-scrollpos-control.html”>

<link rel=“import” href=“article-headline.html”> <link rel=“import” href=“article-detail.html”> <link rel=“import” href=“two-columns-grid.html”>

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

<template>

  <style>

    :host {
      --app-primary-color: #404040;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    app-drawer {
      --app-drawer-content-container: {
        background-color: var(--app-primary-color);
        overflow-x: hidden;
      };
    }

    app-drawer app-header {
      background-color: var(--app-primary-color);
    }

    .nav-menu {
      background-color: var(--app-primary-color);
      color: #fff;
    }

    a {
      text-decoration: none;
      color: inherit;
      font-size: inherit;
    }

    .nav-menu > a {
      display: block;
      padding: 12px 16px;
      font-size: 20px;
      font-weight: 500;
    }

    .nav-menu > a.iron-selected {
      background-color: #888;
    }

    .main-header {
      border-bottom: 1px solid #ddd;
      background-color: #fff;
      color: #444;
    }

    .title-toolbar {
      @apply(--layout-center-center);
      box-sizing: border-box;
    }

    .nav-title-toolbar {
      color: #fff;
      width: 100vw;
    }

    .main-title-toolbar {
      width: 100%;
    }

    .title {
      padding-bottom: 40px;
      font-size: 60px;
      font-weight: 800;
    }

    .category-page {
      min-height: 100vh;
    }

    [is=article-headline] {
      @apply(--shadow-transition);
      @apply(--shadow-elevation-2dp);
      cursor: pointer;
    }

    article-detail {
      max-width: 736px;
      margin: 64px auto;
      background-color: #fff;
      @apply(--shadow-elevation-2dp);
    }

    @media (max-width: 580px) {

      /* make title smaller to fit on screen */
      .title {
        font-size: 40px;
        padding-bottom: 16px;
      }

    }

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

      article-detail {
        max-width: none;
        margin: 0;
      }

    }

  </style>

  <!-- setup routes -->
  <app-location route="{{route}}" use-hash-as-path></app-location>
  <app-route
      route="{{route}}"
      pattern="/:category"
      data="{{categoryData}}"
      tail="{{subRoute}}"></app-route>
  <app-route
      route="{{subRoute}}"
      pattern="/:page"
      data="{{pageData}}"
      tail="{{subsubRoute}}"></app-route>
  <app-route
      route="{{subsubRoute}}"
      pattern="/:id"
      data="{{idData}}"></app-route>

  <!-- manages page's scroll position -->
  <app-scrollpos-control
      selected="[[categoryData.category]]/[[pageData.page]]"
      reset="[[_equal(pageData.page, 'detail')]]"></app-scrollpos-control>

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

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

        <app-header fixed>

          <!-- top toolbar -->
          <app-toolbar></app-toolbar>

          <!-- bottom toolbar -->
          <app-toolbar class="title-toolbar nav-title-toolbar">
            <div class="title">ZUPERK&Uuml;LBLOG</div>
          </app-toolbar>

        </app-header>

        <!-- nav menu -->
        <iron-selector
            class="nav-menu"
            selected="[[categoryData.category]]"
            attr-for-selected="name"
            on-iron-activate="_drawerSelected">
          <template is="dom-repeat" items="[[articles]]">
            <a name="[[item.name]]" href="#/[[item.name]]/list">{{item.title}}</a>
          </template>
        </iron-selector>

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

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

      <app-header fixed effects="waterfall" class="main-header">

        <!-- top toolbar -->
        <app-toolbar>
          <!-- menu button -->
          <paper-icon-button
              drawer-toggle
              icon="app:menu"
              hidden$="[[_equal(pageData.page, 'detail')]]"></paper-icon-button>

          <!-- back button -->
          <a
              href="#/[[categoryData.category]]/list"
              hidden$="[[_equal(pageData.page, 'list')]]">
            <paper-icon-button icon="app:arrow-back"></paper-icon-button>
          </a>
        </app-toolbar>

        <!-- bottom toolbar -->
        <app-toolbar class="title-toolbar main-title-toolbar">
          <div class="title">ZUPERK&Uuml;LBLOG</div>
        </app-toolbar>

      </app-header>

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

        <!-- list page -->
        <iron-pages name="list" selected="[[categoryData.category]]" attr-for-selected="name">

          <template is="dom-repeat" items="[[articles]]" as="category">
            <!-- category page (lazy-loaded) -->
            <template is="dom-if" if="[[_equal(category, [[categoryData.category.name]])]]">
              <section class="category-page" name="[[category.name]]">

                <!-- 2-columns grid -->
                <two-columns-grid column-width="396" gutter="4">
                  <template is="dom-repeat" items="[[category.items]]" as="article">
                    <a
                        is="article-headline"
                        href="#/[[category.name]]/detail/[[article.id]]"
                        article="[[article]]"></a>
                  </template>
                </two-columns-grid>

              </section>
            </template>
          </template>

        </iron-pages>

        <!-- detail page (lazy-loaded) -->
        <template is="dom-if" if="[[_equal(pageData.page, 'detail')]]">
          <article-detail name="detail" article="[[article]]"></article-detail>
        </template>

      </iron-pages>

    </app-header-layout>

  </app-drawer-layout>

</template>

<script>

  Polymer({

    is: 'blog-app',

    properties: {

      /**
       * Articles data.
       */
      articles: Object,

      route: Object,

      subRoute: Object,

      subsubRoute: Object,

      categoryData: Object,

      pageData: Object,

      idData: Object

    },

    observers: [
      '_updateArticle(articles, categoryData.category, idData.id)'
    ],

    attached: function() {
      this.async(function() {
        if (!this.route.path) {
          this.set('route.path', '/art/list');
        }
      });
    },

    _equal: function(value1, value2) {
      return value1 === value2;
    },

    _updateArticle: function(articles, category, id) {
      for (var i=0, cat; cat=articles[i]; i++) {
        if (cat.name === category) {
          for (var j=0, article; article=cat.items[j]; j++) {
            if (article.id === id) {
              this.article = article;
              return;
            }
          }
        }
      }
    },

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

  });

</script>

</dom-module>