@if (trail) {
  <div class="trail-name-row">
    @if (selectable) {
      <ion-checkbox class="trail-checkbox" [checked]="selected" (ionChange)="setSelected($event.detail.checked)" (click)="$event.stopPropagation()"></ion-checkbox>
    }
    @if (navigationCount && navigationIndex !== undefined) {
      <div class="navigation">
        <ion-button size="small" fill="clear" color="dark" (click)="navigationPrevious()">
          <ion-icon slot="icon-only" name="chevron-left"></ion-icon>
        </ion-button>
        <span>{{navigationIndex + 1}} / {{navigationCount}}</span>
        <ion-button size="small" fill="clear" color="dark" (click)="navigationNext()">
          <ion-icon slot="icon-only" name="chevron-right"></ion-icon>
        </ion-button>
      </div>
    }
    @if (auth.auth) {
      <ion-button class="my-selection" color="my-selection" size="small" fill="clear" (click)="toggleMySelection(); $event.stopPropagation();">
        <ion-icon slot="icon-only" [name]="meta.isInMySelection ? 'star-filled' : 'star-empty'"></ion-icon>
      </ion-button>
    }
    <div class="trail-name" [ngClass]="{'nowrap': hasFixedHeight, 'selectable': selectable}" long-press (longPressEvent)="trailNamePressed()">
      @if (openUrl) {
        <a href="{{ openUrl }}" target="_blank" (click)="$event.stopPropagation(); $event.preventDefault(); openTrail();">{{ meta.name }}</a>
      } @else {
        <span (click)="$event.stopPropagation(); $event.preventDefault(); openTrail();">{{ meta.name }}</span>
      }
    </div>
    @if (publicTrailUuid) {
      <ion-button class="public-trail-button" size="small" fill="clear" color="success" (click)="openPublicTrail()">
        <ion-icon name="web" slot="icon-only"></ion-icon>
      </ion-button>
    }
    @if (trailLink) {
      <ion-button class="trail-link-button" size="small" fill="clear" color="success" (click)="openTrailLink()">
        <ion-icon name="link" slot="icon-only"></ion-icon>
      </ion-button>
    }
    @if (external?.oscmSymbol; as symbol) {
      @let svg = generateRouteSymbol(symbol);
      @if (svg) {
        <div class="ocsm-symbol" [innerHTML]="svg"></div>
      }
    }
    @if (!hideMenu) {
      <ion-button class="trail-menu-button" size="small" fill="clear" color="dark" (click)="openMenu($event)">
        <ion-icon name="item-menu" slot="icon-only"></ion-icon>
      </ion-button>
    }
  </div>
}
@if (load$.value) {
  <div class="trail-tags-row" [ngClass]="{'nowrap': hasFixedHeight}">
    @for (tag of tagsNames; track tag) {
      <div class="tag">{{tag}}</div>
    }
  </div>
  @if (external && external.rating !== undefined) {
    <app-rate [rate]="external.rating" [nbRates]="external.nbRates"></app-rate>
  }

  <div [ngStyle]="{display: track$.value ? '' : 'none'}" class="inner-metadata-container" [ngClass]="{'smaller': hasFixedHeight && (tagsNames.length > 0 || external?.rating !== undefined), 'has-photo': photoEnabled && photos.length > 0, 'compact': photoEnabled && photos.length === 0}">
    @if (meta.dateString || meta.location) {
      @if (meta.dateString) {
        <div class="metadata-item-container">
          <div class="metadata-item">
            <ion-icon name="date"></ion-icon>
            <div class="metadata-content">
              <div class="metadata-value">
                <div class="metadata-primary">{{ meta.dateString }}</div>
              </div>
            </div>
          </div>
        </div>
      }
      @if (meta.location || alwaysShowLocation) {
        <div class="metadata-item-container">
          <div class="metadata-item nowrap">
            <ion-icon name="location"></ion-icon>
            <div class="metadata-content">
              <div class="metadata-value">
                <div class="metadata-primary trail-location">{{ meta.location }}</div>
              </div>
            </div>
          </div>
        </div>
      }
    }
    @if (photoEnabled && photoCanBeOnLeft) {
      <div class="metadata-with-photos photo-left">
        @if (photos.length > 0) {
          <div class="photos">
            <app-photos-slider #slider [photos]="photos" [width]="100" [height]="85" [preLoadNext]="false" (click)="$event.stopPropagation(); openPhotos(slider);"></app-photos-slider>
          </div>
        }
        <div class="metadata" [ngClass]="{'with-photos': photos.length > 0}">
          <ng-container *ngTemplateOutlet="metadata"></ng-container>
        </div>
      </div>
    } @else if (!photoEnabled && smallMapEnabled) {
      <div class="metadata-with-photos {{photoCanBeOnLeft ? 'photo-left' : 'photo-block'}}">
        @if (fullTrack) {
          <div class="photos">
            <app-trail-small-map [track]="fullTrack" [width]="photoCanBeOnLeft ? 100 : 140" [height]="85"></app-trail-small-map>
          </div>
        }
        <div class="metadata with-photos">
          <ng-container *ngTemplateOutlet="metadata"></ng-container>
        </div>
      </div>
    } @else if (photoEnabled && !photoCanBeOnLeft) {
      <div class="metadata-with-photos photo-block">
        <div class="metadata">
          <ng-container *ngTemplateOutlet="metadata"></ng-container>
        </div>
        @if (photos.length > 0) {
          <div class="photos">
            <app-photos-slider #slider [photos]="photos" [width]="140" [height]="85" [preLoadNext]="false" (click)="$event.stopPropagation(); openPhotos(slider);"></app-photos-slider>
          </div>
        }
      </div>
    } @else {
      <ng-container *ngTemplateOutlet="metadata"></ng-container>
    }
  </div>
  @if (!track$.value) {
    <ion-spinner name="dots"></ion-spinner>
  }
  @if (trail && enableShowOnMap) {
    <div class="show-on-map">
      <ion-button size="small" fill="clear" color="secondary" (click)="showOnMap.emit(trail); $event.stopPropagation()">
        <ion-icon name="search-map" slot="icon-only"></ion-icon>
      </ion-button>
    </div>
  }
} @else {
  <div class="not-loaded"></div>
}
<ng-template #metadata>
  <div id="track-metadata-{{id}}"></div>
  @if (meta.loopTypeString || meta.activityString) {
    @if (meta.loopTypeString) {
      <div class="metadata-item-container metadata-content-small">
        <div class="metadata-item">
          <ion-icon [name]="meta.loopTypeIconString"></ion-icon>
          <div class="metadata-content">
            <div class="metadata-value">
              <div class="metadata-primary">{{ meta.loopTypeString }}</div>
            </div>
          </div>
        </div>
      </div>
    }
    @if (meta.activityString) {
      <div class="metadata-item-container metadata-content-small">
        <div class="metadata-item">
          <ion-icon [name]="meta.activityIconString"></ion-icon>
          <div class="metadata-content">
            <div class="metadata-value">
              <div class="metadata-primary">{{ meta.activityString }}</div>
            </div>
          </div>
        </div>
      </div>
    }
    @if ((!meta.loopTypeString || !meta.activityString) && photos.length === 0) {
      <div class="metadata-item-container">
        <div class="metadata-item">
        </div>
      </div>
    }
  }
</ng-template>