<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="app-grid-style.html">

<dom-module id="my-home">
	<template>
		<style include="app-grid-style">
		</style>
    <style include="shared-styles">
      :host {
        display: block;
      }
      .element {
				padding: 0;
			}
    </style>
		<div class="container">
			<div class="content">
				<div class="actions">
					<iron-image preload fade sizing="contain" class="icon" src="../images/assets/feeds/Google_Material_Design_Logo.svg" alt="Icons"></iron-image>
				</div>
				<h2 class="title">Material Design</h2>
				<p class="description">
					Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products.
				</p>
				<p>
					<a href="https://github.com/google/"><paper-icon-button src="../images/assets/social/github.svg"></paper-icon-button></a>
					<a href="https://google.github.io/"><paper-icon-button icon="my-icons:code"></paper-icon-button></a>
					<a href="https://www.apache.org/licenses/LICENSE-2.0.html"><paper-icon-button icon="my-icons:copyright"></paper-icon-button></a>
					<a href="https://material.io/"><paper-icon-button icon="my-icons:open-in-new"></paper-icon-button></a>
				</p>
			</div>
		</div>
		<div class="container2">
			<div class="content">
				<h2 class="title">Components</h2>
				<p class="description">
					Library of material designed components.
				</p>
				<iron-ajax auto url="data/home_feeds.json" id="ajax0" loading="{{loading0}}" handle-as="json" last-error="{{error0}}" last-response="{{ajaxResponse0}}">
				</iron-ajax>
				<template is="dom-if" if="{{loading0}}">
					<div class="actions" hidden$="[[!loading0]]">
						<paper-spinner-lite active$="[[loading0]]"></paper-spinner-lite>
					</div>
				</template>
				<template is="dom-if" if="{{error0}}">
					<div class="error">
						<div>Failed to load feeds.</div>
						<div>Make sure you're connected to internet.</div>
						<a href="javascript:location.reload();"><paper-icon-button icon="my-icons:refresh"></paper-icon-button></a>
					</div>
				</template>
				<div class="element">
					<paper-listbox selected="" attr-for-selected="id" class="listbox" role="listbox">
						<template is="dom-repeat" items="[[ajaxResponse0]]">
							<a href="{{item.link}}">
								<paper-icon-item id="{{item.title}}">
									<iron-icon icon="my-icons:{{item.icon}}" item-icon slot="item-icon"></iron-icon>
									<span class="name">{{item.title}}</span>
									<paper-ripple></paper-ripple>
								</paper-icon-item>
							</a>
						</template>
					</paper-listbox>
				</div>
			</div>
		</div>
	</template>
	<script>
		class MyHome extends Polymer.Element {
			static get is() {
				return 'my-home';
			}

			static get properties() {
				return {};
			}
		}

		window.customElements.define(MyHome.is, MyHome);

	</script>
</dom-module>
