{% if flags.has_diffs %}
	<div class="text-center mb-3">
		<div class="btn-group report-changes-toggle" role="group">
			<input type="radio" class="btn-check" name="change_report_type" id="TypeSummary" autocomplete="off"
				   checked value="summary">
			<label class="btn btn-outline-secondary" for="TypeSummary">Summary</label>

			<input type="radio" class="btn-check" name="change_report_type" id="TypeDetailed" autocomplete="off"
				   value="detailed">
			<label class="btn btn-outline-secondary" for="TypeDetailed">Detailed</label>
		</div>
	</div>

	<div class="accordion accordion-flush" id="accordionChanges">
		{% for zone_slug,zone_data in vars.changes %}
			{% set zone_changes = zone_data['detailed'] %}
			<div class="accordion-item">
				<h2 class="accordion-header">
					<button class="accordion-button"
							type="button"
							data-bs-toggle="collapse"
							data-bs-target="#collapse-zone-{{ zone_slug }}"
							aria-expanded="true" aria-controls="collapse-zone-{{ zone_slug }}">
						{{ zone_data.title }}
					</button>
				</h2>
				<div id="collapse-zone-{{ zone_slug }}" class="accordion-collapse collapse show">
					<div class="accordion-body">
						{% include '/reports/areas/changes/zone_diff.twig' %}
					</div>
				</div>
			</div>
		{% endfor %}
	</div>

{% else %}
	<p class="report-empty">There were no changes detected for the given reporting criteria.</p>
{% endif %}