<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">{{ "traits.empty" | translate }}</div>
    }
  </div>
  <div class="footer">
    <ui-button
      [color]="'green'"
      [type]="'add'"
      style="width: 80%"
      (click)="openModal(false)"
    >
    </ui-button>
  </div>
</div>
