<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" data-averages="{{ $value_type === 'average' }}" data-line-smooth="true">
					<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' && $value_type == 'average'">
				<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:radiorow name="value_type" value="{$value_type}"
				label="{{ phrase('display_value_type') }}">

				<xf:option value="average">{{ phrase('daily_averages') }}</xf:option>
				<xf:option value="total">{{ phrase('totals') }}</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>
	document.querySelectorAll('.js-presetChange').forEach(element =>
	{
		XF.on(element, 'change', function (e)
		{
			const ctrl = e.currentTarget,
				value = ctrl.value,
				form = ctrl.closest('form')

			if (value == -1)
			{
				return
			}

			const startInput = form.querySelector(ctrl.getAttribute('data-start') || 'input[name=start]')
			if (startInput)
			{
				startInput.value = value
			}

			const endInput = form.querySelector(ctrl.getAttribute('data-end') || 'input[name=end]')
			if (endInput)
			{
				endInput.value = ''
			}

			if (XF.trigger(form, 'submit'))
			{
				form.submit()
			}
		})
	})
</xf:js>