<div class="ui-panel">
  <div class="ui-title">
    <div class="image"><img [src]="'sprites/planets/sm/'+ planet.image +'.png'" alt=""></div>
    <div>{{ planet.name }}</div>
  </div>

  

  <div class="ui-body">
    <div class="ui-text-secondary" style="padding: 16px;">👥 Bevölkerung: {{ population }} 🚀</div>
    <div class="ui-section">
      <div>Landebuchten: {{ planet.dockCapacity }}</div>
    </div>
    <div class="ui-section">
      <div>🏭 Produktion:</div>
      <ul>
        @for (item of producedItems; track $index) {
          <li>{{ item.type }}: +{{ item.productionRate | number:'0.0-2' }}/s</li>
        }
      </ul>
    </div>
  
    <div class="ui-section">
      <div>📦 Vorräte:</div>
      @for (item of storedItems; track $index) {
        <div class="ui-progress-bar" [ngClass]="item.type.toLowerCase()">
          <div class="progress-fill" [style.width.%]="getFillPercentange(item)">{{ item.type }}: {{ item.amount | number:'0.0-1' }}</div>
        </div>
      }
    </div>

    <div class="ui-section">
      <div>📦 Verbrauch:</div>
      <ul>
        @for (item of consumedItems; track $index) {
          <li>{{ item.type }}: {{ item.demandRate * planet.population | number:'0.0-1' }}/s</li>
        }
      </ul>
    </div>

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

  <div class="ui-section">
    <button class="button" (click)="upgradeHarbour()" >Raumhafen upgraden</button>
    <button class="button">Siedeln</button>
    <button class="button" (click)="close()" >Schließen</button>
  </div>
</div>