<div class="locations standard-component mb-3 mb-md-7">
{% set dayOfWeek = 'now'|date('N') %}
{% set locations = [] %}
{% for location in locationList %}
{% set locations = locations|merge([
{
name: location.name,
tel: location.phone,
telSale: location.phoneSale,
telService: location.phoneService,
telParts: location.phoneParts,
image: location.image,
address: {
street: {
name: location.street,
},
city: {
name: location.city,
zip: location.zip
}
},
links: {
team: location.teamLink,
cars: location.carsLink,
appointment: location.appointmentLink,
service: location.serviceLink
},
times: {
sale: {
list: location.businessHoursSale
},
service: {
list: location.businessHoursService
},
parts: {
list: location.businessHoursParts
}
}
},
]) %}
{% endfor %}
{% for location in locations %}
<input class="d-none" type="radio" name="location-select" id="location-{{ loop.index }}" value="{{ location.name }}" {% if loop.index == 1 %}checked{% endif %}>
{% endfor %}
<nav class="locations-nav" aria-label="Stardort Navigation">
<ul>
{% for location in locations %}
<li><label for="location-{{ loop.index }}">{{ location.name }}</label></li>
{% endfor %}
</ul>
</nav>
<div class="locations-content-holder">
{% for location in locations %}
{% set telURL = location.tel|replace({' ': '', '/': '', '-': ''})|slice(1) %}
{% set telURLSale = location.telSale|replace({' ': '', '/': '', '-': ''})|slice(1) %}
{% set telURLService = location.telService|replace({' ': '', '/': '', '-': ''})|slice(1) %}
{% set telURLParts = location.telParts|replace({' ': '', '/': '', '-': ''})|slice(1) %}
<div class="locations-content" id="locations-content-{{ loop.index }}">
<div class="row align-items-center border-md-1 border-bmw-light-60 p-md-4 mx-0 mb-4">
<div class="col-md-4 text-bmw-dark-80 mb-5 mb-md-0">
<h4>Anfahrt & Kontakt</h4>
<p class="icon-map">
{{ location.address.street.name }}
<br>
{{ location.address.city.zip }}
{{ location.address.city.name }}
</p>
<p class="icon-tel">
<a href="tel:+49{{ telURL }}">{{ location.tel }}</a>
</p>
<p class="icon-none fw-bold m-0">
<a href="{{ location.links.team }}">Unser Team</a>
</p>
</div>
<div class="col-md-8 px-0 px-md-2">
<div class="px-md-1">
<img src="{{ location.image }}" alt="Standort {{ location.name }}"/>
</div>
</div>
</div>
<div class="row text-bmw-dark-80 py-4 px-2 p-md-4 mx-0">
<div class="col-12 mb-3 mb-md-0">
<h4>Öffnungszeiten & Kontakt</h4>
</div>
<div class="col-md-4 col-lg-3 mb-3 mb-md-0 small">
<p class="text-capitalize fw-bold mb-2">Verkauf</p>
<dl>
{% for data in location.times.sale.list %}
<dt {% if dayOfWeek in data.dayOfWeekHighlight %}class="fw-bold text-bmw-blue"{% endif %}>{{ data.day }}</dt>
<dd {% if dayOfWeek in data.dayOfWeekHighlight %}class="fw-bold text-bmw-blue"{% endif %}>{{ data.hour }}</dd>
{% endfor %}
<dt class="icon-tel">Telefon</dt>
<dd><a href="tel:+49{{ telURLSale }}">{{ location.telSale }}</a></dd>
</dl>
</div>
<div class="col-md-4 col-lg-3 mb-3 mb-md-0 small">
<p class="text-capitalize fw-bold mb-2">Service</p>
<dl>
{% for data in location.times.service.list %}
<dt {% if dayOfWeek in data.dayOfWeekHighlight %}class="fw-bold text-bmw-blue"{% endif %}>{{ data.day }}</dt>
<dd {% if dayOfWeek in data.dayOfWeekHighlight %}class="fw-bold text-bmw-blue"{% endif %}>{{ data.hour }}</dd>
{% endfor %}
<dt class="icon-tel">Telefon</dt>
<dd><a href="tel:+49{{ telURLService }}">{{ location.telService }}</a></dd>
</dl>
</div>
<div class="col-md-4 col-lg-3 mb-3 mb-md-0 small">
<p class="text-capitalize fw-bold mb-2">Teile & Zubehör</p>
<dl>
{% for data in location.times.parts.list %}
<dt {% if dayOfWeek in data.dayOfWeekHighlight %}class="fw-bold text-bmw-blue"{% endif %}>{{ data.day }}</dt>
<dd {% if dayOfWeek in data.dayOfWeekHighlight %}class="fw-bold text-bmw-blue"{% endif %}>{{ data.hour }}</dd>
{% endfor %}
<dt class="icon-tel">Telefon</dt>
<dd><a href="tel:+49{{ telURLParts }}">{{ location.telParts }}</a></dd>
</dl>
</div>
<div class="col-md-5 col-lg-3 mx-auto">
<p><a href="{{ location.links.cars }}" class="btn btn-primary w-100">Unsere Fahrzeuge</a></p>
<p><a href="{{ location.links.appointment }}" class="btn btn-primary w-100">Beratungstermin</a></p>
<p><a href="{{ location.links.service }}" class="btn btn-primary w-100">Service Termin</a></p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>