@props(['host'])


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

    <!-- Host Information -->

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

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

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

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

            {{ $host->site->name }}

        </p>

    </div>


    <!-- Actions -->

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

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

            Edit

        </button>


        <button
            type="button"
            hx-delete="{{ route('manage_hosts.destroy', $host) }}"
            hx-target="#host-row-{{ $host->id }}"
            hx-swap="outerHTML"
            hx-confirm="Are you sure you want to delete {{ $host->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>