<div class="d-flex flex-row mt-2 align-items-center">
    <span class="me-2">{{title}}:</span>
    <div class="d-flex flex-wrap flex-row gap-2 w-100 mh-1" style="min-height: 1em;"
        cdkDropList #selectedList="cdkDropList"
        cdkDropListOrientation="mixed"
        (cdkDropListDropped)="drop($event)"
        [cdkDropListConnectedTo]="[unselectedList]">
        @for (item of selectedItems; track item.id) {
            <div class="badge bg-primary" cdkDrag>{{item.name}}</div>
        }
        @if (selectedItems.length === 0) {
            <div class="badge bg-light text-secondary fst-italic">{{emptyText}}</div>
        }
    </div>
</div>
<div class="mt-2 align-items-center bg-light p-2">
    <div class="d-flex flex-wrap flex-row gap-2 w-100" style="min-height: 1em;"
        cdkDropList #unselectedList="cdkDropList"
        cdkDropListOrientation="mixed"
        (cdkDropListDropped)="drop($event)"
        [cdkDropListConnectedTo]="[selectedList]">
        @for (item of unselectedItems; track item.id) {
            <div class="badge bg-secondary opacity-50" cdkDrag>{{item.name}}</div>
        }
    </div>
</div>
