WebComponent_template.html

	<template>
	    <style>
	      /* styles for the custom element itself - lowest specificity */
	      :host { display: block; }
	    </style>


		<template if="{{ systemOk === false }}">
			<div class="alert alert-danger">
				Your browser don't support FileSystem api. <a href="https://www.google.com/intl/fr_fr/chrome/browser/">Please, download chrome</a><br/>
			</div>
		</template>
		<template if="{{ systemError !== null }}">
			<div class="alert alert-danger">
				Error : {{systemError}}<br/>
			</div>
		</template>

		<template if="{{ systemOk === true }}">
			<button on-click="{{refreshList}}" class="btn btn-success btn-xs btn-block">
				<span class="glyphicon glyphicon-refresh"></span>
				Refresh the list
			</button>

			<span class="btn btn-warning btn-xs btn-block btn-file">
			    <span class="glyphicon glyphicon-cloud-upload"></span>
				Upload a new File in the list
				<input type="file" on-change="{{addSomeFile}}" />
			</span>
			<br/>

			<template id="containerlist" if="{{ myfiles.length > 0 }}">
				<h3 class="titrelist">List of existing files :</h3>
				<template id="filelist" repeat="{{onefile in myfiles}}">
					<button on-click="{{removeSomeFile}}" class="btn btn-danger btn-xs">
						<span class="glyphicon glyphicon-remove"></span> Remove
					</button>
					<button on-click="{{openSomeFile}}" class="btn btn-default btn-xs" type="button">
						<span class="glyphicon glyphicon-eye-open"></span>
	      				{{onefile.name}}
	      				<span class="label label-warning">{{onefile.fileSize}} bytes</span>
	      				<span class="label label-info">Last modified on {{onefile.fileModificationTime}} </span>
	    			</button>
	    			<br/>
				</template>
			</template>
			<template id="emptylist" if="{{ myfiles.length < 1 }}">
				Empty list
			</template>
		</template>
	</template>