<ion-header class="ion-no-border">
  <ion-toolbar class="bg-gradient">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/home" color="secondary"></ion-back-button>
    </ion-buttons>
    <ion-title class="outfit-font">Gestione Playlist</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="savePlaylist()" [disabled]="localSongs.length === 0">
        <ion-icon slot="icon-only" name="save-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="bg-gradient">
  <div class="ion-padding">
    <div class="header-info glass ion-margin-bottom" *ngIf="localSongs.length > 0">
      <p>Trascina i canti per riordinarli. Una volta finito puoi salvare la playlist.</p>
    </div>

    <div cdkDropList class="song-list" (cdkDropListDropped)="drop($event)">
      <div class="song-item glass ion-margin-bottom" *ngFor="let song of localSongs" cdkDrag>
        <div class="drag-handle" cdkDragHandle>
          <ion-icon name="reorder-two-outline"></ion-icon>
        </div>
        <div class="song-info">
          <span class="canto-number">{{ song.id.startsWith('my_') ? getMySongNumber(song) : song.id_canti }}</span>
          <span class="song-title">
            <span *ngIf="getCommunitySongNumber(song)" style="color: var(--ion-color-secondary); font-weight: 600; margin-right: 6px;">{{ getCommunitySongNumber(song) }}</span>{{ song.titolo }}
          </span>
        </div>
        <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
      </div>
    </div>

    <div *ngIf="localSongs.length === 0" class="empty-state ion-text-center">
      <ion-icon name="musical-notes-outline" class="large-icon"></ion-icon>
      <p>Nessun canto selezionato.</p>
      <ion-button routerLink="/home" fill="outline" color="secondary" class="ion-margin-top">
        Torna alla Home
      </ion-button>
    </div>
  </div>

</ion-content>
