<div class="top-pad"></div>

<div class="content-padding">


	<div class="support-box-wrap box-content2">
		<div class="support-box-wrap-header">
			<h1><i class="fa fa-bar-chart"></i>Metrics</h1>
			<div class="support-box-header-actions-wrap">
				<div class="support-box-header-actions">
					<button ng-click='refreshData("user requested refresh")' class="button button-small button-empty button-green nav-button-grey"><i class="fa fa-refresh"></i><span>&nbsp;&nbsp;Refresh</span></button>
					<button ng-click="addChart();" class="button button-small button-green nav-button-green"><i class="fa fa-plus"></i><span>&nbsp;&nbsp;Add Chart</span></button>
				</div>
			</div>
			<div class="divider"></div>
		</div>
		<div class="no-box-content-color">
				<ul class="ul-inputs">
				<li class="li-input" ng-if="communities.length">

					<div class="label">Communities:</div>
					<div class="input">
						<button ng-click="selectNoneCommunity();" class="button button-small button-empty button-border button-orange"><i class="fa fa-minus-circle"></i>&nbsp;&nbsp;Select None</button>
						<button ng-click="selectAllCommunities();" class="button button-small button-empty button-border button-green"><i class="fa fa-plus-circle"></i>&nbsp;&nbsp;Select All</button>
						<button ng-click="selectTop5Communities();" class="button button-small button-empty button-border button-blue"><i class="fa fa-star"></i>&nbsp;&nbsp;Top 5</button>
						<br/>
						<br/>
					</div>

					<div class="input">


						<ui-select on-select="communityChanged($item, $model)" multiple ng-model="settings.communities" theme="select2" close-on-select="true" title="Select a community">
							<ui-select-match placeholder="Select a community...">{{$item.name}}</ui-select-match>
							<ui-select-choices repeat="community in communities | propsFilter: {name: $select.search}">
								{{community.name}}
							</ui-select-choices>
						</ui-select>

					</div>
				</li>
			</ul>

			<ul class="ul-inputs quadruple-cols">

				<li class="li-input">
					<div class="label">Start:</div>
					<div class="input"><input type="datetime-local" name="staffName"  ng-model="settings.start" ></div>
				</li>
				<li class="li-input">
					<div class="label">End:</div>
					<div class="input"><input type="datetime-local" name="staffName" ng-model="settings.end" ></div>
				</li>

				<li class="li-input">
					<div class="label">Period:</div>
					<div class="input"><select ng-options='period.symbol as period.description for period in availablePeriods' ng-model='settings.period' ng-change='refreshData("period change")'></select></div>
				</li>
				<li class="li-input">
					<div class="label">Combine Charts</div>
					<div class="input">
						<label class="switch-wrap">
							<input type="checkbox" ng-model='settings.combineCharts' ng-change='calculateCombinedData()' class="switch"/><div></div>
						</label>
					</div>

				</li>
			</ul>
		</div>
	</div>

	<div class="support-boxes" ng-if="settings.communities.length">
		<div class="support-box-wrap box-content2 support-box-wrap" ng-repeat='chartOption in settings.charts'>

			<div class="support-box-wrap-header">
				<h1><i class="fa fa-lg fa-{{chartOption.format || 'line'}}-chart"></i>Chart</h1>
				<div class="support-box-header-actions-wrap">
					<div class="support-box-header-actions">
						<a class="button-small button button-empty button-border button-green no-underline" download="metrics-{{chartOption.type}}.csv" href="#" id='metrics-export-{{chartOption.type}}' ng-click="exportDataToCSV($event, chartOption)"><i class="fa fa-download"></i>&nbsp;&nbsp;Export</a>
						<button class="button button-small button-empty button-border button-orange" ng-click="removeChartOption(chartOption)"><i class="fa fa-times"></i>&nbsp;&nbsp;Remove</button>
					</div>
				</div>
				<div class="divider"></div>
			</div>
			<div class="no-box-content-color double-cols">
				<ul class="ul-inputs">
					<li class="li-input">
						<div class="label">Data:</div>
						<div class="input"><select ng-options='chart.type as chart.description for (t, chart) in availableCharts' ng-model='chartOption.type' ng-change='updateChartOption(chartOption)'></select></div>
					</li>
					<li class="li-input">
						<div class="label">Sort:</div>
						<div class="input"><select ng-options='item.kind as item.description for item in sortMethods' ng-model='chartOption.orderMethod' ng-change='updateChartOrders(chartOption, true)'></select></div>
					</li>
				</ul>
				<ul class="ul-inputs ">
					<li class="li-input">
						<div class="label">Type:</div>
						<div class="input"><select ng-options='item.kind as item.description for item in chartFormats' ng-model='chartOption.format' ng-change='persistOptions()'></select></div>
					</li>
					<li class="li-input" ng-show='!settings.combineCharts'>
						<div class="label">Scale:</div>
						<div class="input"><select ng-options='item.kind as item.description for item in setScales' ng-model='chartOption.uniformScale' ng-change='updateChartOption(chartOption)'></select></div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="divider"></div>
	<div ng-if="settings.communities.length">

		<div class="support-boxes metrics-boxes">
		<div ng-if='!settings.combineCharts' ng-repeat='community in orderedCommunities' class="support-box-wrap box-content2">
			<div class="support-box-wrap-header">
				<h1>{{community.name}}</h1>
				<div class="divider"></div>
			</div>

			<div ng-repeat='chartOption in settings.charts' ng-switch on='chartOption.format'>
				<h3 style='text-align:center' ng-if="settings.charts.length > 1">{{availableCharts[chartOption.type].description}}</h3>
				<canvas ng-switch-when='line' class="chart chart-line" data="chartData[community.id_community][chartOption.type].data"
					options="chartData[community.id_community][chartOption.type].options"
					labels="chartData[community.id_community][chartOption.type].labels"
					legend="false"></canvas>
				<canvas ng-switch-when='bar' class="chart chart-bar" data="chartData[community.id_community][chartOption.type].data"
					options="chartData[community.id_community][chartOption.type].options"
					labels="chartData[community.id_community][chartOption.type].labels"
					legend="false"></canvas>
			</div>
		</div>
		</div>
		<div ng-if='settings.combineCharts' ng-repeat='chartOption in settings.charts' ng-switch on='chartOption.format'>
			<h3 style='text-align:center'>{{availableCharts[chartOption.type].description}}</h3>
			<canvas ng-switch-when='line' ng-if='orderedCommunities.length <= settings.maxCombinedCommunities'
				class="chart chart-line" data="combinedChartData[chartOption.type].data"
				options="combinedChartData[chartOption.type].options"
				labels="combinedChartData[chartOption.type].labels"
				series="combinedChartData[chartOption.type].series"
				legend="true"></canvas>
			<canvas ng-switch-when='bar' ng-if='orderedCommunities.length <= settings.maxCombinedCommunities'
				class="chart chart-bar" data="combinedChartData[chartOption.type].data"
				options="combinedChartData[chartOption.type].options"
				labels="combinedChartData[chartOption.type].labels"
				series="combinedChartData[chartOption.type].series"
				legend="true"></canvas>
			<div ng-if='orderedCommunities.length > settings.maxCombinedCommunities'>
				<p>Too many communities to show combined chart.</p>
				<p>(select at most {{settings.maxCombinedCommunities}})</p>
			</div>
		</div>
	</div>
</div>
