<div class="row">
	<div class="col insights_section">
		<h5 class="my-3">Chart Your Desired Stats</h5>
		<form class="" id="CustomChart">

			<div class="row">

				<div class="col-auto mb-3">
					<label class="visually-hidden" for="_events">{{ strings.select_events }}</label>
					<select multiple="multiple" name="events[]" id="_events" class="select2picker static">
						{% for event_key,event_name in vars.events %}
							<option value="{{ event_key }}">{{ event_name }}</option>
						{% endfor %}
					</select>
				</div>

				<div class="col-auto mb-3">
					<label class="visually-hidden" for="_interval">{{ strings.select_interval }}</label>
					<select name="interval" id="_interval">
						<option value="" disabled="disabled" selected="selected">
							-- {{ strings.select_interval }} --
						</option>
						{% for interval_key,interval_name in vars.interval %}
							<option value="{{ interval_key }}">{{ interval_name }}</option>
						{% endfor %}
					</select>
				</div>

				<div class="col-auto mb-3 text-end">
					<input id="SubmitForm" class="btn btn-primary"
						   type="submit" value="{{ strings.build_chart }}" />
					{# <a id="ClearForm" href="#" #}
					{# class="btn btn-sm btn-link text-dark">{{ strings.filters_clear }}</a> #}
				</div>

			</div>
		</form>
	</div>
</div>
<div class="row">
	<div class="col-12">
		<h6 id="CustomChartTitle" class="mb-3 text-center"></h6>
	</div>
	<div class="col-10 offset-1">
		<div id="CustomChartDisplay"></div>
	</div>
</div>