<dom-module id='app-shell'>
	<template>

		<app-location route={{route}} path={{path}}></app-location>
		<app-route
			pattern='/:page'
			route={{route}}
			data={{data}}
			tail={{tail}}>
		</app-route>

	</template>

	<script>
		import '@polymer/polymer/polymer-element.html';
		import '@polymer/app-route/app-route.html';
		import '@polymer/app-route/app-location.html';

		{
			class AppShell extends Polymer.Element {

				static get is() { return 'app-shell'; }
				static get config() {
					return {
						observers: [
							'_loadViewDependency(data)'
						]
					};
				}

				connectedCallback() {
					super.connectedCallback();
				}

				_loadViewDependency(path) {
					console.log(path.page);
					switch (path.page) {
						case 'clients-daily':
							import('./clients-daily-view.html').then(Polymer => {
								console.log(Polymer);
							});
							break;
						case 'clients-monthly':
							import('./clients-monthly-view.html').then(Polymer => {
								console.log(Polymer);
							});
					}
				}
			}

			customElements.define(AppShell.is, AppShell);
		}
	</script>
</dom-module>