<div class="gpxload-dialog">
  <mat-toolbar style="background-color: transparent">
    <div style="display: flex; width: 100%">
      <div>
        @if(!app.sIsFetching()) {
        <button
          style="width: 85px"
          mat-raised-button
          matTooltip="Load selected resources"
          matTooltipPosition="right"
          [disabled]="!display.loadRoutesOK && !display.loadWaypointsOK && !display.loadTracksOK"
          (click)="load()"
        >
          <mat-icon>file_upload</mat-icon>
          &nbsp;Load
        </button>
        }
      </div>
      <div style="flex: 1 1 auto; text-align: center">Import GPX</div>
      <div style="text-align: right">
        <button
          mat-icon-button
          [disabled]="app.sIsFetching()"
          (click)="this.dialogRef.close(-1);"
        >
          <mat-icon>close</mat-icon>
        </button>
      </div>
    </div>
  </mat-toolbar>

  @if(display.notValid) {
  <div mat-dialog-content>
    <div>
      <b>Invalid GPX Data:</b><br /><br />
      <i
        >Selected file does not contain GPX data or<br />
        does not correctly implement namespaced &lt;extensions&gt;
        attributes.</i
      >
    </div>
  </div>
  } @else {
  <div mat-dialog-content>
    @if (app.sIsFetching()) {
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    } @else{
    <!--valid GPX file-->
    <div class="card-group">
      <div style="display: flex">
        <div>File:</div>
        <div
          style="
            flex: 1 1 auto;
            padding-left: 10px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            text-overflow: ellipsis;
          "
        >
          {{data.fileName}}
        </div>
      </div>
      <mat-divider></mat-divider>
    </div>
    <!-- Waypoints -->
    @if(gpxData.waypoints.length!=0) {
    <div class="card-group">
      <mat-expansion-panel
        [expanded]="display.expand.waypoints"
        (opened)="display.expand.waypoints=true"
        (closed)="display.expand.waypoints=false"
      >
        <mat-expansion-panel-header style="padding: 0 12px">
          <mat-panel-title>
            <mat-icon class="icon-waypoint">place</mat-icon>
            &nbsp;&nbsp;
            <b>Waypoints:</b>
          </mat-panel-title>
          <mat-panel-description>
            <div style="display: flex; width: 100%">
              <span class="pnlSelectedItems">
                ({{display.selCount.waypoints}} of
                {{gpxData?.waypoints.length}})
              </span>
              <span class="pnlSelect">
                <mat-checkbox
                  [indeterminate]="display.someWptChecked"
                  [checked]="display.allWaypointsChecked"
                  [disabled]="gpxData.waypoints.length===0"
                  (change)="checkWpt($event.checked, -1)"
                  (click)="$event.cancelBubble=true"
                  matTooltip="Select all Waypoints"
                  matTooltipPosition="before"
                ></mat-checkbox>
              </span>
            </div>
          </mat-panel-description>
        </mat-expansion-panel-header>

        <div class="list-container-scrollable">
          @for(w of gpxData.waypoints; track w; let i=$index) {
          <div class="item-row">
            <div class="name">{{w.name}}</div>
            <div class="check">
              <mat-checkbox
                [checked]="selWaypoints[i]"
                #wval
                (change)="checkWpt(wval.checked, i)"
                matTooltip="Select Waypoint"
                matTooltipPosition="below"
              >
              </mat-checkbox>
            </div>
          </div>
          }
        </div>
      </mat-expansion-panel>
    </div>
    }

    <!-- Routes -->
    @if(gpxData.routes.length!=0) {
    <div class="card-group">
      <mat-expansion-panel
        [expanded]="display.expand.routes"
        (opened)="display.expand.routes=true"
        (closed)="display.expand.routes=false"
      >
        <mat-expansion-panel-header style="padding: 0 12px">
          <mat-panel-title>
            <mat-icon class="icon-route">directions</mat-icon>
            &nbsp;&nbsp;
            <b>Routes:</b>
          </mat-panel-title>
          <mat-panel-description>
            <div style="display: flex; width: 100%">
              <span class="pnlSelectedItems">
                ({{display.selCount.routes}} of {{gpxData?.routes.length}})
              </span>
              <span class="pnlSelect">
                <mat-checkbox
                  [indeterminate]="display.someRteChecked"
                  [checked]="display.allRoutesChecked"
                  [disabled]="gpxData.routes.length==0"
                  (change)="checkRte($event.checked, -1)"
                  (click)="$event.cancelBubble=true"
                  matTooltip="Select all Routes"
                  matTooltipPosition="before"
                ></mat-checkbox>
              </span>
            </div>
          </mat-panel-description>
        </mat-expansion-panel-header>

        <div class="list-container-scrollable">
          @for(r of gpxData.routes; track r; let i=$index) {
          <div class="item-row">
            <div class="name">{{r.name}}</div>
            <div class="check">
              <mat-checkbox
                matTooltip="Select this Route"
                matTooltipPosition="below"
                [checked]="selRoutes[i]"
                #rval
                (change)="checkRte(rval.checked, i)"
              >
              </mat-checkbox>
            </div>
          </div>
          }
        </div>
      </mat-expansion-panel>
    </div>
    }

    <!-- Tracks -->
    @if(gpxData.tracks.length!=0 && app.featureFlags().resourceTracks) {
    <div class="card-group">
      <mat-expansion-panel
        [expanded]="display.expand.tracks"
        (opened)="display.expand.tracks=true"
        (closed)="display.expand.tracks=false"
      >
        <mat-expansion-panel-header style="padding: 0 12px">
          <mat-panel-title>
            <mat-icon class="icon-track">show_chart</mat-icon>
            &nbsp;&nbsp;
            <b>Tracks:</b>
          </mat-panel-title>
          <mat-panel-description>
            <div style="display: flex; width: 100%">
              <span class="pnlSelectedItems">
                ({{display.selCount.tracks}} of {{gpxData?.tracks.length}})
              </span>
              <span class="pnlSelect">
                <mat-checkbox
                  [indeterminate]="display.someTrkChecked"
                  [checked]="display.allTracksChecked"
                  [disabled]="gpxData.tracks.length==0"
                  (change)="checkTrk($event.checked, -1)"
                  (click)="$event.cancelBubble=true"
                  matTooltip="Select all Tracks"
                  matTooltipPosition="before"
                ></mat-checkbox>
              </span>
            </div>
          </mat-panel-description>
        </mat-expansion-panel-header>

        <div class="list-container-scrollable">
          @for(t of gpxData.tracks; track t; let i=$index) {
          <div class="item-row">
            <div class="name">{{t.name}}</div>
            <div class="check">
              <mat-checkbox
                matTooltip="Select this Track"
                matTooltipPosition="below"
                [checked]="selTracks[i]"
                #tval
                (change)="checkTrk(tval.checked, i)"
              >
              </mat-checkbox>
            </div>
          </div>
          }
        </div>
      </mat-expansion-panel>
    </div>
    } }
  </div>
  }
</div>
