<form wire:submit.prevent="submit" class="custom-validation" novalidate method="POST" enctype="multipart/form-data">
    @csrf
    <div class="row flex-column-reverse flex-lg-row">
        <div class="col-lg-9 align-self-center">
            <div class="form-group" wire:ignore>
                <x-ckeditor-2 wire:model="description" />
            </div>
        </div>

        <div class="col-lg-3">
            <div class="position-relative">
                <label class="d-block text-center">Thumbnail(1280x720px)<sup class="text-danger">*</sup></label>
                <div class="d-flex w-100 m-auto">
                    <div class="spinner-custom waiting-img" wire:loading wire:target="feature_image">
                        <div class="spinner-border text-info m-1"></div>
                    </div>
                    <div class="spinner-custom waiting-img" wire:loading wire:target="update_image">
                        <div class="spinner-border text-info m-1"></div>
                    </div>

                    @if ($feature_image ==null || $old_image)    
                        <div class="d-flex w-100 m-auto">
                            @if (!empty($old_image)) <!-- is condition work went click edit -->
                                <label for="update_image">
                                    <img 
                                    class="img-thumbnail img-clickable mw-50 feature-img @error('update_image') border-danger @enderror" 
                                    src="{{ asset($update_image?$update_image->temporaryUrl():$old_image) }}" 
                                    alt="No Image"
                                    />
                                </label>
                                <input type="file" id="update_image" class="custom-file-input d-none" wire:model="update_image"/>
                            @else 
                                <!-- is condition work went Create new Link -->
                                <label for="feature_image">
                                    <img 
                                    class="img-thumbnail img-clickable mw-50 feature-img @error('feature_image') border-danger @enderror" 
                                    src="{{ asset($old_image?$old_image:$no_image) }}" 
                                    alt="No Image"
                                    />
                                </label>
                                <input type="file" id="feature_image" class="custom-file-input d-none" wire:model="feature_image"/>
                            @endif   
                        </div>
                    @else   
                        <input type="file" class="custom-file-input d-none" id="feature_image" wire:model="feature_image" aria-describedby="inputGroupFileAddonwithlabel">
                        <div class="d-flex justify-content-center">    
                            <label for="feature_image" class=" text-center">
                                <img class="img-thumbnail img-clickable w-50 feature-img @error('feature_image') border-danger @enderror" src="{{ $feature_image->temporaryUrl() }}" alt="No Image"/>
                            </label>                                    
                        </div>
                    @endif
                </div>
                @error('feature_image')    
                <ul class="parsley-errors-list filled" id="parsley-id-5" aria-hidden="false">
                    <li class="parsley-required text-center">{{$message}}</li>
                </ul>
                @enderror
                @error('update_image')    
                <ul class="parsley-errors-list filled" id="parsley-id-5" aria-hidden="false">
                    <li class="parsley-required text-center">{{$message}}</li>
                </ul>
                @enderror
            </div>

            <div class="form-group">
                <label for="title">Title<sup class="text-danger">*</sup></label>
                <input type="text" wire:model="title" class="form-control @error('title') parsley-error @enderror" id="title" placeholder="Enter title..." required>
                @error('title')
                    <ul class="parsley-errors-list filled" id="parsley-id-5" aria-hidden="false">
                        <li class="parsley-required">{{ $message }}</li>
                    </ul>
                @enderror
            </div>

            <div class="form-group">
                <label for="keyword" class="col-form-label">Keyword<sup class="text-danger">*</sup></label>
                <input type="text" wire:ignore wire:model.debone.500ms="keyword" class="form-control @error('keyword') parsley-error @enderror" id="keyword" placeholder="Enter keyword..." required>
                @error('keyword')
                    <ul class="parsley-errors-list filled" id="parsley-id-5" aria-hidden="false">
                        <li class="parsley-required">{{ $message }}</li>
                    </ul>
                @enderror
            </div>

            <div class="form-group" wire:ignore>
                <label for="category_ids" class="col-form-label">Category<sup class="text-danger">*</sup></label>
                <x-select2-2 id="category_ids" wire:model.debone.500ms="category_ids" >
                    @foreach ($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                </x-select2-2>
                @error('category_ids')
                    <ul class="parsley-errors-list filled" id="parsley-id-5" aria-hidden="false">
                        <li class="parsley-required">{{ $message }}</li>
                    </ul>
                @enderror
            </div>
            <div class="form-group">
                <div class="custom-control custom-checkbox mt-2">
                    <input type="checkbox" class="custom-control-input" wire:model="public" id="public">
                    <label class="custom-control-label" for="public">Public</label>
                </div>
            </div>
            <button type="submit" wire:loading.attr="disabled" wire:target="submit" id="submit" class="btn btn-success rounded-pill w-md float-right">
                <i class="bx bx-check-shield" wire:loading.class="d-none" wire:target="submit"></i>
                <i class="bx bx-loader bx-spin" wire:loading wire:target="submit"></i> 
                {{ $edit?'Update':'Save' }}
            </button>
            <button type="button" wire:click="formOpen" wire:loading.attr="disabled" wire:target="formOpen" class="btn btn-warning rounded-pill w-md float-left">
                <i class="bx bx-left-arrow-alt" wire:loading.class="d-none" wire:target="formOpen"></i>
                <i class="bx bx-loader bx-spin" wire:loading wire:target="formOpen"></i> 
                Back
            </button>
        </div>
    </div>
</form>