<div class="geojsonload-dialog">
  <mat-toolbar style="background-color: transparent">
    <span class="dialog-icon"><mat-icon>public</mat-icon></span>
    <span style="flex: 1 1 auto; text-align: center">Load GeoJSON</span>
    <span style="text-align: right">
      <button mat-icon-button (click)="this.dialogRef.close(-1);">
        <mat-icon>close</mat-icon>
      </button>
    </span>
  </mat-toolbar>

  @if(display.notValid) {
  <div>
    <div mat-dialog-content>
      <b>Invalid GeoJSON Data:</b><br /><br />
      <i
        >Selected file does not contain valid GeoJSON data or<br />
        does not define a valid FeatureCollection. </i
      ><br />
    </div>
    <div mat-dialog-actions align="center">
      <button mat-raised-button (click)="app.showHelp('geojson')">
        <mat-icon>help</mat-icon>
        Help
      </button>
    </div>
  </div>
  } @else {
  <div mat-dialog-content>
    <!--valid GeoJSON file-->
    <div class="card-group">
      <div class="card-group-title">
        <div style="display: flex; flex-wrap: wrap">
          <div style="flex: 1 1 auto">{{data.fileName}}</div>
        </div>
      </div>
    </div>

    <!-- Waypoints -->
    @if(geoData.waypoints.length !== 0) {
    <div class="card-group">
      <mat-card>
        <mat-card-content>
          <div class="pnlRow">
            <div class="pnlGeoType">
              <b>Point:</b>
              &nbsp;
            </div>
            <div class="pnlArrow">
              <mat-icon>arrow_forward</mat-icon>
            </div>
            <div class="pnlSKType">
              <mat-icon class="icon-waypoint">place</mat-icon>
              <b>Waypoints:</b>
              &nbsp;({{geoData?.waypoints.length}})
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
    }

    <!-- Routes -->
    @if(geoData.routes.length !== 0) {
    <div class="card-group">
      <mat-card>
        <mat-card-content>
          <div class="pnlRow">
            <div class="pnlGeoType">
              <b>LineString:</b>
              &nbsp;
            </div>
            <div class="pnlArrow">
              <mat-icon>arrow_forward</mat-icon>
            </div>
            <div class="pnlSKType">
              <mat-icon class="icon-route">directions</mat-icon>
              <b>Routes:</b>
              &nbsp;({{geoData?.routes.length}})
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
    }

    <!-- Tracks -->
    @if(geoData.tracks.length!=0 && app.featureFlags().resourceTracks) {
    <div class="card-group">
      <mat-card>
        <mat-card-content>
          <div class="pnlRow">
            <div class="pnlGeoType">
              <b>MultiLineString:</b>
              &nbsp;
            </div>
            <div class="pnlArrow">
              <mat-icon>arrow_forward</mat-icon>
            </div>
            <div class="pnlSKType">
              <mat-icon class="icon-track">show_chart</mat-icon>
              <b>Tracks:</b>
              &nbsp;({{geoData?.tracks.length}})
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
    }

    <!-- Regions -->
    @if(geoData.regions.length !== 0) {
    <div class="card-group">
      <mat-card>
        <mat-card-content>
          <div class="pnlRow">
            <div class="pnlGeoType">
              <b>Polygon:</b>
              &nbsp;
            </div>
            <div class="pnlArrow">
              <mat-icon>arrow_forward</mat-icon>
            </div>
            <div class="pnlSKType">
              <mat-icon>tab_unselected</mat-icon>
              <b>Regions:</b>
              &nbsp;({{geoData?.regions.length}})
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
    }

    <div mat-dialog-actions align="center">
      <button
        mat-raised-button
        matTooltip="Load features"
        matTooltipPosition="below"
        (click)="load()"
      >
        <mat-icon>file_upload</mat-icon>
        &nbsp;Load
      </button>
    </div>
  </div>
  }
</div>
