<h1 mat-dialog-title>{{ 'Issues.IssueDialog.Title' | translate}}</h1>
<div mat-dialog-content>

    <div class="col-12">
        <mat-form-field class="col-12">
            <mat-label>{{'Issues.IssueDialog.SelectCategory' | translate}}</mat-label>
            <mat-select [(ngModel)]="issue.issueCategoryId">
                <mat-option *ngFor="let cat of issueCategories" [value]="cat.id">
                    {{cat.value}}
                </mat-option>
            </mat-select>
        </mat-form-field>

        <mat-form-field class="col-12">
            <input matInput placeholder="{{ 'Issues.IssueDialog.TitlePlaceholder' | translate}}" [(ngModel)]="issue.subject">
        </mat-form-field>

        <mat-form-field class="col-12">
            <textarea matInput placeholder="{{ 'Issues.IssueDialog.DescriptionPlaceholder' | translate}}" [(ngModel)]="issue.description"></textarea>
        </mat-form-field>
    </div>

</div>
<div mat-dialog-actions>
    <button mat-button (click)="onNoClick()">{{ 'Common.Cancel' | translate}}</button>
    <button mat-button [disabled]="issue.subject.length <= 0 || !issue.issueCategoryId || issue.description.length <= 0" (click)="createIssue()" [mat-dialog-close]="data" cdkFocusInitial>{{ 'Common.Submit' | translate}}</button>
</div>