<div class="ui-panel" (click)="onClick($event)">

  <div class="ui-title" cdkDragHandle>
    <div class="image"><img [src]="'sprites/ships/' + ship.texture +'.png'" alt=""></div>
    <div>{{ ship.name }}</div>
  </div>

  <div class="ui-body">

    <div class="ui-section">
      @if (ship.status == 'traveling') {
        <div>Fliegt nach {{ destination }}</div>
      } @else if (ship.status == 'loading') {
        <div>Lädt Waren</div>
      } @else if (ship.status == 'unloading') {
        <div>Entlädt Waren</div>
      } @else if (ship.status == 'waiting') {
        <div>Wartet auf Abfertigung</div>
      } @else {
        <div>Untätig</div>
      }
      
    </div>

    <div class="ui-section">
      <ul>
        <li class="flex">
          <div>Geschwindigkeit: </div>
          <div>{{ ship.currentSpeed | number:'0.0-0' }} km/s</div>
        </li>
        <li class="flex">
          <div>Max Geschwindigkeit: </div>
          <div>{{ ship.maxSpeed | number:'0.0-0' }} km/s</div>
        </li>
        <li class="flex">
          <div>Beschleunigung: </div>
          <div>{{ ship.acceleration | number:'0.0-0' }}</div>
        </li>
        <li class="flex">
          <div>Frachtraum: </div>
          <div>{{ ship.cargoSize | number:'0.0-0' }} t</div>
        </li>
        <li class="flex">
          <div>Ladegeschwindigkeit: </div>
          <div>{{ ship.loadingSpeed | number:'0.0-2' }} t/s</div>
        </li>
        <li class="flex">
          <div>Balance:</div>
          <div>{{ ship.balance | number:'0.0-2' }} Credits</div>
        </li>
      </ul>
      <div>
        
      </div>
    </div>

    <div class="ui-section">
      <div>📦 Fracht:</div>
      <ul>
        @for (item of cargo; track $index) {
          <li>{{ item.type }}: {{ item.amount | number:'0.0-0' }} => {{ item.target }}</li>
        }
      </ul>
    </div>

    <div class="ui-section">
      <div>🛣️ Aktive Route:</div>
      <div class="flex route">
        @for (item of activeRoute; track $index) {
          <div>{{ item }}</div>
        }
      </div>
    </div>

    
  </div>
  <div class="ui-section flex">
    <button class="button" (click)="sell()" >Verkaufen</button>
    <button class="button" (click)="onClick($event); close();" >Schließen</button>
  </div>
  
</div>