<div class="ui-panel">
  <div class="ui-title" cdkDragHandle>
    Raumschiff einsetzen
  </div>

  <div class="ui-section">
    <div>
      <select name="selectship" id="slship" [(ngModel)]="selectedModel">
        <option value="1" selected>Pioneer-01</option>
        <option value="2">Colony Carrier</option>
        <option value="3">Industrial Tanker</option>
      </select>
    </div>
    <div>🚀 Neues Schiff: {{ selectedShip.name }}</div>
    <div style="margin-top: 12px; font-size: 12px;">{{ selectedShip.desciption }}</div>
    <ul>
      <li class="flex">
        <div>Kosten: </div>
        <div>{{ selectedShip.buyCost | number:'0.0-2'}} Credits</div>
      </li>
      <li class="flex">
        <div>Frachtraum: </div>
        <div>{{ selectedShip.cargoSize | number: '0.0-2'}} t</div>
      </li>
      <li class="flex">
        <div>Max Geschwindigkeit: </div>
        <div>{{ selectedShip.maxSpeed | number: '0.0-2'}} km/s</div>
      </li>

      <li class="flex">
        <div>Unterhalt: </div>
        <div>{{ selectedShip.cost | number: '0.0-2'}} Credits</div>
      </li>
    </ul>
  </div>

  <div class="ui-section">
    <div>🛣️ Route festlegen:</div>
    @if (availablePlanets.length == 0) {
      <div style="margin-top: 12px;">
        Um Planeten anfliegen zu können, musst du einen Weltraumhafen bauen.
      </div>
    }
    <div class="flex route-containers">
      <div class="route-column">
        <div class="route-header">Ausgewählte Planeten</div>
        <div class="route-selection" cdkDropList #selected="cdkDropList" 
             [cdkDropListData]="selectedPlanets" 
             [cdkDropListConnectedTo]="[available]" 
             (cdkDropListDropped)="drop($event)">
          @for (planet of selectedPlanets; track planet.name) {
            <div class="planet-option" cdkDrag>
              {{ planet.name }}
            </div>
          }
        </div>
      </div>

      <div class="route-column">
        <div class="route-header">Verfügbare Planeten</div>
        
        <div class="route-selection" cdkDropList #available="cdkDropList" 
             [cdkDropListData]="availablePlanets" 
             [cdkDropListConnectedTo]="[selected]" 
             (cdkDropListDropped)="drop($event)">
          @for (planet of availablePlanets; track planet.name) {
            <div class="planet-option" cdkDrag>
              {{ planet.name }}
            </div>
          }
        </div>
      </div>
    </div>
  </div>

  <div class="ui-section">
    <div>Ausgewählte Route:</div>
    <div class="flex route">
      @for (planet of selectedPlanets; track planet.name) {
        <div>{{ planet.name }}</div>
      }
    </div>
  </div>

  <div class="ui-section flex">
    
    <button class="button" 
            [disabled]="selectedPlanets.length < 2 || !canAffordShip()" 
            (click)="buyShip()">
      Schiff kaufen
    </button> 
    <button class="button" (click)="close()">Abbrechen</button>
  </div>
</div>