<div class="mx-5">
    <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 " x-data="{ gitCode: @entangle('gitCode') }">
        <div class="w-1/2 p-4">
            <h3 class="text-lg font-semibold">GitLab Code:</h3>
            <div class="relative">
                <div class="overflow-auto h-svh p-2 bg-gray-100 rounded">
                    <pre class="line-numbers language-markup"><code >{{ $gitCode }}</code></pre>
                </div>
            </div>
        </div>
        <div class="w-1/2 p-4">
            <h3 class="text-lg font-semibold">Your Code:</h3>
            <textarea wire:model.defer="code" rows="20" class="w-full p-2 border rounded language-markup" placeholder="Paste your code here...">


            </textarea>
            <button wire:click="compare" id="compare"
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2">Compare</button>
        </div>
    </div>
    <div class="mx-3">
        <h3 class="text-lg font-semibold mt-4">Differences:</h3>
        <div class="overflow-auto  p-2 bg-gray-100 rounded">
            <pre class="line-numbers "> <code >{!! $diffResult !!}</code></pre>
        </div>
    </div>

</div>
