<div class="ui-panel">

  <div class="ui-title" cdkDragHandle>
    <div>Handelsrouten</div>
  </div>

  <div class="ui-body">

    
      
    @if (availableRoutes.length > 0) {
      <div class="ui-section" style="display: flex; flex-direction: column; gap: 4px;">
        <h4>Routen:</h4>
        <div class="flex">
          @for (route of availableRoutes; track $index) {
            <button (click)="selectRoute(route)" class="button" [class.active-button]="selectedRoute == route">Route {{ $index }}</button>
          }
        </div>
        <div>oder: </div>
        <button class="button" (click)="newRoute()">Neue Route erstellen</button>
      </div>
    }
      
    

    <div class="ui-section">
      <h4 matTooltip="Füge Planeten durch anklicken zur Route hinzu">Verfügbare Planeten:</h4>
      <div style="max-height: 100px; overflow: auto;">
        @for(planet of availablePlanets;track planet.name) {

          <button class="button" (click)="addPlanet(planet)" >{{ planet.name }}</button>
        }
      </div>
      <div>
        <h4 matTooltip="Die Planeten werden von oben nach unten der Reihe nach angeflogen.">Route:</h4>
        <div class="ui-section">

          <div cdkDropList (cdkDropListDropped)="drop($event)" class="ui-section" >
            @for(planet of selectedPlanets; track $index) {
              <div class="flex">
                <div cdkDrag>{{ planet.name }}</div>
                <button class="button" (click)="remove(planet)" >X</button>
              </div>
            }
          </div>
        </div>
      </div>
    </div>


  </div>

  <button class="button" (click)="save()">Speichern</button>
</div>