<div class="container p-0">
  <div class="flex-nowrap no-gutters row">
    <a
      class="d-flex p-3 w-100"
      [ngClass]="{ 'cursor-default': isLoading }"
      [routerLink]="[]"
      [queryParams]="{
        dataSource: position?.dataSource,
        positionDetailDialog: true,
        symbol: position?.symbol
      }"
    >
      <div class="d-flex mr-2">
        <gf-trend-indicator
          class="d-flex"
          [isLoading]="isLoading"
          [marketState]="position?.marketState"
          [range]="range"
          [value]="position?.netPerformancePercentage"
        ></gf-trend-indicator>
      </div>
      <div *ngIf="isLoading" class="flex-grow-1">
        <ngx-skeleton-loader
          animation="pulse"
          class="mb-1"
          [theme]="{
            height: '1.2rem',
            width: '12rem'
          }"
        ></ngx-skeleton-loader>
        <ngx-skeleton-loader
          animation="pulse"
          [theme]="{
            height: '1rem',
            width: '8rem'
          }"
        ></ngx-skeleton-loader>
      </div>
      <div *ngIf="!isLoading" class="flex-grow-1 text-truncate">
        <div class="h6 m-0 text-truncate">{{ position?.name }}</div>
        <div class="d-flex">
          <span>{{ position?.symbol | gfSymbol }}</span>
        </div>
        <div class="d-flex mt-1">
          <gf-value
            class="mr-3"
            [colorizeSign]="true"
            [currency]="baseCurrency"
            [locale]="locale"
            [value]="position?.netPerformance"
          ></gf-value>
          <gf-value
            [colorizeSign]="true"
            [isPercent]="true"
            [locale]="locale"
            [value]="position?.netPerformancePercentage"
          ></gf-value>
        </div>
      </div>
      <div class="align-items-center d-flex">
        <ion-icon
          *ngIf="!isLoading"
          class="chevron text-muted"
          name="chevron-forward-outline"
          size="small"
        ></ion-icon>
      </div>
    </a>
  </div>
</div>
