{% extends 'base.html' %}
{% block content %}
<section class="card">
  <h1>
    {% if page == 'schedule' %}{{ t('schedule') }}{% endif %}
    {% if page == 'hotels' %}{{ t('hotels') }}{% endif %}
    {% if page == 'taxi' %}{{ t('taxi') }}{% endif %}
    {% if page == 'location' %}{{ t('location') }}{% endif %}
    {% if page == 'gifts' %}{{ t('gifts') }}{% endif %}
  </h1>

  {% if page == 'schedule' %}
    <p>{{ t('schedule_text') }}</p>
  {% elif page == 'hotels' %}
    <p>{{ t('hotels_text') }}</p>
  {% elif page == 'taxi' %}
    <p>{{ t('taxi_text') }}</p>
  {% elif page == 'gifts' %}
    <p>{{ t('gifts_text') }}</p>
  {% elif page == 'location' %}
    <p><strong>{{ location_name }}</strong></p>
    <p>{{ location_address }}</p>
    <div class="map-wrap map-consent" data-map-consent>
      <p>{{ t('maps_privacy_notice') }}</p>
      <button
        class="map-preview"
        type="button"
        data-map-load
        aria-label="{{ t('maps_load_button') }}"
        title="{{ t('maps_load_button') }}"
        style="--map-preview-image: url('{{ url_for('static', filename='assets/location-map-preview.svg') }}');"
      >
        <span class="map-preview-overlay">{{ t('maps_load_button') }}</span>
      </button>
      <div class="map-embed-target" data-map-embed-target></div>
      <div class="location-actions">
        <a class="btn" href="{{ location_website_url }}" target="_blank" rel="noopener">{{ t('visit_location') }}</a>
      </div>
    </div>

    <script>
      (() => {
        const wrapper = document.querySelector("[data-map-consent]");
        if (!wrapper) return;
        const loadButtons = Array.from(wrapper.querySelectorAll("[data-map-load]"));
        const previewButton = wrapper.querySelector(".map-preview");
        const target = wrapper.querySelector("[data-map-embed-target]");
        const src = {{ google_maps_embed_url|tojson }};
        let loaded = false;

        const loadMap = () => {
          if (loaded) return;
          const iframe = document.createElement("iframe");
          iframe.src = src;
          iframe.loading = "lazy";
          iframe.referrerPolicy = "no-referrer-when-downgrade";
          iframe.allowFullscreen = true;
          target.appendChild(iframe);
          if (previewButton) {
            previewButton.remove();
          }
          loadButtons.forEach((button) => button.remove());
          loaded = true;
        };

        loadButtons.forEach((button) => {
          button.addEventListener("click", loadMap);
        });
      })();
    </script>
  {% endif %}
</section>
{% endblock %}