<p class="mb-3"><em>{{ categoryLabel }}</em></p>
<div class="row mb-1">
    <div class="col pr-1">
        <button (click)="selectAll()" [disabled]="isAllSelected"
            class="btn btn-sm btn-block btn-outline-secondary letter-spacing">Select All</button>
    </div>
    <div class="col pl-1">
        <button (click)="unselectAll()" [disabled]="isAllUnselected"
            class="btn btn-sm btn-block btn-outline-secondary letter-spacing">Unselect All</button>
    </div>
</div>
<div class="selectbox p-0">
    <div *ngFor="let attribute of getAttributeListSortedByDisplay()">
        <div *ngIf="isSelected(attribute.id)">
            <button class="btn btn-block text-left py-1 m-0 bg-theme-color rounded-0"
                (click)="toggleSelection(attribute.id)">
                <i class="fas fa-fw fa-check"></i> {{ attribute.form_label }}
            </button>
        </div>
        <div *ngIf="!isSelected(attribute.id)">
            <button class="btn btn-block text-left py-1 m-0 rounded-0" (click)="toggleSelection(attribute.id)">
                <i class="far fa-fw fa-square text-secondary"></i> {{ attribute.form_label }}
            </button>
        </div>
    </div>
</div>