{% extends "_layouts/main" %}

{% block main %}

<div id="international-office-grid" class="container main-section no-header">

	<div class="row text-center mb-5">
		<div class="col-12 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
			<h1>{{ entry.title }}</h1>
			<p>{{ entry.bodyContent }}</p>
		</div>
	</div>

	<div class="row">

		{% set offices = entry.internationalOffices.all() %}

		{% for office in offices %}
		
		<div class="col-12 col-md-6 col-lg-4 office-tile">

			{% if office.officeImage|length %}
				<div class="office-img" style="background-image: url({{ office.officeImage.one().getUrl }});"></div>
			{% else %}
				<div class="placeholder">
					<h4>{{ office.country }}</h4>
				</div>
			{% endif %}
			<h3>{{ office.country }}</h3>
			
		</div>

		{% endfor %}

	</div>

	<div class="row" id="shipping-countries">

		<div class="col-12">
			<h3>{{ 'Countries we ship to'|t }}:</h3>
		</div>
	
		<div class="col-12">

			<ul>

				{% for row in entry.shippingCountries %}

				<li><img src="img/subpage/international/blank.gif" class="flag flag-{{ row.countryCode|lower }}" alt="{{ row.country }}"> {{ row.country }}</li>

				{% endfor %}

			</ul>
			
		</div>

	</div>

</div>

{% endblock %}