<mat-card class="adf-message-card">
    <mat-card-content>
        <div class="adf-no-form-message-container">
            <div class="adf-no-form-message-list">
                <div *ngIf="!isCompleted; else completedMessage" class="adf-no-form-message">
                    <span id="adf-no-form-message">{{'ADF_TASK_LIST.STANDALONE_TASK.NO_FORM_MESSAGE' | translate}}</span>
                </div>
                <ng-template #completedMessage>
                    <div id="adf-completed-form-message" class="adf-no-form-message">
                        <p>{{'ADF_TASK_LIST.STANDALONE_TASK.COMPLETE_TASK_MESSAGE' | translate : {taskName : taskName} }}</p>
                    </div>
                    <div class="adf-no-form-submessage">
                        {{'ADF_TASK_LIST.STANDALONE_TASK.COMPLETE_TASK_SUB_MESSAGE' | translate}}
                    </div>
                </ng-template>
            </div>
        </div>
    </mat-card-content>

    <mat-card-actions class="adf-no-form-mat-card-actions">
        <button mat-button *ngIf="hasAttachFormButton()" id="adf-no-form-attach-form-button" (click)="onShowAttachForm()">{{ 'ADF_TASK_LIST.START_TASK.FORM.LABEL.ATTACHFORM' | translate }}</button>
        <div>
            <button mat-button *ngIf="hasCancelButton()" id="adf-no-form-cancel-button" (click)="onCancelButtonClick()">{{ 'ADF_TASK_LIST.START_TASK.FORM.ACTION.CANCEL' | translate }}</button>
            <button mat-button *ngIf="hasCompleteButton()" id="adf-no-form-complete-button" color="primary" (click)="onCompleteButtonClick()">{{ 'ADF_TASK_LIST.DETAILS.BUTTON.COMPLETE' | translate }}</button>
        </div>
    </mat-card-actions>
</mat-card>