<section class="dialog">
    <div [innerHTML]="'assign-owner.dialog.title' | translate: { type: mode }" class="dialog-header heading-l"></div>

    <form (submit)="save()" [formGroup]="form">
        <div class="dialog-content">
            <div class="iqser-input-group w-300 required">
                <label>{{ 'assign-owner.dialog.label' | translate: { type: mode } }}</label>
                <mat-form-field>
                    <mat-select [placeholder]="'initials-avatar.unassigned' | translate" formControlName="user">
                        <mat-option *ngFor="let userId of userOptions" [value]="userId">
                            {{ userId | name: { defaultValue: 'initials-avatar.unassigned' | translate } }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </div>

        <div class="dialog-actions">
            <iqser-icon-button
                [disabled]="!form.valid || !changed || !validOption"
                [label]="'assign-owner.dialog.save' | translate"
                [submit]="true"
                [type]="iconButtonTypes.primary"
            ></iqser-icon-button>

            <div [translate]="'assign-owner.dialog.cancel'" class="all-caps-label pointer cancel" mat-dialog-close></div>
        </div>
    </form>

    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
</section>
