@props(['question', 'isDisable'])

<div class="group w-full rounded-lg bg-white p-5 md:p-6 border-black/10 border-solid border my-5 text-left">
    <label class="font-medium text-base mb-0">{!!$question->question!!} @if($question->required)<sup class="text-red-500">*</sup>@endif</label>
    <input  @if($isDisable) disabled="{{ $isDisable }}" @endif wire:model='answers.input.{{$question->id}}' type="text" placeholder="" class="w-full text-sm border-t-transparent border-l-transparent border-r-transparent !border-b border-solid border-b-black/20 transition-all py-1.5 px-0 text-black placeholder:text-black/90 !ring-0 outline-none focus:border-t-transparent focus:border-l-transparent focus:border-r-transparent hover:border-t-transparent hover:border-l-transparent hover:border-r-transparent focus:border-b-black/80 hover:border-b-black/30 group-[&.has-error]:border-b-red-500 group-[&.has-error]:text-red-500">
 

    @if($errors->has("questions$question->id"))          
        <div class=" group-[&.has-error]:block pl-8 text-red-500 text-sm relative mt-3">
            <svg class="absolute left-0 top-0 fill-red-500 w-[20px] h-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/>
            </svg>
            {{ $errors->first("questions$question->id") }}
        </div>
    @endif
</div>