{% extends 'layouts/base' %}

{% block content %}
	{% embed 'skeletons/internalPage' %}

		{% block internal %}
		{% import "macros" as macros %}
			{% include "blocks/global/enquireNow" %}
			
			<section class="container py-16 bg-white xl:py-24">
				{% for block in entry.locations.all() %}
							{% if block.type == "heading" %}
								<h1 class="w-full pb-4 font-bold border-b-2 type-2xl text-imperial font-heading border-pink {% if loop.index >= 1 %} mt-24 {% endif %}">
									{{block.heading}}
								</h1>
							{% elseif block.type == "locations" %}
								{% for item in block.locations.all() %}
									<article class="grid grid-cols-1 gap-6 pt-6 md:grid-cols-2 md:gap-x-8 lg:grid-cols-3 lg:gap-x-12 xxl:grid-cols-4 aos-init aos-animate" data-aos="fade-up">
										<aside class="space-y-4">
											<a href="tel:{{item.phone}}" class="flex items-start w-full gap-4">
												{{ macros.icon("solid/phone","text-imperial type-lg") }}
												<span class="text-grey-70">
													Phone:{{item.phone}}
												</span>
											</a>
											<a href="mailto:{{item.email}}" class="flex items-start w-full gap-4">
												{{ macros.icon("solid/mail","text-imperial type-lg") }}
												<span class="text-grey-70">
													Email: {{item.email }} 
												</span>
											</a>
											<div class="flex items-start w-full gap-4">
												{{ macros.icon("solid/clock","text-imperial type-lg") }}
												<span class="text-grey-70">
													{{item.operatingHours}}
												</span>
											</div>
										</aside>
										<article class="lg:col-span-2 xxl:col-span-3">
											<h4 class="type-xl text-pink">
												{{item.clinicName}}
											</h4>
											<p class="mt-4 text-16">
												{{item.address}}
											</p>
										</article>
										<!-- Design -->
										{% if not loop.last %}
											<div class="flex items-center gap-6 md:col-span-full">
												<div class="flex-1 w-full h-px bg-grey-70"></div>
												<div class="grid w-8 h-8 rounded-full place-items-center bg-imperial">
													{{ macros.icon("custom/toothLocation","text-white type-lg") }}
												</div>
											</div>
										{% endif %}
									</article>
								{% endfor %}
							{% endif %}
				{% endfor %}
			</section>

			{% include "blocks/global/faq" %}

			{% include "blocks/global/callToAction" %}

		{% endblock %}

	{% endembed %}

{% endblock content %}