<?php
/**
 * Blocco Code Bricks — Mappa Invernale
 *
 * Condizione Bricks sul modulo:
 *   Inverno contains Inverno
 *
 * I dati (markers + taxonomy) sono già iniettati nel footer
 * da latemar_map_build_data() in functions.php.
 * Qui c'è solo l'HTML della mappa.
 *
 * Per la mappa estiva: duplica questo file e cambia
 *   data-map-id="mappa_estate"
 */

$taxonomy     = 'tipologia_punti_mappa';
$parent_terms = get_terms([
    'taxonomy'   => $taxonomy,
    'hide_empty' => true,
    'parent'     => 0,
    'orderby'    => 'name',
    'order'      => 'ASC',
]);
if ( is_wp_error( $parent_terms ) ) {
    $parent_terms = [];
}
?>

<div class="latemar-map-wrapper" data-map-id="mappa_inverno">

  <!-- TOP BAR -->
  <div class="latemar-top-bar">

    <!-- RIGA 1: Tab categorie padre -->
    <div class="latemar-tabs-row" role="tablist" aria-label="Filtra per categoria">
      <?php
      $first = true;
      foreach ( $parent_terms as $term ) : ?>
        <button class="latemar-tab-btn<?php echo $first ? ' is-active' : ''; ?>"
                data-tab="<?php echo esc_attr( $term->slug ); ?>"
                type="button"
                role="tab"
                aria-selected="<?php echo $first ? 'true' : 'false'; ?>"
                aria-label="<?php echo esc_attr( $term->name ); ?>">
          <?php echo esc_html( $term->name ); ?>
        </button>
        <?php $first = false;
      endforeach; ?>
    </div>

    <!-- RIGA 2: Ricerca + Pill sotto-filtri -->
    <div class="latemar-search-filters-row">
      <div class="latemar-search-wrap">
        <span class="latemar-search-icon" aria-hidden="true">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="7"/>
            <path d="m21 21-4.35-4.35"/>
          </svg>
        </span>
        <input type="search"
               class="latemar-search-input"
               placeholder="Cerca per nome..."
               autocomplete="off"
               aria-label="Cerca un punto sulla mappa" />
      </div>
      <div class="latemar-subfilters-wrap" role="group" aria-label="Sotto-filtri categoria"></div>
    </div>

  </div><!-- /latemar-top-bar -->

  <!-- MAPPA + SIDEBAR -->
  <div class="latemar-map-sidebar-wrapper">
    <div class="latemar-map-container">
      <div class="latemar-map-loader">
        <div class="latemar-loader-spinner"></div>
        <p>Caricamento mappa...</p>
      </div>
      <div class="latemar-map-canvas" style="width:100%;height:100%;"></div>
    </div>
    <!-- sidebar iniettata da JS -->
  </div>

</div><!-- /latemar-map-wrapper -->