@props(['id', 'name', 'title', 'path' => null])

<div>
    <label class="form-label" for="file-{{ $id }}">{{ $title }}</label>
    <div class="input-group" style="display: flex; justify-content: center; text-align: center; align-items: center; height: 100%;">
        <div class="input-group-prepend fmholder" style="padding: 0px 10px;">
            <div id="holder-{{ $id }}" style="max-height:100px;">
                @if($path)
                    <img src="{{ $path }}">
                @endif
            </div>
        </div>
        <input type="text" id="thumbnail-{{ $id }}" class="form-control" name="{{ $name }}" wire:model="{{ $name }}" aria-label="Image" style="height:5rem;">
        <input type="hidden" id="path-{{ $id }}" class="form-control" name="{{ $name }}_path" wire:model="{{ $name }}_path" value="{{ $path }}" aria-label="Image">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" id="lfm-{{ $id }}" data-path="path-{{ $id }}" data-input="thumbnail-{{ $id }}" data-preview="holder-{{ $id }}" style="height: 5rem;"> Seçiniz </button>
        </div>
    </div>
</div>

@push('css')
    <style>
        .fmholder div img {
            height: 5rem;
            width: 100px;
        }
    </style>
@endpush