{# Map Components — MapLibre GL

   Reusable macros for MapLibre GL map containers (theme-aware popups).
   ALL maps in Tusk use MapLibre GL (no Leaflet).

   Macros: map_assets, map_container, map_dark_styles, carto_dark_style

   Map initialization (new maplibregl.Map) remains in JS files.
   These macros standardize the container, CDN tags, basemap, and dark theme.
#}


{% macro map_assets() %}
{# MapLibre GL CDN script and CSS tags.
   Place in {% block extra_head %} or at the top of {% block scripts %}.
#}
<script src="https://unpkg.com/maplibre-gl@4.1.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@4.1.0/dist/maplibre-gl.css" rel="stylesheet" />
{% endmacro %}


{% macro map_container(id, height="100%", extra_classes="", rounded=true) %}
{# Container div for a MapLibre instance.

   Args:
       id: DOM element ID (used by maplibregl.Map to attach)
       height: CSS height value (default "100%")
       extra_classes: Additional CSS classes
       rounded: Whether to round corners (default true)
#}
<div id="{{ id }}"
     class="w-full bg-surface-2 {% if rounded %}rounded-lg overflow-hidden{% endif %} {{ extra_classes }}"
     style="height: {{ height }}; min-height: 200px;">
</div>
{% endmacro %}


{% macro map_dark_styles() %}
{# Token-based CSS for MapLibre popups (follows the app theme). Outputs a <style> block.
   Include once per page that uses map popups.
#}
<style>
.maplibregl-popup-content {
    background: var(--surface) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--shadow-lg) !important;
}
.maplibregl-popup-tip {
    border-top-color: var(--surface) !important;
}
.maplibregl-popup-close-button {
    color: var(--fg-3);
    font-size: 16px;
    padding: 4px 8px;
}
.maplibregl-popup-close-button:hover {
    color: var(--fg);
    background: var(--surface-2);
}
.geo-popup .maplibregl-popup-content {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}
.hover-tooltip .maplibregl-popup-content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.hover-tooltip .maplibregl-popup-tip {
    display: none;
}
</style>
{% endmacro %}


{% macro carto_dark_style() %}
{# Basemap style for `new maplibregl.Map({ style: ... })`. Kept under its
   historical name; resolves to the configured XYZ provider (Settings →
   Studio) or OpenFreeMap's keyless vector styles, matching the theme. #}
window.tuskBasemapStyle()
{% endmacro %}