<mat-card class="adf-new-task-layout-card">
    <mat-grid-list cols="1" rowHeight="60px">
        <mat-grid-tile>
            <div class="adf-new-task-heading">{{'ADF_TASK_LIST.START_TASK.FORM.TITLE'|translate}}</div>
        </mat-grid-tile>
    </mat-grid-list>
    <mat-card-content>
        <div class="adf-new-task-layout-card-content">
            <div class="adf-grid-full-width adf-grid-row">
                <mat-form-field class="adf-grid-full-width adf-grid-column">
                    <input matInput
                        class="adf-grid-full-width"
                        placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NAME'|translate}}"
                        [(ngModel)]="startTaskmodel.name"
                        required
                        id="name_id">
                </mat-form-field>
            </div>

            <div class="adf-grid-full-width adf-grid-row">
                <mat-form-field class="adf-grid-full-width adf-grid-column">
                    <textarea
                        matInput
                        class="adf-grid-full-width"
                        placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DESCRIPTION'|translate}}"
                        [(ngModel)]="startTaskmodel.description"
                        rows="1"
                        id="description_id">
                    </textarea>
                </mat-form-field>
            </div>

            <div class="adf-grid-full-width adf-grid-row">
                <div class="adf-grid-column adf-grid-half-width">
                    <div class="adf-grid-full-width adf-grid-row">
                        <mat-form-field class="adf-grid-full-width">
                            <input matInput
                                [matDatepicker]="taskDatePicker"
                                (keydown)="true"
                                (focusout)="onDateChanged($event.srcElement.value)"
                                placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DATE'|translate}}"
                                [(ngModel)]="startTaskmodel.dueDate"
                                id="date_id">
                            <mat-datepicker-toggle matSuffix [for]="taskDatePicker"></mat-datepicker-toggle>
                            <mat-datepicker #taskDatePicker
                                [touchUi]="true"
                                (dateChanged)="onDateChanged($event)">
                            </mat-datepicker>
                            <div class="adf-error-text-container">
                                <div *ngIf="dateError">
                                    <div class="adf-error-text">{{'ADF_TASK_LIST.START_TASK.FORM.DATE.ERROR'|translate}}</div>
                                    <mat-icon class="adf-error-icon">warning</mat-icon>
                                </div>
                            </div>
                        </mat-form-field>
                    </div>
                    <div class="adf-grid-full-width adf-grid-row">
                        <mat-form-field class="adf-grid-full-width">
                            <mat-select placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.FORM'|translate}}" id="form_id" [(ngModel)]="formKey">
                                <mat-option>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NONE'|translate}}</mat-option>
                                <mat-option *ngFor="let form of forms" [value]="form.id">{{ form.name }}</mat-option>
                            </mat-select>
                        </mat-form-field>
                    </div>
                </div>

                <div class="adf-grid-column adf-grid-half-width">
                    <adf-people-selector [(peopleId)]="assigneeId" id="assignee_id"></adf-people-selector>
                </div>
            </div>
        </div>
    </mat-card-content>
    <mat-card-actions>
        <mat-grid-list cols="1" rowHeight="60px">
            <mat-grid-tile>
                <div class="adf-new-task-footer">
                    <button mat-button (click)="onCancel()" id="button-cancle">
                        {{'ADF_TASK_LIST.START_TASK.FORM.ACTION.CANCEL'|translate}}
                    </button>
                    <button color="primary" mat-button [disabled]="!startTaskmodel.name || dateError" (click)="start()" id="button-start">
                        {{'ADF_TASK_LIST.START_TASK.FORM.ACTION.START'|translate}}
                    </button>
                </div>
            </mat-grid-tile>
        </mat-grid-list>
    </mat-card-actions>
</mat-card>

