@if (popup) {
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>
        <ion-icon name="photos" style="margin-right: 10px"></ion-icon>
        <ion-label>{{i18n.texts.pages.photos_popup.title}}</ion-label>
      </ion-title>
    </ion-toolbar>
  </ion-header>
}
<div style="flex: 1 1 100%; display:flex; flex-direction: column; overflow: hidden">

  @if (loaded) {
    @if (tabs.length > 1) {
      <ion-segment [value]="tabIndex" color="secondary" (ionChange)="setTab($event.detail.value)">
      @for (tab of tabs; track $index) {
        <ion-segment-button [value]="$index"><div class="tab-long-text">{{tab}}</div></ion-segment-button>
      }
      </ion-segment>
    }
    @if (photos.length === 0) {
      <div class="no-photo">{{i18n.texts.pages.trail.no_photo_message}}</div>
    } @else {
      @if (canEdit) {
        <div class="selection">
          <ion-checkbox [checked]="nbSelected === photos.length" [indeterminate]="nbSelected > 0 && nbSelected < photos.length" (ionChange)="setAllSelected($event.detail.checked)"></ion-checkbox>
          <div class="nb-selected">
            {{nbSelected}} / {{photos.length}} {{nbSelected > 1 ? i18n.texts.pages.photos_popup.selected_plural : i18n.texts.pages.photos_popup.selected_single}}
          </div>
          @if (nbSelected > 0) {
            <div style="margin: 0 5px">:</div>
            <ion-button size="small" color="danger" (click)="deleteSelected()">{{i18n.texts.buttons.delete}}</ion-button>
          }
        </div>
      }
      <div class="photos" style="flex: 1 1 100%; overflow-y: auto;">
        @for (photoWithInfo of photos; track photoWithInfo.photo.uuid + photoWithInfo.photo.owner) {
          <div [ngStyle]="{'width': (maxWidth + 30) + 'px'}" class="photo-container" [ngClass]="{'selected': photoWithInfo.selected}">
            @if (canEdit) {
              <div style="display: flex; flex-direction: column; align-items: center; align-self: stretch;">
                <ion-checkbox [checked]="photoWithInfo.selected" (ionChange)="setSelected(photoWithInfo, $event.detail.checked)"></ion-checkbox>
                <div style="flex: 1 1 100%; display: flex; flex-direction: column; align-items: center; justify-content: center">
                  @if ($index > 0) {
                    <ion-button shape="round" size="small" fill="clear" color="dark" (click)="moveBack($index)">
                      <ion-icon slot="icon-only" name="arrow-up"></ion-icon>
                    </ion-button>
                  }
                  @if ($index < photos.length - 1) {
                    <ion-button shape="round" size="small" fill="clear" color="dark" (click)="moveForward($index)">
                      <ion-icon slot="icon-only" name="arrow-down"></ion-icon>
                    </ion-button>
                  }
                </div>
              </div>
            }
            <div class="photo-and-description">
              <app-photo [photo]="photoWithInfo.photo" [maxWidth]="maxWidth" [maxHeight]="maxHeight" (click)="openSlider($index)" (blobSize)="setBlobSize(photoWithInfo, $event)" [loadWhenVisible]="true"></app-photo>
              @if (photoWithInfo.editing === null) {
                <div class="description" (click)="editDescription(photoWithInfo)" [ngClass]="{'editable-text': canEdit}">
                  @if (photoWithInfo.photo.description.trim().length === 0) {
                    <span class="no-description">{{i18n.texts.pages.trail.photo_no_description}}</span>
                  } @else {
                    {{photoWithInfo.photo.description}}
                  }
                </div>
              } @else {
                <ion-textarea #descriptionEditor
                  [maxlength]="100"
                  [autoGrow]="true"
                  [value]="photoWithInfo.editing"
                  (ionChange)="descriptionChanged(photoWithInfo, $event.detail.value)"
                  (ionInput)="descriptionChanging(photoWithInfo, $event.detail.value)"
                  (ionBlur)="exitEditDescription(photoWithInfo)"
                ></ion-textarea>
              }
              <div class="photo-footer">
                <div class="metadata-container {{metaColumns}}">
                  @if (photoWithInfo.photo.dateTaken) {
                    <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">{{i18n.timestampToDateTimeString(photoWithInfo.photo.dateTaken)}}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  }
                  @if (photoWithInfo.blobSize) {
                    <div class="metadata-item-container">
                      <div class="metadata-item">
                        <ion-icon name="file"></ion-icon>
                        <div class="metadata-content">
                          <div class="metadata-value">
                            <div class="metadata-primary">{{i18n.sizeToString(photoWithInfo.blobSize)}}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  }
                  @if (photoWithInfo.photo.latitude) {
                    <div class="metadata-item-container force-one-column">
                      <div class="metadata-item">
                        <ion-icon name="location"></ion-icon>
                        <div class="metadata-content">
                          <div class="metadata-value">
                            <div class="metadata-primary">{{i18n.coordToString(photoWithInfo.photo.latitude!)}} {{i18n.coordToString(photoWithInfo.photo.longitude!)}}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  }
                </div>
                <div class="position-on-map">
                  @if (photoWithInfo.positionOnMap) {
                    <ion-icon name="checkmark" color="success"></ion-icon>
                    <span>{{ i18n.texts.pages.photos_popup.position.available }}</span>
                  } @else {
                    <ion-icon name="cross" color="danger"></ion-icon>
                    <span>{{ i18n.texts.pages.photos_popup.position.not_available }}</span>
                  }
                  @if (canPositionOnMap) {
                    <ion-button fill="clear" size="small" color="tertiary" (click)="positionOnMap(photoWithInfo.photo)">
                      <ion-icon slot="icon-only" name="center-on-location"></ion-icon>
                    </ion-button>
                    <ion-button fill="clear" size="small" color="danger" (click)="clearPosition(photoWithInfo)" [disabled]="!photoWithInfo.positionOnMap && (photoWithInfo.photo.latitude === undefined || photoWithInfo.photo.longitude === undefined)">
                      <ion-icon slot="icon-only" name="trash"></ion-icon>
                    </ion-button>
                  }
                </div>
              </div>
            </div>
          </div>
        }
      </div>

    }
  }

</div>
<ion-footer>
  <ion-toolbar color="footer">
    <ion-buttons slot="end">
      @if (canAdd) {
        <ion-button color="success" (click)="addPhotos(false)" [disabled]="!loaded || photos.length >= 25">
          <ion-icon name="photos" slot="start"></ion-icon>
          <span>{{i18n.texts.pages.photos_popup.add_photos_buttons}}</span>
        </ion-button>
        @if (canTakePhoto) {
          <ion-button color="success" (click)="addPhotos(true)" [disabled]="!loaded || photos.length >= 25">
            <ion-icon name="camera" slot="start"></ion-icon>
            <span>{{i18n.texts.pages.trail.take_photo}}</span>
          </ion-button>
        }
      }
      @if (popup) {
        <ion-button (click)="close()">{{i18n.texts.buttons.close}}</ion-button>
      }
    </ion-buttons>
  </ion-toolbar>
</ion-footer>