<div *ngIf="!disabled">
    <of-error-message [error]="error$ | async" [closable]="false"></of-error-message>
    <of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
    <p-panel #content [showHeader]="false" class="block-panel">
        <div class="ui-g" dir="rtl">
            <button pButton type="button" class="ui-button-secondary ui-button-width-fit ui-s-button" label="Unselect All" style="margin-bottom: 3px;"
                (click)="onUnselectAll()"></button>
            <button pButton type="button" class="ui-button-secondary ui-button-width-fit ui-s-button" label="Select All" style="margin-bottom: 3px;"
                (click)="onSelectAll()"></button>
        </div>

        <p-table selectionMode="multiple" [scrollable]="true" scrollHeight="200px" [value]="metaCrawlers" [(selection)]="includeServices"
            dataKey="id" (onRowSelect)="onSelect($event.data)" (onRowUnselect)="onUnselect($event.data)">
            <ng-template pTemplate="body" let-rowData let-columns="columns">
                <tr [pSelectableRow]="rowData">
                    <!-- <td>
                        <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
                    </td> -->
                    <td>
                        <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
                        {{rowData.name}}
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </p-panel>
</div>