@props(['label', 'name', 'value' => '', 'error' => null, 'btnText' => null, 'image' => '', 'defaultImage' => '', 'withDelete' => false, 'deleteAction' => false, 'withPosition' => false])

@php
$label = $label ?? false;
$placeholder = $attributes['placeholder'] ?? '';
$error = json_decode($error, true) ?? [];
@endphp

<div class="form-control w-full flex {{ !empty($error[0]) ? 'flex-col space-y-1' : 'items-center space-x-4' }}">
    @if (!empty($error[0]))
        <div class="flex items-center space-x-4">
    @endif
    @if ($label)
        <span class="text-sm min-w-1/4 block">{{ $label }}</span>
    @endif
    <div class="w-full flex items-center my-2">
        @if ($withPosition)
            @svg('images/icons/admin/move.svg', 'fill-current text-gray-400 w-4 h-4 mr-2
            cursor-pointer')
        @endif
        <div class="w-2/3 h-32 mr-2 flex-shrink-0 flex items-center">
            @if (empty($image))
                <img src="{{ $image ? $image->temporaryUrl() : asset($defaultImage) }}" alt="" class="max-h-full"
                    loading="lazy">
            @else
                <img src="{{ !is_string($image) ? $image->temporaryUrl() : $image }}" alt="" class="max-h-full"
                    loading="lazy">
            @endif
        </div>
        @if ($withDelete)
            <button class="text-sm text-red-500 ml-auto" wire:click="{{ $deleteAction }}">Supprimer</button>
        @endif
        @if (!$withDelete)
            <label for="{{ $name }}" class="text-sm cursor-pointer text-blue-500 ml-auto">
                @if (!is_null($btnText))
                    {{ $btnText }}
                @else
                    {{ empty($image) ? 'Ajouter' : 'Modifier' }}
                @endif
            </label>
        @endif
    </div>
    <input type="file" id="{{ $name }}" name="{{ $name }}" class="hidden"
        {{ $attributes->merge(['class' => 'w-full appearance-none border-0 bg-transparent text-black py-1 px-0 focus:outline-none focus:border-transparent']) }}>
    @if (!empty($error[0]))
</div>
<div class="flex items-center space-x-4">
    <span class="block min-w-1/4"></span>
    <span class="text-red-500 text-sm">{{ $error[0] }}</span>
</div>
@endif
</div>