<div *ngIf="watermarks$ | async as watermarks" class="mt-14">
    <div class="iqser-input-group">
        <mat-checkbox (change)="changeChecked($event)" [checked]="!!value" [disabled]="disabled || isReadonly" color="primary">
            {{ label }}
        </mat-checkbox>

        <mat-form-field *ngIf="!!value">
            <mat-select (selectionChange)="selectWatermark($event.value)" [disabled]="disabled || isReadonly" [value]="value">
                <mat-select-trigger *ngIf="!!value">
                    <mat-icon *ngIf="!watermarksMap.get(value)?.enabled" svgIcon="red:warning"></mat-icon>
                    <span> {{ watermarksMap.get(value)?.name }} </span>
                </mat-select-trigger>

                <mat-option *ngFor="let watermark of watermarks" [disabled]="!watermark.enabled" [value]="watermark.id">
                    <mat-icon *ngIf="!watermark.enabled" svgIcon="red:warning"></mat-icon>
                    {{ watermark.name }}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>
