@props(['host', 'sites'])


<div
    id="host-row-{{ $host->id }}"
    class="group
           border border-blue-200
           bg-blue-50
           transition"
>

    <form
        hx-patch="{{ route('manage_hosts.update', $host) }}"
        hx-trigger="submit"
        hx-target="#host-row-{{ $host->id }}"
        hx-swap="outerHTML"
        class="flex items-center
               justify-between
               gap-6
               px-6 py-5"
    >

        <!-- Host Information -->

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

            <div
                class="flex h-11 w-11
                       items-center justify-center
                       rounded-full
                       bg-blue-100
                       text-sm font-bold
                       text-blue-700"
            >

                {{ strtoupper(substr($host->name, 0, 1)) }}

            </div>


            <div class="flex-1 space-y-3">

                <!-- Name -->

                <input
                    type="text"
                    name="name"
                    value="{{ $host->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"
                >

            </div>

        </div>


        <!-- Assigned Site -->

        <div class="flex-1 max-w-sm">

            <select
                name="site_id"
                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-700
                       focus:border-blue-500
                       focus:ring-2
                       focus:ring-blue-200
                       outline-none"
            >

                @foreach ($sites as $site)

                    <option
                        value="{{ $site->id }}"
                        {{ $host->site_id == $site->id ? 'selected' : '' }}
                    >

                        {{ $site->name }}

                    </option>

                @endforeach

            </select>

        </div>


        <!-- Actions -->

        <div class="flex items-center gap-2">

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

                Cancel

            </button>

        </div>

    </form>

</div>