@props(['products'])

@php
    $gridTemplateColumns = 'repeat(2, minmax(0, 1fr))';
    $gridMinWidth = 560;
    $compactActionBtn = 'inline-flex h-10 shrink-0 items-center justify-center rounded-full border-2 px-3 text-center text-sm font-semibold leading-none normal-case transition whitespace-nowrap';
@endphp

@push('styles')
<style>
    .oah-products-table-scroll {
        -webkit-overflow-scrolling: touch;
    }

    .oah-products-table-inner,
    .oah-products-table-row {
        min-width: 100%;
    }

    .oah-products-actions-slot {
        display: inline-flex;
        min-width: 10.5rem;
        justify-content: center;
        align-items: center;
    }

    .oah-products-table-actions .btn-oah {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 2.5rem;
        min-height: 2.5rem;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1;
    }

    @media (max-width: 1299px) {
        .oah-products-table-inner,
        .oah-products-table-row {
            min-width: {{ $gridMinWidth }}px;
        }
    }
</style>
@endpush

<div class="rounded-xl border border-neutral-200 bg-neutral-50/30 overflow-hidden">
    <div class="oah-products-table-scroll overflow-x-auto">
        <div class="oah-products-table-inner min-w-full divide-y divide-neutral-200" style="min-width: {{ $gridMinWidth }}px;">
            <div
                class="oah-products-table-row grid w-full items-center border-b border-neutral-200 bg-neutral-100/90 text-[10px] font-bold uppercase tracking-wider text-oah-muted"
                style="grid-template-columns: {{ $gridTemplateColumns }};"
            >
                <div class="flex items-center justify-start border-r border-neutral-200 px-3 py-3 text-left">Product name</div>
                <div class="flex w-full items-center justify-end border-l border-neutral-200 px-3 py-3 sm:px-8">
                    <div class="oah-products-actions-slot whitespace-nowrap text-center">Actions</div>
                </div>
            </div>

            @foreach ($products as $product)
                <div
                    class="oah-products-table-row grid w-full items-stretch bg-white"
                    style="grid-template-columns: {{ $gridTemplateColumns }};"
                >
                    <div class="flex min-w-0 items-center justify-start border-r border-neutral-200 px-3 py-3">
                        <p class="text-sm font-bold leading-tight text-oah-black">{{ $product->name }}</p>
                    </div>

                    <div class="flex min-h-full w-full items-center justify-end self-stretch border-l  border-neutral-200 px-3 py-3">
                        <div class="oah-products-actions-slot  oah-products-table-actions  flex flex-row flex-nowrap gap-2 sm:gap-2.5">
                        <a href="{{ route('admin.products.edit', $product) }}"
                            @class([
                                'btn-oah !border-1 border-oah-yellow-dark',
                                $compactActionBtn,
                            ])>
                            <span class="px-4">Update</span>
                        </a>
                        <form id="delete-product-{{ $product->id }}" method="POST" action="{{ route('admin.products.destroy', $product) }}" class="hidden">
                            @csrf
                            @method('DELETE')
                        </form>
                        <button
                            type="button"
                            data-oah-confirm
                            data-oah-confirm-form="#delete-product-{{ $product->id }}"
                            data-oah-confirm-title="Delete product"
                            data-oah-confirm-message="{{ e('Are you sure you want to delete '.$product->name.'?') }}"
                            aria-label="Delete {{ $product->name }}"
                            @class([
                                'inline-flex h-10 min-h-10 shrink-0 items-center justify-center gap-2 rounded-full border-1 border-red-200 bg-white px-3 text-sm font-semibold leading-none text-red-600 transition hover:border-red-300 hover:bg-red-50',
                            ])
                        >
                           
                            <span class="px-4">Delete</span>
                        </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>