{% set centers = craft.entries.section('burnCenters').orderBy('title') %}

<section class="map-section">
    <div class="container">
        <div class="map-section__description">
            {{ entry.intro }}
        </div>

        <div class="map-section__content">
            <div class="map-section__detail-wrapper" style="display: none">
                <div class="map-section__detail">
                    <h3 class="map-section__detail-title"></h3>
                    <p class="map-section__detail-address"></p>

                    <div class="map-section__detail-section">
                        <h4 class="map-section__detail-subtitle">{{ 'label.website'|t|upper }}</h4>
                        <p class="map-section__detail-website"></p>
                    </div>

                    <div class="map-section__detail-section">
                        <h4 class="map-section__detail-subtitle">{{ 'label.phone'|t|upper }}</h4>
                        <p class="map-section__detail-phone"></p>
                    </div>

                    <div class="map-section__detail-section">
                        <h4 class="map-section__detail-subtitle">{{ 'label.center.careCoordinator'|t|upper }}</h4>
                        <p class="map-section__detail-careCoordinator"></p>
                    </div>

                    <div class="map-section__detail-section">
                        <h4 class="map-section__detail-subtitle">{{ 'label.center.socialAssistant'|t|upper }}</h4>
                        <p class="map-section__detail-socialAssistant"></p>
                    </div>

                    <a href="#" class="map-section__detail-link" target="_blank">
                        {{ 'link.routeDescription'|t }}
                        <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
                    </a>
                </div>
                <button class="map-section__back-btn">
                    <i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
                    {{ 'link.backToList'|t }}
                </button>
            </div>

            <div class="map-section__list">
                {% for center in centers %}
                    {% set translatableAddress = center.translatableAddress.one() %}
                    {% set address = translatableAddress ? translatableAddress.address.one() : null %}
                    {% if address %}
                        <article class="map-section__card">
                            <h3 class="map-section__card-title">{{ address.title }}</h3>
                            <p class="map-section__card-address">
                                {{ address.addressLine1 }},
                                {{ address.addressLine2 ? address.addressLine2 ~ ', ' : '' }}
                                {{ address.addressLine3 ? address.addressLine3 ~ ', ' : '' }}
                                {{ address.postalCode }} {{ address.locality }}
                            </p>
                            <div class="map-section__card-link">
                                {{ 'link.center.moreInfo'|t }}
                                <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
                            </div>
                        </article>
                    {% endif %}
                {% endfor %}
            </div>

            <div class="map-section__map">
                <div id="map" class="map-section__map-container"></div>
            </div>
        </div>
    </div>
</section>

<script>
    const ROUTE_DESCRIPTION_LABEL = "{{ 'link.routeDescription'|t|escape('js') }}";
    const centers = [
        {% set max = (centers | length) - 1 %}
        {% for key, center in centers %}
            {% set translatableAddress = center.translatableAddress.one() %}
            {% set address = translatableAddress ? translatableAddress.address.one() : null %}
            {% if address %}
                {% set street = address.addressLine1 ~ '<br>' %}
                {% if (address.addressLine2) %}
                    {% set street = street ~ address.addressLine2 ~ '<br>' %}
                {% endif %}
                {% if (address.addressLine3) %}
                    {% set street = street ~ address.addressLine3 ~ '<br>' %}
                {% endif %}
                {
                    name: "{{ address.title|escape('js') }}",
                    address: "{{ (street ~ address.postalCode ~ ' ' ~ address.locality)|escape('js') }}",
                    addressLink: "{{ ((address.addressLine1 ~ ' ' ~ address.addressLine2 ~ ' ' ~ address.addressLine3)|trim ~ ' ' ~ address.postalCode ~ ' ' ~ address.locality ~ ' ' ~ address.country)|url_encode }}",
                    website: "{{ center.websiteLink|escape('js') }}",
                    phone: "{{ center.phoneNumber ? center.phoneNumber.format('national')|escape('js') : '' }}",
                    phoneLink: "{{ contactInfo.phoneNumber.format('rfc3966') }}",
                    careCoordinatorEmail: "{{ center.careCoordinatorEmail|escape('js') }}",
                    socialAssistantEmail: "{{ center.socialAssistantEmail|escape('js') }}",
                    lat: {{ center.latitude }},
                    lng: {{ center.longitude }},
                }{{ key < max ? ',' : '' }}
            {% endif %}
        {% endfor %}
    ];
</script>

{% css "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" %}
{% js "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" %}
{% js "/assets/js/burn-centers-map.js" %}