{% extends 'base.html' %}
{% load static %}

{% block main %}
<div x-data="{
              layer: 'positron',
              showRegions: true,
              showMarkers: true,
              showHeat: false,
              active: 'br-1',
              branches: [
                { id:'br-1', name:'Lisbon Studio', region:'EMEA', staff:18, rev:'€142K', c:'--ax-accent',       lat:'62%', lng:'46%' },
                { id:'br-2', name:'Leeds Distribution', region:'EMEA', staff:34, rev:'£98K',  c:'--ax-viz-cyan',   lat:'40%', lng:'44%' },
                { id:'br-3', name:'Malmö Wholesale', region:'EMEA', staff:12, rev:'kr 88K', c:'--ax-viz-violet', lat:'30%', lng:'56%' },
                { id:'br-4', name:'Milan Showroom', region:'EMEA', staff:9,  rev:'€76K',  c:'--ax-viz-amber',  lat:'55%', lng:'58%' },
                { id:'br-5', name:'Bristol Pop-up', region:'EMEA', staff:6,  rev:'£41K',  c:'--ax-viz-emerald',lat:'45%', lng:'40%' },
                { id:'br-6', name:'Marseille Depot', region:'EMEA', staff:14, rev:'€63K',  c:'--ax-viz-pink',   lat:'66%', lng:'52%' }
              ]
            }">
        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">Leaflet Maps</h1>
              <p class="ax-page-head__subtitle">Open tile maps with switchable layers, GeoJSON region overlays, accent markers and Aurora-styled popups.</p>
            </div>
            <div class="ax-page-head__actions">
              <button type="button" class="ax-btn ax-btn--secondary ax-btn--pill">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4l-8 4l8 4l8 -4l-8 -4"/><path d="M4 12l8 4l8 -4"/><path d="M4 16l8 4l8 -4"/></svg>
                <span class="ax-btn__label">Manage layers</span>
              </button>
              <button type="button" class="ax-btn ax-btn--primary">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5l0 14"/><path d="M5 12l14 0"/></svg>
                <span class="ax-btn__label">Add marker</span>
              </button>
            </div>
          </div>
        </div>

        <!-- ════════════════ CONTENT GRID ════════════════ -->
        <div class="ax-dash-grid">

          <!-- ───── LAYER CONTROLS RAIL ───── -->
          <section class="ax-card ax-col--4" role="region" aria-label="Map layer controls">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Layers</span>
                <h2 class="ax-card__title">Layer controls</h2>
                <p class="ax-card__subtitle">Base map &amp; overlays</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-4);">
              <!-- base tile layer radios -->
              <div>
                <div style="font-size:var(--ax-text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--ax-text-subtle);margin-bottom:var(--ax-space-2);">Base layer</div>
                <div style="display:grid;gap:var(--ax-space-2);">
                  <template x-for="t in [
                    {k:'positron', name:'Positron', sub:'Neutral light'},
                    {k:'dark',     name:'Dark Matter', sub:'Warm graphite'},
                    {k:'voyager',  name:'Voyager', sub:'Soft colour'},
                    {k:'terrain',  name:'Terrain', sub:'Topographic'}
                  ]" :key="t.k">
                    <label class="ax-cluster" :class="{ 'is-selected': layer===t.k }"
                           style="gap:var(--ax-space-3);padding:var(--ax-space-3);border:1px solid var(--ax-border);border-radius:var(--ax-radius-sm);cursor:pointer;flex-wrap:nowrap;"
                           :style="layer===t.k ? 'border-color:var(--ax-accent);background:var(--ax-accent-wash);' : ''">
                      <input type="radio" name="lf-layer" class="ax-radio" :value="t.k" x-model="layer" :aria-label="t.name">
                      <span style="flex:1 1 auto;min-width:0;">
                        <span style="display:block;font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);font-size:var(--ax-text-sm);" x-text="t.name"></span>
                        <span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);" x-text="t.sub"></span>
                      </span>
                      <span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:var(--ax-surface-subtle);color:var(--ax-text-muted);">
                        <svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4l-8 4l8 4l8 -4l-8 -4"/><path d="M4 12l8 4l8 -4"/></svg>
                      </span>
                    </label>
                  </template>
                </div>
              </div>

              <div class="ax-divider"></div>

              <!-- overlay toggles -->
              <div>
                <div style="font-size:var(--ax-text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--ax-text-subtle);margin-bottom:var(--ax-space-2);">Overlays</div>
                <div style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
                  <label class="ax-cluster" style="justify-content:space-between;cursor:pointer;">
                    <span class="ax-cluster" style="gap:var(--ax-space-2);"><i style="width:11px;height:11px;border-radius:3px;background:color-mix(in oklab,var(--ax-accent) 45%,transparent);"></i><span style="font-size:var(--ax-text-sm);color:var(--ax-text);">GeoJSON regions</span></span>
                    <input type="checkbox" class="ax-switch" x-model="showRegions" aria-label="Toggle GeoJSON region overlay">
                  </label>
                  <label class="ax-cluster" style="justify-content:space-between;cursor:pointer;">
                    <span class="ax-cluster" style="gap:var(--ax-space-2);"><i style="width:11px;height:11px;border-radius:50%;background:var(--ax-accent);"></i><span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Branch markers</span></span>
                    <input type="checkbox" class="ax-switch" x-model="showMarkers" aria-label="Toggle branch markers">
                  </label>
                  <label class="ax-cluster" style="justify-content:space-between;cursor:pointer;">
                    <span class="ax-cluster" style="gap:var(--ax-space-2);"><i style="width:11px;height:11px;border-radius:50%;background:radial-gradient(circle,var(--ax-viz-pink),transparent 70%);"></i><span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Density heat</span></span>
                    <input type="checkbox" class="ax-switch" x-model="showHeat" aria-label="Toggle density heatmap">
                  </label>
                </div>
              </div>

              <div class="ax-divider"></div>

              <!-- opacity slider -->
              <div>
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:var(--ax-space-2);">
                  <span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Region opacity</span>
                  <span class="ax-badge ax-badge--soft ax-badge--pill ax-num">40%</span>
                </div>
                <input type="range" class="ax-range--native" min="0" max="100" value="40" aria-label="Region fill opacity" style="width:100%;">
              </div>
            </div>
          </section>

          <!-- ───── MAP CANVAS (hero) ───── -->
          <section class="ax-card ax-card--chart ax-col--8" role="region" aria-label="Leaflet map of European branches" style="overflow:hidden;">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <h2 class="ax-card__title">European branches</h2>
                <p class="ax-card__subtitle">Base layer: <b x-text="layer.charAt(0).toUpperCase()+layer.slice(1)" style="color:var(--ax-text-strong);"></b> · 6 markers</p>
              </div>
              <div class="ax-card__actions">
                <span class="ax-badge ax-badge--soft ax-badge--pill"><span class="ax-badge__dot" style="background:var(--ax-viz-emerald);"></span>OpenStreetMap</span>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div style="position:relative;height:460px;border-radius:var(--ax-radius-lg);overflow:hidden;border:1px solid var(--ax-border);">
                <!-- real Leaflet map (CARTO / OpenTopoMap tiles · no API key) -->
                <div data-ax-map="leaflet"
                     aria-label="Leaflet map of Western Europe with branch markers and region overlays"
                     style="position:absolute;inset:0;height:100%;background:var(--ax-surface-subtle);"></div>

                <!-- Aurora glass zoom controls (top-left, Leaflet default position) -->
                <div style="position:absolute;left:var(--ax-space-4);top:var(--ax-space-4);display:flex;flex-direction:column;gap:6px;z-index:500;">
                  <button type="button" class="ax-btn ax-btn--secondary ax-btn--icon ax-btn--sm" aria-label="Zoom in" style="backdrop-filter:blur(12px);">
                    <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5l0 14"/><path d="M5 12l14 0"/></svg>
                  </button>
                  <button type="button" class="ax-btn ax-btn--secondary ax-btn--icon ax-btn--sm" aria-label="Zoom out" style="backdrop-filter:blur(12px);">
                    <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l14 0"/></svg>
                  </button>
                </div>
              </div>
            </div>
          </section>

          <!-- ───── LOCATION CARDS ───── -->
          <template x-for="b in branches" :key="'card-'+b.id">
            <section class="ax-card ax-card--interactive ax-col--4" role="region"
                     @click="active = b.id" tabindex="0" @keydown.enter="active = b.id"
                     :aria-label="b.name + ' branch card'"
                     :class="{ 'is-selected': active === b.id }"
                     style="cursor:pointer;">
              <div class="ax-card__body">
                <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                  <span class="ax-avatar ax-avatar--md ax-avatar--squircle" :style="`background:color-mix(in oklab, var(${b.c}) 18%, transparent); color:var(${b.c});`">
                    <svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/><path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0"/></svg>
                  </span>
                  <div style="flex:1 1 auto;min-width:0;">
                    <div class="ax-truncate" style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);" x-text="b.name"></div>
                    <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);" x-text="b.region + ' region'"></div>
                  </div>
                  <span class="ax-badge ax-badge--soft ax-badge--pill ax-num" x-text="b.rev"></span>
                </div>
                <div class="ax-cluster" style="justify-content:space-between;margin-top:var(--ax-space-4);padding-top:var(--ax-space-3);border-top:1px solid var(--ax-border);">
                  <span style="font-size:var(--ax-text-xs);color:var(--ax-text-muted);">Headcount</span>
                  <b class="ax-num" style="color:var(--ax-text-strong);font-size:var(--ax-text-sm);" x-text="b.staff"></b>
                </div>
              </div>
            </section>
          </template>

        </div>

      
</div>
{% endblock %}

{% block head_extra %}
<link rel="stylesheet" href="{% static 'dist/pages/maps-leaflet.css' %}">
{% endblock %}

{% block scripts %}
<script type="module" src="{% static 'dist/pages/maps-leaflet.js' %}"></script>
{% endblock %}