<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 [innerHTML]="trait.shortDescription"></p>
    </div>
    }@empty{
    <div class="empty-list">Noch keine Eigenschaft hinzugefügt</div>
    }
  </div>
  <div class="footer">
    <ui-button [color]="'green'" style="width: 80%" (click)="openModal(false)">
      Hinzufügen
    </ui-button>
  </div>
</div>
