<button type="button" (click)="showDialog()" class="mdl-button">{{'START_PROCESS.BUTTON'|translate}}</button>

<dialog class="mdl-dialog" #dialog>
    <h4 class="mdl-dialog__title">{{'START_PROCESS.DIALOG.TITLE'|translate}}</h4>
    <div class="mdl-dialog__content">
        <div class="mdl-textfield mdl-js-textfield alf-mdl-selectfield">
            <select name="processDefinition" [(ngModel)]="processDefinitionId" id="processDefinition">
                <option value="" selected="selected">{{'START_PROCESS.DIALOG.TYPE_PLACEHOLDER'|translate}}</option>
                <option *ngFor="let processDef of processDefinitions" [value]="processDef.id">
                    {{processDef.name}}
                </option>
            </select>
            <label class="mdl-textfield__label" for="processDefinition">{{'START_PROCESS.DIALOG.LABEL.TYPE'|translate}}</label>
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" [(ngModel)]="name" id="processName" />
            <label class="mdl-textfield__label" for="processName">{{'START_PROCESS.DIALOG.LABEL.NAME'|translate}}</label>
        </div>
        <activiti-start-form *ngIf="hasStartForm()" [processDefinitionId]="processDefinitionId"
                       (formSaved)='onFormSaved($event)'
                       (formCompleted)='onFormCompleted($event)'
                       (formLoaded)='onFormLoaded($event)'
                       (onError)='onFormError($event)'
                       #startForm>
        </activiti-start-form>
    </div>
    <div class="mdl-dialog__actions">
        <button type="button" [disabled]="!validateForm()" (click)="startProcess()" class="mdl-button">{{'START_PROCESS.DIALOG.ACTION.START'|translate}}</button>
        <button type="button" (click)="cancel()" class="mdl-button close">{{'START_PROCESS.DIALOG.ACTION.CANCEL'|translate}}</button>
    </div>
</dialog>
