@props(['site'])

<div
    id="site-row-{{ $site->id }}"
    class="group
           rounded-2xl
           border border-blue-200
           bg-blue-50
           transition duration-200"
>
    <form
        hx-patch="{{ route('sites.update', $site) }}"
        hx-trigger="submit"
        hx-target="#site-row-{{ $site->id }}"
        hx-swap="outerHTML"
        class="flex flex-col
               lg:flex-row
               lg:items-center
               gap-5 p-5"
    >

        <!-- SITE INFORMATION -->

        <div class="flex items-center gap-4 flex-1">

            <div class="flex flex-col gap-3 w-full">

                <!-- Name -->

                <input
                    type="text"
                    name="name"
                    value="{{ $site->name }}"
                    onkeydown="if (event.key === 'Enter') { event.preventDefault(); this.form.requestSubmit(); }"
                    class="w-full
                           rounded-lg
                           border border-slate-300
                           bg-white
                           px-3 py-2
                           text-sm
                           font-semibold
                           text-slate-900
                           focus:border-blue-500
                           focus:ring-2
                           focus:ring-blue-200
                           outline-none"
                >

                <!-- Address -->

                <input
                    type="text"
                    name="address"
                    value="{{ $site->address }}"
                    onkeydown="if (event.key === 'Enter') { event.preventDefault(); this.form.requestSubmit(); }"
                    class="w-full
                           rounded-lg
                           border border-slate-300
                           bg-white
                           px-3 py-2
                           text-sm
                           text-slate-600
                           focus:border-blue-500
                           focus:ring-2
                           focus:ring-blue-200
                           outline-none"
                >

            </div>

        </div>


        <!-- ACTIONS -->

        <div
            class="flex items-center
                   gap-2
                   lg:border-l
                   lg:border-slate-200
                   lg:pl-5"
        >

            <button
                type="button"
                hx-get="{{ route('sites.cancel-edit', $site) }}"
                hx-target="#site-row-{{ $site->id }}"
                hx-swap="outerHTML"
                class="px-4 py-2.5
                       rounded-lg
                       bg-white
                       border border-slate-200
                       text-slate-700
                       text-sm font-medium
                       hover:bg-slate-100
                       transition"
            >
                Cancel
            </button>

        </div>

    </form>
</div>