<div class="row">
    <div class="col-12 col-lg-6 mb-3">
        <label [for]="fieldId" class="form-label">{{ label }}:</label>

        <!-- File-Input ist deaktiviert, wenn ein Bild existiert und nicht zum Löschen markiert ist -->
        <input type="file" class="form-control" [id]="fieldId"
               [disabled]="disabled || (imageUrl && showImage)"
               (change)="onFileSelected($event)"/>

        @if (selectedFile) {
            <small class="text-muted">{{ selectedFile.name }}</small>
        }
    </div>

    @if (imageUrl && showImage) {
        <div class="col-12 col-lg-6 mb-3">
            <span class="form-label">&nbsp;</span>
            <div class="image-display">
                <img [src]="imageUrl" [alt]="label" class="img-fluid" />
                <button type="button" class="btn btn-sm btn-danger" (click)="deleteImage()">X</button>
            </div>
        </div>
    }
</div>