<section class="dialog">
    <form (submit)="save()" [formGroup]="form">
        <div class="dialog-header heading-l" [translate]="'recategorize-image-dialog.header'"></div>

        <div class="dialog-content">
            <div class="iqser-input-group required w-400">
                <label [translate]="'recategorize-image-dialog.content.type'"></label>
                <mat-form-field>
                    <mat-select
                        [placeholder]="'recategorize-image-dialog.content.type-placeholder' | translate"
                        class="full-width"
                        formControlName="type"
                    >
                        <mat-option *ngFor="let option of typeOptions" [value]="option">
                            {{ translations[option] | translate }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <div class="iqser-input-group w-300">
                <label [translate]="'recategorize-image-dialog.content.comment'"></label>
                <textarea formControlName="comment" iqserHasScrollbar name="comment" rows="4" type="text"></textarea>
            </div>
        </div>

        <div class="dialog-actions">
            <iqser-icon-button
                [disabled]="disabled"
                [label]="'recategorize-image-dialog.actions.save' | translate"
                [submit]="true"
                [type]="iconButtonTypes.primary"
            ></iqser-icon-button>

            <div class="all-caps-label cancel" mat-dialog-close [translate]="'recategorize-image-dialog.actions.cancel'"></div>
        </div>
    </form>

    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
</section>
