<form wire:submit="submit" class="">
    <div class="flex gap-2 p-2 sm:gap-4 sm:p-4 items-center">
        <div>
            <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full overflow-hidden">
                <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff&name={{auth()->user()->name}}" />
            </div>
        </div>
        <div class="flex-grow">
            <input wire:model="body" class="p-2 sm:p-4 rounded-lg text-black bg-white w-full text-md"
                   placeholder="{{__('theme-ekmal::lang.whats_your_comment_for_this_movie')}}" type="text" value="" />

        </div>
        <div wire:click="submit" class=" cursor-pointer w-8 h-8 sm:w-10 sm:h-10 text-brand-500">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 40 40" class="fill-current ltr:rotate-180">
                <defs></defs>
                <g id="Group_2312" data-name="Group 2312" transform="translate(-188.002 -426)">
                    <path class="svg-c1" id="Subtraction_3"
                          d="M20 40a20.005 20.005 0 0 1-7.783-38.428 20.005 20.005 0 0 1 15.57 36.856A19.875 19.875 0 0 1 20 40zm6.876-29.689a1.479 1.479 0 0 0-.69.175L9.212 19.36a1.471 1.471 0 0 0 0 2.607l16.976 8.873a1.451 1.451 0 0 0 1.971-.592 1.424 1.424 0 0 0-.03-1.47l-3.99-6.624a2.884 2.884 0 0 1 0-2.983l3.99-6.623a1.424 1.424 0 0 0 .03-1.471 1.485 1.485 0 0 0-1.281-.766z"
                          data-name="Subtraction 3" transform="translate(188 426)"></path>
                </g>
            </svg>
        </div>
    </div>
    @error('body')
    <span class="ms-2 text-red-500 font-medium text-md">{{__('theme-ekmal::lang.comment_is_require')}}</span>
    @enderror
{{--    <div class="flex gap-2 p-2 sm:gap-4 sm:px-4">--}}
{{--        <input class="" id="" type="checkbox" value="false" />--}}
{{--        <label>--}}
{{--            <span class="text-[10px] sm:text-xs">{{__('theme-ekmal::lang.this_comment_has_spoil')}}</span>--}}
{{--        </label>--}}
{{--    </div>--}}
</form>
