@props(['admin'])


<div id="admin-row-{{ $admin->id }}"  
               class="flex items-center
                justify-between
                gap-6
                px-6 py-5
                hover:bg-slate-50
                transition">

        <!-- Admin Information -->

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

               <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>

                

                    <h3 class="font-semibold text-slate-900">
                        {{ $admin->name }}
                    </h3>

                    

                

                <p class="mt-1 text-sm text-slate-500">
                    {{ $admin->email }}
                </p>

            </div>

        </div>


        <!-- Assigned Site -->

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

            <p class="text-xs
                      font-medium
                      uppercase
                      tracking-wide
                      text-slate-400">
                Assigned Site
            </p>

            <p class="mt-1
                      text-sm
                      font-medium
                      text-slate-700">

                {{ $admin->site->name }}

            </p>

        </div>


        <!-- Actions -->

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

            <button
                type="button"
                hx-get="{{ route('manage_admins.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"
            >
                Edit
            </button>

            <button
                type="button"
                hx-delete="{{ route('manage_admins.destroy', $admin) }}"
                hx-target="#admin-row-{{ $admin->id }}"
                hx-swap="outerHTML"
                hx-confirm="Are you sure you want to delete {{ $admin->name }}?"
                class="rounded-lg
                       border border-red-100
                       bg-red-50
                       px-4 py-2.5
                       text-sm font-medium
                       text-red-600
                       hover:bg-red-100
                       transition"
            >
                Delete
            </button>

        </div>

    </div>