{# contact.twig #}

{% extends "/skeleton/base.twig" %}

{% block style %}
	{{ parent() }}
	@media (max-width: 992px) {
	    iframe {
	      max-width: 342px;
	    }
		}

{% endblock %}

{% block content %}
	<div class="container my-5">
		<!-- Page Title -->
		<h1 class="bg-secondary text-white mb-4 p-2">{{ page_title }}</h1>

		<!-- Worldwide Offices -->
		<h3 class="my-3">{{ worldwide_offices.title }}</h3>
		<div class="card">
			<div class="row g-0">
				<!-- Left side - Office Info -->
				<div class="col-md-5">
					<div class="card-body">
						<p class="card-title">
							<strong class="card-title d-inline-block">{{ worldwide_offices.headquarter.name }}</strong>
						</p>
						<p class="card-text">Address: {{ worldwide_offices.headquarter.address }}</p>
						<p class="card-text">Tel: {{ worldwide_offices.headquarter.Tel }}</p>
						<p class="card-text">Fax: {{ worldwide_offices.headquarter.Fax }}</p>
						{% for email in worldwide_offices.headquarter.email %}
							<p class="card-text">{{ email.point }}:
								<a href="mailto:{{ email.address }}">{{ email.address }}</a>
							</p>
						{% endfor %}
					</div>
				</div>

				<!-- Right side - Google Map -->
				<div class="col-md-7 d-flex align-items-center justify-content-center py-3">
						<iframe 
              src="{{ worldwide_offices.headquarter.map_src }}" 
              width="600" 
              height="300" 
              style="border:0;" 
              allowfullscreen="" 
              loading="lazy" 
              referrerpolicy="no-referrer-when-downgrade">
            </iframe>
				</div>
			</div>
		</div>


		<!-- Worldwide Distributors -->
		<h3 class="my-3">{{ worldwide_distributors.title }}</h3>
		{% for region in worldwide_distributors.regions %}
			{% set region_info = attribute(_context, region) %}
			<div class="card mb-3">
				<div class="card-body">
					<h4 class="card-title">{{ region_info.title }}</h4>
					{% for distributor in region_info.distributors %}
            <p class="card-text border-top border-2 pt-2">
              <strong class="d-inline-block">
                <a href="{{ distributor.link }}" target="_blank">{{ distributor.name }}</a>
              </strong>
            </p>
            <p class="card-text">Tel: {{ distributor.Tel }}</p>
            {% if distributor.Fax %}
              <p class="card-text">Fax: {{ distributor.Fax }}</p>
            {% endif %}
            <p class="card-text">Email: <a href="mailto:{{ distributor.Email }}">{{ distributor.Email }}</a></p>
					{% endfor %}
				</div>
			</div>
		{% endfor %}
	</div>
{% endblock %}