umts/pvta-multiplatform

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle aria-label="Open the menu" tabindex=1>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title role="heading">Favorites</ion-title>
  </ion-navbar>
</ion-header>

<ion-content text-wrap>
  <ion-item-group *ngIf="alerts?.length > 0">
    <ion-item-divider item role="heading" id="alerts-heading">
      Alerts and Detours {{routes && routes?.length > 0 ? 'For Your Routes' : ''}}
    </ion-item-divider>
    <div role="list" aria-labelledby="alerts-heading">
      <ion-item item-left *ngFor="let alert of alerts">
          <ion-icon text-only name="alert" color="danger" aria-hidden="true" style="margin-right: 10px"></ion-icon>
          {{alert?.Message}}
      </ion-item>
    </div>
  </ion-item-group>
  <ion-item-group>
    <ion-item-divider item id="routes-heading">
      <span role="heading">Your Favorite Routes</span>
      <button ion-button outline item-right (click)="showRouteModal()" aria-label="Edit favorite routes. Opens a popup that won't get keyboard focus, please navigate to the bottom of the page after pressing">
        EDIT
      </button>
    </ion-item-divider>
      <ion-item *ngIf="!routes || routes.length == 0">
        No favorite routes yet!
      </ion-item>
      <ion-list role="list" aria-label="your routes">
        <ion-item-sliding *ngFor="let route of routes">
          <button ion-item (click)="goToRoutePage(route?.RouteId)">
            <ion-row attr.aria-label="Route {{route.RouteAbbreviation}} {{route.GoogleDescription}}">
              <ion-col col-auto [style.color]="'#' + route.Color" style="font-size: 120%; font-weight: bold;" >
              {{route?.RouteAbbreviation}}
              </ion-col>
              <ion-col col-auto>
                {{route?.GoogleDescription}}
              </ion-col>
            </ion-row>
          </button>
          <ion-item-options>
            <button ion-button color="danger" (click)="removeRoute(route)">Delete</button>
          </ion-item-options>
        </ion-item-sliding>
      </ion-list>
    </ion-item-group>
    <ion-item-group>
      <ion-item-divider id="stops-heading">
        <span role="heading">Your Favorite Stops</span>
        <button ion-button outline item-right (click)="showStopModal()" aria-label="Edit favorite stops. Opens a popup that won't get keyboard focus, please navigate to the bottom of the page after pressing">
          EDIT
        </button>
      </ion-item-divider>
      <ion-list role="list" aria-label="your stops">
        <ion-item *ngIf="!stops || stops.length == 0">
          No favorite stops yet!
        </ion-item>
        <ion-item-sliding *ngFor="let stop of stops">
          <button ion-item item-left (click)="goToStopPage(stop.StopId)" attr.aria-label="{{stop.Description}}, stop number {{stop.StopId}}">
            <ion-row>
              <ion-col col-auto>
                <ion-icon name="pin" style="margin-right: 10px" aria-hidden="true"></ion-icon>
              </ion-col>
              <ion-col>
                {{stop.Description}} ({{stop.StopId}})
              </ion-col>
            </ion-row>
          </button>
          <ion-item-options>
            <button ion-button color="danger" (click)="removeStop(stop.StopId)">Delete</button>
          </ion-item-options>
        </ion-item-sliding>
      </ion-list>
    </ion-item-group>
    <ion-item-group *ngIf="trips?.length > 0">
      <ion-item-divider role="heading" aria-label="your trips" id="trips-heading">
        Your Trips
      </ion-item-divider>
      <ion-list role="list">
        <ion-item-sliding *ngFor="let trip of trips">
          <button ion-item item-left (click)="goToTripPage(trip)">
            <ion-icon name="map" aria-hidden="true" style="margin-right: 10px"></ion-icon>
            {{trip.name}}
          </button>
          <ion-item-options>
            <button ion-button color="danger" (click)="deleteTrip(trip)">Delete</button>
          </ion-item-options>
        </ion-item-sliding>
      </ion-list>
    </ion-item-group>
</ion-content>