@if (trails.trails.length > 1) {
  <ion-segment [value]="selectedTrailIndex" color="secondary" (ionChange)="setTab($event.detail.value)">
    @for (trail of trails.trails; track $index) {
      <ion-segment-button [value]="$index">
        <div class="tab-long-text">
          @if (trail.recording) {
            {{ i18n.texts.trace_recorder.notif_message }}
          } @else {
            {{ trail.trail.name }}
          }
        </div>
      </ion-segment-button>
    }
  </ion-segment>
}
@if (selectedTrail) {
  <div class="waypoints-container">
    @if (selectedTrail.hasBreaks) {
      <div class="show-breaks">
        <ion-checkbox labelPlacement="end"
          [checked]="selectedTrail.showBreaks"
          (ionChange)="selectedTrail.showBreaks = $event.detail.checked"
          [disabled]="trails.showBreaksOnMapLocked"
        >{{i18n.texts.pages.trail.show_breaks}}</ion-checkbox>
      </div>
    }
    @for (wp of selectedTrail.wayPoints; track $index) {
      @if (!wp.computed.breakPoint || selectedTrail.showBreaks) {
        <ng-container *ngTemplateOutlet="waypointTemplate; context: {wp: wp, isArrival: wp.computed.isArrival && !wp.computed.isDeparture, img: selectedTrail.wayPointsImages[$index], track: selectedTrail.track, isRecording: selectedTrail.recording}"></ng-container>
      }
    }
    @if (selectedTrail.wayPointDepartureAndArrival) {
      <ng-container *ngTemplateOutlet="waypointTemplate; context: {wp: selectedTrail.wayPointDepartureAndArrival, isArrival: true, img: selectedTrail.wayPointsImages[selectedTrail.wayPoints.length], track: selectedTrail.track, isRecording: selectedTrail.recording}"></ng-container>
    }
  </div>
}
<ng-template #waypointTemplate let-wp="wp" let-arrival="isArrival" let-img="img" let-track="track" let-isRecording="isRecording">
  <div class="waypoint"
    (mouseover)="highlightWaypoint.emit({wp: wp.computed, click: false})"
    (mouseenter)="highlightWaypoint.emit({wp: wp.computed, click: false})"
    (mouseleave)="unhighlightWaypoint.emit({wp: wp.computed, force: false})"
    (click)="toogleHighlightWayPoint(wp.computed)"
    [ngClass]="{'highlighted': trails.highlightedWayPoint === wp.computed}"
  >
    <div class="waypoint-header">
      <div class="waypoint-anchor">
        <img [src]="img" width="40" height="40">
      </div>
      <div class="waypoint-info-section">
        <div class="waypoint-info">
          <div class="waypoint-info-title">{{i18n.texts.way_points.position}}</div>
          <div class="waypoint-info-value small">{{i18n.coordToString(wp.computed.wayPoint.point.pos.lat)}}<br/>{{i18n.coordToString(wp.computed.wayPoint.point.pos.lng)}}</div>
        </div>
        <div class="waypoint-info">
          <div class="waypoint-info-title">{{i18n.texts.way_points.altitude}}</div>
          <div class="waypoint-info-value">{{wp.computed.altitude !== undefined ? i18n.elevationToString(wp.computed.altitude) : '?'}}</div>
        </div>
        @if (arrival || !wp.isDeparture) {
          <div class="waypoint-info">
            <div class="waypoint-info-title">{{i18n.texts.way_points.distance}}</div>
            <div class="waypoint-info-value">{{arrival && wp.computed.isDeparture ? i18n.distanceToString(track.metadata?.distance) : (wp.computed.distanceFromDeparture !== undefined ? i18n.distanceToString(wp.computed.distanceFromDeparture) : '?')}}</div>
          </div>
          <div class="waypoint-info">
            <div class="waypoint-info-title">{{i18n.texts.way_points.time}}</div>
            <div class="waypoint-info-value">{{arrival && wp.computed.isDeparture ? i18n.durationToString(track.metadata?.duration) : (wp.computed.timeSinceDeparture !== undefined ? i18n.durationToString(wp.computed.timeSinceDeparture) : '?')}}</div>
          </div>
        }
        @if (wp.computed.breakPoint) {
          <div class="waypoint-info">
            <div class="waypoint-info-title">{{i18n.texts.way_points.duration}}</div>
            <div class="waypoint-info-value">{{i18n.durationToString(wp.computed.breakPoint.duration)}}</div>
          </div>
        }
      </div>
      @if ((editTools || isRecording) && !wp.computed.breakPoint) {
        <div class="waypoint-actions">
          @if (!wp.computed.isDeparture && !wp.computed.isComputedOnly) {
            <ion-button fill="clear" shape="round" size="small" color="danger" (click)="$event.preventDefault(); $event.stopPropagation(); removeWaypoint(wp.computed);">
              <ion-icon slot="icon-only" name="trash"></ion-icon>
            </ion-button>
          }
          @if (!(wp.computed.isDeparture && wp.computed.isArrival && arrival)) {
            <ion-button fill="clear" shape="round" size="small" color="secondary" (click)="$event.preventDefault(); $event.stopPropagation(); editWaypoint(wp.computed);">
              <ion-icon slot="icon-only" name="edit"></ion-icon>
            </ion-button>
          }
        </div>
      }
    </div>
    <div class="waypoint-content">
      @if (!wp.computed.breakPoint && (!arrival || !wp.computed.isDeparture)) {
        <div class="waypoint-name">
          <app-text [text]="wp.computed.wayPoint.name" [lang]="lang" [translations]="wp.computed.wayPoint.nameTranslations" [showSource]="showSource"></app-text>
        </div>
        <div class="waypoint-description">
          <app-text [text]="wp.computed.wayPoint.description" [lang]="lang" [translations]="wp.computed.wayPoint.descriptionTranslations" [showSource]="showSource"></app-text>
        </div>
      }
    </div>
    @if (wp.photos.length > 0 && (!arrival || !wp.computed.isDeparture)) {
      <div class="waypoint-photos">
        <app-photos-slider #slider [photos]="wp.photos" [width]="150" [height]="100" (click)="$event.stopPropagation(); openPhotos(wp.photos, slider);"></app-photos-slider>
      </div>
    }
  </div>
</ng-template>