@props(['site'])

<div
    id="site-row-{{ $site->id }}"
    class="group
           rounded-2xl
           border border-slate-200
           bg-slate-50
           hover:bg-white
           hover:border-blue-200
           hover:shadow-md
           transition duration-200"
>

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

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

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

                </div>

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

            </div>

        </div>


        <!-- ==================== QR CODE ==================== -->

        <button
            type="button"
            onclick="openQrModal(
                '{{ $site->name }}',
                '{{ $site->address }}',
                '{{ route('visits.show', $site->slug) }}',
                '{{ Storage::url($site->qr_path) }}'
            )"
            class="group/qr
                   flex items-center gap-4
                   text-left
                   rounded-xl
                   border border-slate-200
                   bg-white
                   px-4 py-3
                   hover:border-blue-400
                   hover:bg-blue-50
                   transition
                   cursor-pointer"
        >

            <!-- QR Placeholder -->

            <div
                class="w-14 h-14
                       rounded-lg
                       border border-slate-300
                       bg-white
                       flex items-center
                       justify-center
                       group-hover/qr:border-blue-400"
            >

                <div
                    class="grid grid-cols-4 gap-1
                           w-8 h-8"
                >

                    <span class="bg-slate-900"></span>
                    <span class="bg-slate-900"></span>
                    <span class="bg-white border"></span>
                    <span class="bg-slate-900"></span>

                    <span class="bg-white border"></span>
                    <span class="bg-slate-900"></span>
                    <span class="bg-slate-900"></span>
                    <span class="bg-white border"></span>

                    <span class="bg-slate-900"></span>
                    <span class="bg-white border"></span>
                    <span class="bg-slate-900"></span>
                    <span class="bg-slate-900"></span>

                    <span class="bg-slate-900"></span>
                    <span class="bg-slate-900"></span>
                    <span class="bg-white border"></span>
                    <span class="bg-slate-900"></span>

                </div>

            </div>


            <div>

                <p
                    class="text-sm
                           font-semibold
                           text-slate-800
                           group-hover/qr:text-blue-700"
                >
                    Site QR Code
                </p>

                <p class="text-xs text-slate-500 mt-1">
                    Click to view
                </p>

            </div>

        </button>


        <!-- ==================== ACTIONS ==================== -->

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

            <!-- Edit -->

            <button
                type="button"
                 hx-get="{{ route('sites.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
                       hover:border-slate-300
                       transition"
            >
                Edit
            </button>


            <!-- Delete -->

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

        </div>

    </div>

</div>