<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/iron-icons/notification-icons.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-notificationicons">
	<template>
    <style include="shared-styles">
      :host {
				display: block;
      }
      .container2 {
				@apply --layout-horizontal;
				@apply --layout-wrap;
      }
      .set {
				@apply --layout-vertical;
				@apply --layout-center-center;
				flex: 1;
        padding: 16px;
      }
			.set div {
				@apply --layout-flex;
        text-align: center;
				margin-top: 8px;
				font-size: 12px;
			}
    </style>
		<iron-ajax auto
			url="data/notificationicons.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>
    <div class="container2">
			<template is="dom-repeat" items="[[ajaxResponse]]">
				<div class="set">
					<div><paper-icon-button class="big" id="{{item.icon}}" icon="notification:{{item.icon}}"></paper-icon-button></div>
					<div>{{item.icon}}</div>
				</div>
			</template>
		</div>
	</template>
	<script>
		class Notificationicons extends Polymer.Element {
			static get is() {
				return 'my-notificationicons';
			}

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

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

	</script>
</dom-module>
