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

<div
    id="admin-row-{{ $admin->id }}"
    class="group
           border border-blue-200
           bg-blue-50
           transition"
>
    <form
        hx-patch="{{ route('manage_admins.update', $admin) }}"
        hx-trigger="submit"
        hx-target="#admin-row-{{ $admin->id }}"
        hx-swap="outerHTML"
        class="flex items-center
               justify-between
               gap-6
               px-6 py-5"
    >

        <!-- Admin 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($admin->name, 0, 1)) }}
            </div>


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

                <!-- Name -->

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


                <!-- Email -->

                <input
                    type="email"
                    name="email"
                    value="{{ $admin->email }}"
                    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>


        <!-- 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 }}"
                        {{ $admin->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_admins.cancel-edit', $admin) }}"
                hx-target="#admin-row-{{ $admin->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>