{% set map_id = bouzy_map_id|default('bouzy-vineyard-map') %}
{% set default_name = 'bouzy_map.details.default_name'|trans %}
{% set default_details = 'bouzy_map.details.default_details'|trans %}
{% set tile_attribution = 'bouzy_map.attribution'|trans %}

<section class="bouzy-vineyard-map" aria-labelledby="{{ map_id }}-title">
  <div class="bouzy-vineyard-map__inner">
    <header class="bouzy-vineyard-map__header">
      <p class="bouzy-vineyard-map__eyebrow">{{ 'bouzy_map.eyebrow' | trans }}</p>
      <h2 id="{{ map_id }}-title" class="bouzy-vineyard-map__title">{{ 'bouzy_map.title' | trans }}</h2>
      <p class="bouzy-vineyard-map__introduction">{{ 'bouzy_map.introduction' | trans }}</p>
    </header>

    <div
      class="bouzy-vineyard-map__stage"
      data-controller="bouzy-vineyard-map"
      data-bouzy-vineyard-map-commune-url-value="{{ asset(viti_theme_asset('maps/bouzy/commune.geojson'))|e('html_attr') }}"
      data-bouzy-vineyard-map-estate-parcels-url-value="{{ (asset(viti_theme_asset('maps/bouzy/parcelles-bandock.geojson')) ~ '?v=fabbd0611ccb')|e('html_attr') }}"
      data-bouzy-vineyard-map-named-places-url-value="{{ asset(viti_theme_asset('maps/bouzy/lieux-dits.geojson'))|e('html_attr') }}"
      data-bouzy-vineyard-map-neighbouring-parcels-url-value="{{ (asset(viti_theme_asset('maps/bouzy/parcelles-voisines.geojson')) ~ '?v=40f906c4d5cb')|e('html_attr') }}"
      data-bouzy-vineyard-map-vineyards-url-value="{{ asset(viti_theme_asset('maps/bouzy/vignes-bdtopo.geojson'))|e('html_attr') }}"
      data-bouzy-vineyard-map-parcels-url-value="{{ asset(viti_theme_asset('maps/bouzy/parcelles-vignes.geojson'))|e('html_attr') }}"
      data-bouzy-vineyard-map-default-name-value="{{ default_name|e('html_attr') }}"
      data-bouzy-vineyard-map-default-details-value="{{ default_details|e('html_attr') }}"
      data-bouzy-vineyard-map-parcel-option-pattern-value="{{ 'bouzy_map.keyboard.option_pattern'|trans|e('html_attr') }}"
      data-bouzy-vineyard-map-reference-pattern-value="{{ 'bouzy_map.details.reference_pattern'|trans|e('html_attr') }}"
      data-bouzy-vineyard-map-partial-variety-pattern-value="{{ 'bouzy_map.details.partial_variety_pattern'|trans|e('html_attr') }}"
      data-bouzy-vineyard-map-pinot-noir-label-value="{{ 'bouzy_map.varieties.pinot_noir'|trans|e('html_attr') }}"
      data-bouzy-vineyard-map-chardonnay-label-value="{{ 'bouzy_map.varieties.chardonnay'|trans|e('html_attr') }}"
      data-bouzy-vineyard-map-north-part-label-value="{{ 'bouzy_map.coverage.north'|trans|e('html_attr') }}"
      data-bouzy-vineyard-map-south-part-label-value="{{ 'bouzy_map.coverage.south'|trans|e('html_attr') }}"
      data-bouzy-vineyard-map-loading-message-value="{{ 'bouzy_map.status.loading'|trans|e('html_attr') }}"
      data-bouzy-vineyard-map-error-message-value="{{ 'bouzy_map.status.error'|trans|e('html_attr') }}"
      data-bouzy-vineyard-map-group-announcement-pattern-value="{{ 'bouzy_map.status.group_announcement_pattern'|trans|e('html_attr') }}"
      data-bouzy-vineyard-map-selected-announcement-pattern-value="{{ 'bouzy_map.status.selected_announcement_pattern'|trans|e('html_attr') }}"
      data-bouzy-vineyard-map-village-name-value="{{ 'bouzy_map.labels.village'|trans|e('html_attr') }}"
      data-bouzy-vineyard-map-zoom-in-label-value="{{ 'bouzy_map.controls.zoom_in'|trans|e('html_attr') }}"
      data-bouzy-vineyard-map-zoom-out-label-value="{{ 'bouzy_map.controls.zoom_out'|trans|e('html_attr') }}"
      data-bouzy-vineyard-map-tile-url-value="https://data.geopf.fr/wmts?SERVICE=WMTS&amp;REQUEST=GetTile&amp;VERSION=1.0.0&amp;LAYER=HR.ORTHOIMAGERY.ORTHOPHOTOS&amp;STYLE=normal&amp;FORMAT=image/jpeg&amp;TILEMATRIXSET=PM_6_19&amp;TILEMATRIX={z}&amp;TILEROW={y}&amp;TILECOL={x}"
      data-bouzy-vineyard-map-tile-attribution-value="{{ tile_attribution|e('html_attr') }}">
      <div
        class="bouzy-vineyard-map__canvas"
        role="region"
        tabindex="0"
        aria-label="{{ 'bouzy_map.map_label'|trans }}"
        aria-describedby="{{ map_id }}-status {{ map_id }}-attribution"
        data-bouzy-vineyard-map-target="map"></div>

      <div class="bouzy-vineyard-map__legend" role="group" aria-label="{{ 'bouzy_map.legend.label'|trans }}">
        <span class="bouzy-vineyard-map__legend-item">
          <span class="bouzy-vineyard-map__legend-swatch bouzy-vineyard-map__legend-swatch--pinot" aria-hidden="true"></span>
          {{ 'bouzy_map.varieties.pinot_noir'|trans }}
        </span>
        <span class="bouzy-vineyard-map__legend-item">
          <span class="bouzy-vineyard-map__legend-swatch bouzy-vineyard-map__legend-swatch--chardonnay" aria-hidden="true"></span>
          {{ 'bouzy_map.varieties.chardonnay'|trans }}
        </span>
      </div>

      <div class="bouzy-vineyard-map__parcel-selector">
        <label for="{{ map_id }}-place-select">{{ 'bouzy_map.keyboard.label'|trans }}</label>
        <select
          id="{{ map_id }}-place-select"
          disabled
          aria-describedby="{{ map_id }}-status"
          data-action="change->bouzy-vineyard-map#selectEstatePlace"
          data-bouzy-vineyard-map-target="placeSelect">
          <option value="">{{ 'bouzy_map.keyboard.placeholder'|trans }}</option>
        </select>
      </div>

      <p
        id="{{ map_id }}-status"
        class="bouzy-vineyard-map__visually-hidden"
        role="status"
        aria-live="polite"
        aria-atomic="true"
        data-bouzy-vineyard-map-target="status">
        {{ 'bouzy_map.status.loading' | trans }}
      </p>

      <aside
        class="bouzy-vineyard-map__details"
        aria-label="{{ 'bouzy_map.details.label'|trans }}"
        data-active="false"
        data-bouzy-vineyard-map-target="details">
        <h3 class="bouzy-vineyard-map__place-name" data-bouzy-vineyard-map-target="placeName">{{ default_name }}</h3>

        <dl class="bouzy-vineyard-map__metadata" data-bouzy-vineyard-map-target="metadata">
          <div class="bouzy-vineyard-map__metadata-item" data-bouzy-vineyard-map-target="parcelReferenceItem">
            <dt class="bouzy-vineyard-map__visually-hidden">{{ 'bouzy_map.details.reference_label' | trans }}</dt>
            <dd data-bouzy-vineyard-map-target="parcelReference">{{ default_details }}</dd>
          </div>
          <div
            class="bouzy-vineyard-map__metadata-item bouzy-vineyard-map__metadata-item--variety"
            data-bouzy-vineyard-map-target="varietyItem"
            hidden>
            <dt class="bouzy-vineyard-map__visually-hidden">{{ 'bouzy_map.details.variety_label' | trans }}</dt>
            <dd data-bouzy-vineyard-map-target="variety"></dd>
          </div>
        </dl>
      </aside>

      <div
        class="bouzy-vineyard-map__compass"
        role="img"
        aria-label="{{ 'bouzy_map.compass.label'|trans }}">
        <svg viewBox="0 0 96 96" aria-hidden="true" focusable="false">
          <text x="48" y="9" text-anchor="middle">{{ 'bouzy_map.compass.north'|trans }}</text>
          <text x="88" y="51" text-anchor="middle">{{ 'bouzy_map.compass.east'|trans }}</text>
          <text x="48" y="94" text-anchor="middle">{{ 'bouzy_map.compass.south'|trans }}</text>
          <text x="8" y="51" text-anchor="middle">{{ 'bouzy_map.compass.west'|trans }}</text>
          <circle class="bouzy-vineyard-map__compass-ring" cx="48" cy="48" r="25"></circle>
          <path class="bouzy-vineyard-map__compass-axis" d="M48 18V78M18 48H78"></path>
          <path class="bouzy-vineyard-map__compass-north" d="M48 18L39 48L48 43L57 48Z"></path>
          <path class="bouzy-vineyard-map__compass-south" d="M48 78L39 48L48 53L57 48Z"></path>
          <circle class="bouzy-vineyard-map__compass-center" cx="48" cy="48" r="3"></circle>
        </svg>
      </div>
    </div>

    <p id="{{ map_id }}-attribution" class="bouzy-vineyard-map__attribution">{{ tile_attribution }}</p>
  </div>
</section>
