<div class="w-4/6 mx-auto p-8 bg-white shadow-lg rounded-lg" x-data="{ showPasswordField: false }">
    <form wire:submit.prevent="updateConfig" autocomplete="off">
        <div class="mb-6">
            <h2
                class="font-medium flex items-center tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
                <i aria-hidden="true" class="fa-solid fa-edit text-primary pr-2"></i> Edit Config Manual Response
            </h2>
        </div>

        <div class="mb-2">
            <label for="linkSPN" class="block text-sm font-medium text-gray-700">SPN Endpoint</label>
            <input type="text" id="linkSPN"
                class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                placeholder="Link SPN" wire:model.defer="linkSPN" autocomplete="off">
        </div>
        <div class="mb-2">
            <label for="username" class="block text-sm font-medium text-gray-700">Username: SPN</label>
            <input type="text" id="usernameSPN"
                class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                placeholder="Username on SPN" wire:model.defer="usernameSPN" autocomplete="off">
        </div>
        <div class="mb-2" x-show="showPasswordField" style="display: none;">
            <label for="first_name" class="block text-sm font-medium text-gray-700">Password: SPN</label>
            <input type="password" id="passwordSPN"
                class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                placeholder="Password on SPN" wire:model.defer="passwordSPN" autocomplete="off">
        </div>

        <div class="flex w-full mt-5">
            <div class="ml-auto flex space-x-2 w-3/4 justify-end">
                <button class="w-1/4 py-2 bg-gray-200 text-gray-700 rounded-md shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" type="button" wire:click="backToMainList">Back</button>
                <button class="w-1/4 py-2 bg-gray-200 text-gray-700 rounded-md shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" type="button" @click="showPasswordField = !showPasswordField">Config Password</button>
                <button class="w-1/4 py-2 bg-gray-200 text-gray-700 rounded-md shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" type="button" wire:click="testConnection">Test Connection</button>
                <button class="w-1/4 py-2 bg-primary text-white rounded-md shadow-sm hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" type="submit">Save</button>
            </div>
        </div>
    </form>
</div>
