<ng-template #mapContent>
  <app-cesium-map
    [hideSidebar]="true"
    [hideTopbar]="true"
    [showIntroUI]="true"
    [showBlueBackdrop]="false"
    [allowPointerEvents]="isMobileView ? mobileInteractionEnabled : true"
    [hideBrief]="true"
    [transparentBackground]="true"
    [landingMode]="true">
  </app-cesium-map>

  <!-- Tunisia miniature button - links to external map -->
  <a href="http://196.203.106.186/%d8%a7%d9%84%d9%85%d8%ae%d8%b7%d8%b7-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d8%b1%d8%a7%d8%aa%d9%8a%d8%ac%d9%8a-2030/" 
     class="fullscreen-btn" 
     *ngIf="showZoomControls" 
     target="_blank"
     rel="noopener noreferrer"
     aria-label="View fullscreen map" 
     title="View fullscreen map"
     role="button"
     [class.rtl]="currentLanguage === 'ar'"
     style="left: 80px !important;">
    <img src="assets/map.png" alt="Tunisia map" style="object-fit: contain; display: block; width: 50px; height: 50px;">
  </a>
  

  <!-- Zoom controls: positioned outside app-cesium-map so they always sit on top -->
  <div class="iframe-zoom-controls" 
       *ngIf="showZoomControls" 
       [class.rtl]="currentLanguage === 'ar'">
    <button class="zoom-btn" (click)="zoomIn()" aria-label="Zoom in" title="Zoom in">+</button>
    <button class="zoom-btn" (click)="zoomOut()" aria-label="Zoom out" title="Zoom out">-</button>
  </div>

  <!-- Mobile-only 'Click to interact' toggle (top-center) -->
  <button class="mobile-interact-btn" (click)="toggleMobileInteraction()" [class.active]="mobileInteractionEnabled" aria-pressed="{{mobileInteractionEnabled}}">{{ mobileInteractionEnabled ? getCloseInteractionText() : getTapToInteractText() }}</button>

</ng-template>

<ng-container *ngIf="isFullscreen; else inlineMap">
  <div class="fullscreen-overlay" 
       [ngStyle]="{'top.px': navbarHeight, 'height': 'calc(100vh - ' + navbarHeight + 'px)'}">
    <div class="fullscreen-shell" #mapContainer>
      <ng-container *ngTemplateOutlet="mapContent"></ng-container>
    </div>
  </div>
</ng-container>

<ng-template #inlineMap>
  <section class="map-exploration-section transparent-map" #mapContainer>
    <ng-container *ngTemplateOutlet="mapContent"></ng-container>
  </section>
</ng-template>
