<!– @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=“../../../polymer/polymer.html”> <link rel=“import” href=“../../../iron-icons/iron-icons.html”> <link rel=“import” href=“../../../iron-icon/iron-icon.html”> <link rel=“import” href=“../../../iron-flex-layout/iron-flex-layout.html”> <link rel=“import” href=“../../../paper-icon-button/paper-icon-button.html”> <link rel=“import” href=“../../../paper-item/paper-item.html”> <link rel=“import” href=“../../../paper-item/paper-item-body.html”> <link rel=“import” href=“../../../paper-styles/color.html”> <link rel=“import” href=“../../neon-animatable-behavior.html”>

<dom-module id=“list-view”>

<template>
  <style>
    :host {
      @apply(--layout-vertical);
    }

    .main {
      @apply(--layout-flex);
      @apply(--layout-scroll);
    }

    iron-icon {
      color: var(--google-grey-500);
    }
  </style>
  <paper-toolbar class="medium-tall">
    <paper-icon-button id="button" icon="arrow-back"></paper-icon-button>
  </paper-toolbar>

  <div class="main">

      <template is="dom-repeat" items="[[data]]">

        <paper-item>
          <paper-item-body two-line>
            <div>[[item.fileName]]</div>
            <div secondary>[[item.modifiedDate]]</div>
          </paper-item-body>
          <iron-icon icon="info"></iron-icon>
        </paper-item>

      </template>

  </div>

</template>

</dom-module>

<script>

Polymer({

  is: 'list-view',

  behaviors: [
    Polymer.NeonAnimatableBehavior
  ],

  listeners: {
    'click': '_onClick'
  },

  properties: {

    data: {
      type: Array,
      value: function() {
        return [];
      }
    },

    animationConfig: {
      type: Object,
      value: function() {
        return {
          'entry': [{
            name: 'fade-in-animation',
            node: this.$.button
          }],

          'exit': [{
            name: 'fade-out-animation',
            node: this.$.button
          }, {
            name: 'hero-animation',
            id: 'hero',
            fromPage: this
          }]
        };
      }
    }

  },

  _onClick: function(event) {
    var target = event.target;
    while (target !== this && !target._templateInstance) {
      target = target.parentNode;
    }

    // configure the page animation
    this.sharedElements = {
      'hero': target,
    };

    this.fire('item-click', {
      item: target,
    });
  }

});

</script>