<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Jugador</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="containter-title">
    <div class="user_info">
      <div class="avatar"
        style="background: url({{playersService.playerSelected?.image}}); background-size: contain; background-repeat: no-repeat; background-position: center;">
      </div>
      <div>
        <p class="name">{{ playersService.playerSelected.name }}</p>
        <p class="position">{{ playersService.playerSelected.has_one_position?.name }}</p>
      </div>
    </div>
    <ion-icon *ngIf="playersService.playerSelected.instagram"
      (click)="goToInstagram(playersService.playerSelected.instagram)" name="logo-instagram"></ion-icon>
  </div>
  <div class="content">
    <div class="container-title-position">
      <h1 class="title_position">Datos</h1>
    </div>
    <div class="card_rounded">
      <div class="content_player">
        <div class="card_data">
          <span class="title_data">{{ 'players.country' | translate }}</span>
          <span class="content_data">{{ playersService.playerSelected.has_one_countries?.name }}</span>
        </div>
        <div class="card_data">
          <span class="title_data">{{ 'players.age' | translate }}</span>
          <span class="content_data">{{ playersService.playerSelected.age }} años</span>
        </div>
        <div class="card_data">
          <span class="title_data">Dorsal</span>
          <span class="content_data">{{ playersService.playerSelected.number }}</span>
        </div>
      </div>

      <div class="content_player">
        <div class="card_data">
          <span class="title_data">{{ 'players.birth' | translate }}</span>
          <span class="content_data">{{ playersService.playerSelected?.date_of_birth }}</span>
        </div>
        <div class="card_data">
          <span class="title_data">{{ 'players.games' | translate }}</span>
          <span class="content_data">{{ playersService.playerSelected.height }} cm</span>
        </div>
        <div class="card_data">
          <span class="title_data">{{ 'players.goals' | translate }}</span>
          <span class="content_data">{{ playersService.playerSelected.honors }}</span>
        </div>
      </div>
    </div>

    <div class="container-title-position">
      <h1 class="title_position">{{ 'players.biography' | translate }}</h1>
    </div>
    <div class="content_player">
      <div class="card_player" style="width: 100%;">
        <p style="margin-bottom: 0px;">{{ playersService.playerSelected.biography }}</p>
      </div>
    </div>

    <div class="container-title-position">
      <h1 class="title_position">{{ 'players.debut' | translate }}</h1>
    </div>
    <div class="content_player">
      <div class="card_player" style="width: 100%;">
        <p style="margin-bottom: 0px;"><b>Fecha: </b>{{ playersService.playerSelected.date_of_debut }}</p>
        <p style="margin-bottom: 0px;"><b>{{ 'players.rival-debut' | translate }}: </b>{{
          playersService.playerSelected.rival_team_debut }}</p>
      </div>
    </div>

    <div class="container-title-position">
      <h1 class="title_position">{{ 'players.achievements' | translate }}</h1>
    </div>
    <div class="content_player" *ngIf="playersService.playerSelected.achievements">
      <div class="card_player" style="width: 100%; margin-bottom: 24px;">
        <ul>
          <li *ngFor="let item of playersService.playerSelected.achievements.split(',')">{{item}}</li>
        </ul>
      </div>
    </div>
  </div>
</ion-content>