<div x-data="{ isOpenFormPatchFile: @entangle('isOpenFormPatchFile') }">
    <div wire:loading.class="flex" wire:loading.class.remove="hidden" wire:target="search, openModalMergeVessel, closeModal, mergeFlight" class="fixed inset-0 items-center justify-center z-50 bg-gray-800 bg-opacity-75 hidden">
        <div class="bg-white p-4 rounded-lg flex items-center justify-center">
            <svg class="animate-spin h-5 w-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
                </circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
            </svg>
            <span class="ml-2 text-gray-600">Loading...</span>
        </div>
    </div>
    <div x-show="isOpenFormPatchFile" class="fixed inset-0 z-50 bg-gray-800/40 overflow-auto">
        <div class="bg-white rounded-lg w-4/5 mx-auto mt-10 mb-10 pb-4">
            <style>
                code[class*="language-"],
                pre[class*="language-"] {
                    background: white !important;
                    color: black;
                }

                .token.deleted {
                    background-color: #f8d7da;
                    color: #721c24;
                }

                .token.inserted {
                    background-color: #d4edda;
                    color: #155724;
                }
            </style>

            <div class="flex w-full justify-between rounded-t-lg bg-primary px-4 py-3 dark:bg-navy-800 sm:px-5">
                <h3 class="text-lg text-white font-semibold mr-4">File Name:</h3>

                <button type="button" @click="isOpenFormPatchFile = false" class="btn -mr-1.5 h-7 w-7 text-white rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="white" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>

            </div>


            <div class="flex" x-data="{ dbCode: @entangle('dbCode').defer , patchFile: @entangle('patchFile').defer }" style=" overflow-y: auto;">
                <div class="w-full p-4">
                    <div class="flex">
                        <h3 class="text-md font-semibold mr-4">File Name:</h3>
                        <input type="text" x-model.defer="patchFile"
                        class="placeholder:text-sm text-md w-3/5 form-input rounded-md border border-slate-300 px-2">
                    </div>
                    <h3 class="text-md font-semibold">Code:</h3>
                    <div class="relative">
                        <div class="overflow-auto p-2 bg-gray-100 rounded" >
                            <textarea  x-model.defer="dbCode" class="w-full h-full p-2 bg-white rounded border border-gray-300" rows="30"
                            style="font-family: monospace; white-space: pre; overflow-wrap: normal; overflow-x: auto;"></textarea>
                        </div>
                    </div>
                    <div class="flex justify-center">
                        <button type="button" @click="$wire.saveCode(dbCode , patchFile)" class="bg-primary hover:bg-primary-focus text-main-container font-bold py-2 px-4 rounded mx-2 my-2">Save</button>
                    </div>
                    <!-- <div class="mt-4">
                        <button @click="$wire.set('dbCode', dbCode)" class="btn text-white bg-blue-600 px-4 py-2 rounded">Save</button>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</div>