<button md-raised-button (click)="showDialog()" id="start-task-button">
    <md-icon>add</md-icon>
    <span>{{'START_TASK.BUTTON'|translate}}</span>
</button>

<dialog class="mdl-dialog" id="start-task-dialog" #dialog>
    <h4 class="mdl-dialog__title" id="start-task-dialog-title">{{'START_TASK.DIALOG.TITLE'|translate}}</h4>
    <div class="mdl-dialog__content">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" [(ngModel)]="name" id="taskName"/>
            <label class="mdl-textfield__label" for="taskName">{{'START_TASK.DIALOG.LABEL.NAME'|translate}}</label>
        </div>
        <div class="mdl-textfield mdl-js-textfield">
            <textarea class="mdl-textfield__input" type="text" [(ngModel)]="description" rows="3"
                      id="taskDescription"></textarea>
            <label class="mdl-textfield__label" id="task-description-label"
                   for="taskDescription">{{'START_TASK.DIALOG.LABEL.DESCRIPTION'|translate}}</label>
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <label class="mdl-textfield__label" >{{'START_TASK.DIALOG.LABEL.ATTACHFORM'|translate}}</label>
        </div>
        <div class="mdl-textfield mdl-js-textfield alf-mdl-selectfield">
            <select name="taskForm" [(ngModel)]="formId" >
                <option value="null">{{'START_TASK.DIALOG.LABEL.NONE'|translate}}</option>
                <option *ngFor="let form of forms" [value]="form.id">
                    {{form.name}}
                </option>
            </select>
        </div>
    </div>
    <div class="mdl-dialog__actions">
        <button type="button" id="button-start" (click)="start()" class="mdl-button">
            {{'START_TASK.DIALOG.ACTION.START'|translate}}
        </button>
        <button type="button" id="button-cancel" (click)="cancel()" class="mdl-button close">
            {{'START_TASK.DIALOG.ACTION.CANCEL'|translate}}
        </button>
    </div>
</dialog>
