<xf:title>{{ phrase('statistics') }}</xf:title>

<xf:css src="public:chartist.css" />
<xf:css src="stats.less" />

<xf:js prod="xf/stats-compiled.js" dev="vendor/chartist/chartist.min.js, xf/stats.js" />

<div class="block">
	<div class="block-container">
		<h2 class="block-header">
			<xf:if is="$grouping == 'daily'">
				{{ phrase('daily_statistics') }}
			<xf:elseif is="$grouping == 'weekly'" />
				{{ phrase('weekly_statistics') }}
			<xf:elseif is="$grouping == 'monthly'" />
				{{ phrase('monthly_statistics') }}
			</xf:if>
			<div class="block-desc">{{ date($start, 'absolute') }} - {{ date($end, 'absolute') }}</div>
		</h2>
		<div class="block-body">
			<div class="block-row">
				<div data-xf-init="stats">
					<script class="js-statsData" type="application/json">
						{$data|json|raw}
					</script>
					<script class="js-statsSeriesLabels" type="application/json">
						{$displayTypesPhrased|json|raw}
					</script>
					<div class="ct-chart ct-major-tenth js-statsChart"></div>
					<ul class="ct-legend js-statsLegend"></ul>
				</div>
			</div>
			<xf:if is="$grouping != 'daily'">
				<div class="block-row block-row--minor">
					{{ phrase('values_represent_daily_averages_within_each_time_period') }}
				</div>
			</xf:if>
		</div>
		<h3 class="block-header">
			<span class="collapseTrigger collapseTrigger--block" data-xf-click="toggle" data-target="< :up :next">
				{{ phrase('raw_statistics') }}
			</span>
		</h3>
		<div class="block-body block-body--collapsible">
			<xf:datalist class="dataList--contained" data-xf-init="responsive-data-list">
				<xf:datarow rowtype="header">
					<xf:cell>{{ phrase('period') }}</xf:cell>
					<xf:foreach loop="$displayTypes" value="$displayType">
						<xf:cell>{$displayTypesPhrased.{$displayType}}</xf:cell>
					</xf:foreach>
				</xf:datarow>
			<xf:foreach loop="$data" value="$stat">
				<xf:datarow>
					<xf:cell class="dataList-cell--alt">{$stat.label}</xf:cell>
					<xf:foreach loop="$displayTypes" value="$displayType">
						<xf:cell>{$stat.averages.{$displayType}|number($grouping == 'daily' ? 0 : 2)}</xf:cell>
					</xf:foreach>
				</xf:datarow>
			</xf:foreach>
			</xf:datalist>
		</div>
	</div>
</div>

<xf:form action="{{ link('stats') }}" class="block">
	<div class="block-container">
		<div class="block-body">
			<xf:formrow label="{{ phrase('date_range') }}" rowtype="input">
				<div class="inputGroup inputGroup--auto">
					<xf:dateinput name="start" value="{{ date($start, 'Y-m-d') }}" />
					<span class="inputGroup-text">-</span>
					<xf:dateinput name="end" value="{{ $endDisplay ? date($endDisplay, 'Y-m-d') : '' }}" />
					<span class="inputGroup-splitter"></span>
					<xf:select name="date_preset" class="js-presetChange input--autoSize">
						<xf:option value="-1">{{ phrase('date_presets:') }}</xf:option>
						<xf:optgroup>
							<xf:options source="{$datePresets}" />
							<xf:option value="1995-01-01">{{ phrase('all_time') }}</xf:option>
						</xf:optgroup>
					</xf:select>
				</div>
			</xf:formrow>

			<xf:radiorow name="grouping" value="{$grouping}"
				label="{{ phrase('grouping') }}">

				<xf:option value="daily">{{ phrase('daily') }}</xf:option>
				<xf:option value="weekly">{{ phrase('weekly') }}</xf:option>
				<xf:option value="monthly">{{ phrase('monthly') }}</xf:option>
			</xf:radiorow>

			<xf:checkboxrow name="display_types" value="{$displayTypes}"
				label="{{ phrase('display_statistics') }}">

				<xf:foreach loop="array_keys($statsTypeOptions)" value="$contentType">
					<xf:optgroup listclass="listColumns" label="{$contentTypePhrases.{$contentType}}">
						<xf:options source="{$statsTypeOptions.{$contentType}}" />
					</xf:optgroup>
				</xf:foreach>
			</xf:checkboxrow>
		</div>
		<xf:submitrow submit="{{ phrase('show') }}" sticky="true" />
	</div>
</xf:form>

<xf:js>
	$(function()
	{
		$('.js-presetChange').change(function(e)
		{
			var $ctrl = $(this),
				value = $ctrl.val(),
				$form = $ctrl.closest('form');

			if (value == -1)
			{
				return;
			}

			$form.find($ctrl.data('start') || 'input[name=start]').val(value);
			$form.find($ctrl.data('end') || 'input[name=end]').val('');
			$form.submit();
		});
	});
</xf:js>