<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-back-button slot="start"></ion-back-button>
    <ion-title class="ion-text-center">{{ 'players.players' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-segment (ionChange)="changedCategory($event)" mode="md" [value]="comms">
    <div class="segmentCategory">
      <ion-segment-button class="segmentSubCategory" *ngFor="let category of playersService.allCategories"
        [value]="category.id">
        {{ category.name }}
      </ion-segment-button>
    </div>
  </ion-segment>

  <div [ngSwitch]="comms" class="content">

    <div *ngFor="let category of playersService.allCategories">
      <div *ngSwitchCase="category.id">

        <div *ngFor="let position of playersService.currentPositions">
          <div class="container-title-position">
            <h1 class="title_position">{{ position.name }}</h1>
          </div>

          <ion-grid>
            <ion-row>
              <ion-col size="1" class="filters ion-no-padding ion-no-margin" *ngIf="position.scroll > 0">
                <div class="player-row">
                  <ion-col class="col-with-arrow" no-padding col-1 (click)="leftScroll($event, position)">
                    <ion-icon name="chevron-back-outline"></ion-icon>
                  </ion-col>
                </div>
              </ion-col>
              <ion-col [size]="(position.scroll == 0 || position.disabledScrollRight) ? 11 : 10"
                class="ion-no-padding ion-no-margin">
                <div class="container-grid">
                  <div class="grid2x2">
                    <div *ngFor="let player of position.players" class="box box1">
                      <div>
                        <a (click)="goToDetailPlayer(player)">
                          <div class="card">
                            <div class="card_image">
                              <img class="photo-player" src="{{ player.image }}?_dc={{ time }}"
                                onerror="if (this.src != 'error.jpg') this.src = '../../assets/img/default_profile.png';" />
                              <div class="card_info title-white">
                                <div class="dorsal">
                                  <p class="text-card">{{ player.number }}</p>
                                </div>
                                <div class="name">
                                  <p class="text-card text">{{ player.name }}</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </ion-col>
              <ion-col size="1" class="filters ion-no-padding ion-no-margin"
                *ngIf="position.players.length > 2 && !position.disabledScrollRight">
                <div class="player-row col-with-arrow">
                  <ion-col class="col-with-arrow" no-padding col-1 (click)="rightScroll($event, position)">
                    <ion-icon name="chevron-forward-outline"></ion-icon>
                  </ion-col>
                </div>
              </ion-col>
            </ion-row>
          </ion-grid>
        </div>
      </div>
    </div>
  </div>
  <br />
  <br />

</ion-content>