{# The embedded map, provider decided by configuration.

   google: a keyless place-search embed, the same one the classic WordPress
   sites use. openstreetmap: a keyless marker embed by coordinates. Both are
   plain iframes, so the page stays static and no script runs until the
   reader scrolls the frame into view (lazy loading). #}
{% set provider = config.get('MAP_PROVIDER', 'google') %}
<section class="map-embed">
    {% if provider == 'openstreetmap' and config.get('MAP_LAT') and config.get('MAP_LNG') %}
    {% set lat = config.get('MAP_LAT') %}{% set lng = config.get('MAP_LNG') %}
    <iframe class="map-embed__frame" loading="lazy" referrerpolicy="no-referrer-when-downgrade"
            title="{{ _('Map') }}"
            src="https://www.openstreetmap.org/export/embed.html?bbox={{ (lng | float) - 0.004 }}%2C{{ (lat | float) - 0.002 }}%2C{{ (lng | float) + 0.004 }}%2C{{ (lat | float) + 0.002 }}&layer=mapnik&marker={{ lat }}%2C{{ lng }}"></iframe>
    {% else %}
    <iframe class="map-embed__frame" loading="lazy" referrerpolicy="no-referrer-when-downgrade"
            title="{{ _('Map') }}"
            src="https://maps.google.com/maps?q={{ config.get('MAP_QUERY') | urlencode }}&t=m&z={{ config.get('MAP_ZOOM', '16') }}&output=embed&iwloc=near"></iframe>
    {% endif %}
    {% if config.get('MAP_ADDRESS') %}
    <p class="map-embed__address">{{ config.get('MAP_ADDRESS') }}</p>
    {% endif %}
</section>

<style>
    .map-embed {
        margin-top: 2.5rem;
    }

    .map-embed__frame {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        border: 1px solid var(--brand-border);
        border-radius: var(--brand-radius);
    }

    .map-embed__address {
        margin: .75rem 0 0;
        font-size: .9rem;
        color: var(--brand-muted);
    }
</style>