{% extends '/pages/base.twig' %}

{% block head_inline_styles %}
	{{ parent() }}
	<style>
		body {
			background-color: #f9f9f9;
		}
		body > main {
			max-width: 1000px;
			min-width: 600px;
			margin: 30px auto;
			background: white;
			box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
		}
		#PageHeaderTitle {
			background-color: #008000;
			height: 100px;
			color: white;
			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
		}
		.stat-diff-symbol > svg {
			width: 24px;
			height: 24px;
		}
		.col-stat > .card {
			border-width: 0 0 0 10px;
		}
		.col-stat.col-stat-success > .card svg {
			color: #008000;
		}
		.col-stat.col-stat-warning > .card svg {
			color: rgb(255, 193, 7);
		}
		.col-stat.col-stat-secondary > .card svg {
			color: #444444;
		}
		.area-title {
			background-color: rgba(0, 128, 0, 0.1);
		}
	</style>
{% endblock %}

{% block body_header %}
	<div class="container-fluid">
		<div class="row">
			<div class="col d-flex justify-content-center align-items-center" id="PageHeaderTitle">
				<h1>{{ strings.report_header_title }}</h1>
			</div>
		</div>

		<div class="row">
			<div class="col text-center">
				<h2 class="my-3" style="color: #008000"><code class="text-success">{{ vars.site_url_host }}</code></h2>
				<span>{{ vars.dates.report_date_start }} - {{ vars.dates.report_date_end }}</span>
			</div>
		</div>
	</div>
{% endblock %}

{% block body_content_header %}
	<div class="px-4">
		<div class="row mt-4">
			<div class="col-6 offset-3">
				<p>{{ strings.intro }}</p>
			</div>
		</div>

		{% for area in vars.areas %}
			{% include '/pages/report/area.twig' %}
		{% endfor %}
	</div>
{% endblock %}

{% block body_content_main %}
	<div class="row mt-4">
		<div class="col">
			{{ content.main|raw }}
		</div>
	</div>
{% endblock %}

{% block body_content_footer %}
{% endblock %}