<div class="adf-checklist-control">
    <mat-chip-list id="checklist-label">
        <span class="activiti-label">{{ 'ADF_TASK_LIST.DETAILS.LABELS.CHECKLIST' | translate }}</span>
        <mat-chip class="adf-process-badge" color="accent" selected="true">{{checklist?.length}}</mat-chip>
    </mat-chip-list>


    <button mat-icon-button *ngIf="!readOnly" matTooltip="Add a checklist" [matTooltipPosition]="'before'" id="add-checklist" class="adf-add-to-checklist-button" (click)="showDialog()">
        <mat-icon>add</mat-icon>
    </button>
</div>

<div class="adf-checklist-menu-container" *ngIf="checklist?.length > 0">
    <mat-chip-list class="mat-chip-list-stacked">
        <mat-chip id="check-{{check.id}}" class="adf-checklist-chip" *ngFor="let check of checklist">
            <span>{{check.name}}</span>
            <button  *ngIf="!readOnly" mat-icon-button type="button" class="adf-checklist-cancel-button" (click)="delete(check.id)">
                <mat-icon id="remove-{{check.id}}" matChipRemove>cancel</mat-icon>
            </button>
        </mat-chip>
    </mat-chip-list>

</div>
<div *ngIf="checklist?.length === 0" id="checklist-none-message">
    {{ 'ADF_TASK_LIST.DETAILS.CHECKLIST.NONE' | translate }}
</div>

<ng-template #dialog>
    <div class="adf-checklist-dialog" id="checklist-dialog">
        <h4 matDialogTitle id="add-checklist-title">New Check</h4>
        <mat-dialog-content>
            <mat-form-field>
                <input matInput placeholder="Name" [(ngModel)]="taskName" id="checklist-name"  data-automation-id="checklist-name">
            </mat-form-field>
        </mat-dialog-content>
        <mat-dialog-actions class="adf-checklist-dialog-actions">
            <button mat-button type="button" id="close-check-dialog" (click)="cancel()">Cancel</button>
            <button mat-button type="button" id="add-check" (click)="add()">Add Checklist</button>
        </mat-dialog-actions>
    </div>
</ng-template>
