<div class="trait-box">
  <div cdkDropList class="item-list" (cdkDropListDropped)="drop($event)">
    <!--  ITEMS -->
    @for(trait of traits; let index = $index; track trait){
    <div class="item" (click)="openDetailsPanel(index)" cdkDrag>
      <div class="name">{{ trait.name }}</div>
      <p>{{ trait.shortDescription }}</p>
    </div>
    }@empty{
    <div class="empty-list">Noch keine Eigenschaft hinzugefügt</div>
    }
  </div>
  <!-- MODAL BUTTON -->
  <div class="footer">
    <button (click)="openModal(false)">Hinzufügen</button>
  </div>
</div>
