{# The embedded map, provider decided by configuration. Rendered by the
   contact.map hook with:
     cfg : get_config("map") -> provider / query / lat / lng / zoom / address

   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). #}
<section class="map-embed">
    {% if cfg.provider == 'openstreetmap' and cfg.lat and cfg.lng %}
    {% set lat = cfg.lat %}{% set lng = cfg.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={{ cfg.query | urlencode }}&t=m&z={{ cfg.zoom }}&output=embed&iwloc=near"></iframe>
    {% endif %}
    {% if cfg.address %}
    <p class="map-embed__address">{{ cfg.address }}</p>
    {% endif %}
</section>

<style>
    /* Breathing room only when something sits above it; flush at the top
       of a side column. */
    .map-embed:not(:first-child) {
        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>