<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-colors">
	<template>
		<style include="app-grid-style">
		</style>
    <style include="shared-styles">
      :host {
        display: block;
      }
    </style>
		<div class="container">
			<div class="content">
				<div class="actions">
					<iron-image preload fade sizing="contain" class="icon" src="../images/assets/feeds/ic_icons_192px_light.svg" alt="Icons"></iron-image>
				</div>
				<h2 class="title">Colors</h2>
				<p class="description">
					The Material Design color system can be used to create a color theme that reflects your brand or style.
				</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/design/color/the-color-system.html"><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">Color palettes</h2>
				<p class="description">
					These color palettes, originally created by Material Design in 2014, comprises of colors designed to work together harmoniously, and can be used to develop your brand palette. To generate your own harmonious palettes, use either the palette generation tool or Material Theme Editor.
				</p>
			</div>
		</div>
		<iron-ajax auto
			url="data/color_feeds.json"
			id="ajax"
			loading="{{loading}}"
			handle-as="json"
			last-error="{{error}}"
			last-response="{{ajaxResponse}}">
		</iron-ajax>
		<template is="dom-if" if="{{loading}}">
			<div class="actions flex-center-center" hidden$="[[!loading]]">
				<paper-spinner-lite active$="[[loading]]"></paper-spinner-lite>
			</div>
		</template>
		<template is="dom-if" if="{{error}}">
			<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>
		<paper-listbox selected="" attr-for-selected="id" class="listbox" role="listbox">
			<template is="dom-repeat" items="[[ajaxResponse]]">
				<a href="{{item.link}}">
					<paper-icon-item id="{{item.title}}" class$="[[_computeBgClass(item.mode)]]" style="background-color: {{item.color}}">
						<paper-icon-button icon="my-icons:format-color-fill" item-icon slot="item-icon"></paper-icon-button>
						<span class="name">{{item.title}}</span>
						<p id="message"><span class="hex">{{item.color}}</span></p>
						<paper-ripple></paper-ripple>
					</paper-icon-item>
				</a>
			</template>
		</paper-listbox>
	</template>
	<script>
		class MyColors extends Polymer.Element {
			static get is() {
				return 'my-colors';
			}

			_computeBgClass(color) {
				return color + '-bg';
			}

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

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

	</script>
</dom-module>
