<section class="dialog">
    <div class="dialog-header heading-l">
        {{ 'confirm-delete-dossier-state.title' | translate }}
    </div>

    <div class="dialog-content">
        <div [innerHTML]="'confirm-delete-dossier-state.warning' | translate : translateArgs" class="heading"></div>

        <form *ngIf="data.dossierCount !== 0 && data.otherStates.length > 0" [formGroup]="form" class="mt-16">
            <div class="iqser-input-group">
                <mat-checkbox color="primary" formControlName="replace">
                    {{ 'confirm-delete-dossier-state.question' | translate : { count: data.dossierCount } }}
                </mat-checkbox>
            </div>

            <div *ngIf="form.get('replace').value" class="iqser-input-group w-300 min-h-55">
                <label translate="confirm-delete-dossier-state.form.state"></label>
                <mat-form-field>
                    <mat-select
                        [placeholder]="'confirm-delete-dossier-state.form.state-placeholder' | translate"
                        formControlName="replaceDossierStatusId"
                    >
                        <mat-option *ngFor="let state of data.otherStates" [value]="state.dossierStatusId">
                            {{ state.name }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </form>
    </div>

    <div class="dialog-actions">
        <iqser-icon-button (action)="save()" [label]="label | translate" [type]="iconButtonTypes.primary"></iqser-icon-button>
        <div [translate]="'confirm-delete-dossier-state.cancel'" class="all-caps-label cancel" mat-dialog-close></div>
    </div>

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