@props(['clients'])

@php
    $gridTemplateColumns = 'repeat(3, minmax(0, 1fr))';
@endphp

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

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

    .oah-clients-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-clients-table-inner,
        .oah-clients-table-row {
            min-width: 1300px;
        }
    }
</style>
@endpush

<div class="rounded-xl border border-neutral-200 bg-neutral-50/30 overflow-hidden">
    <div class="oah-clients-table-scroll overflow-x-auto">
        <div class="oah-clients-table-inner min-w-full divide-y divide-neutral-200">
            <div
                class="oah-clients-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-center border-r border-neutral-200 px-3 py-3 text-center">Client</div>
                <div class="flex items-center justify-center border-r border-neutral-200 px-2 py-3 text-center">Renewal</div>
                <div class="flex w-full items-center justify-center border-l border-neutral-200 px-5 py-3 text-center sm:px-8">Actions</div>
            </div>

            @foreach ($clients as $client)
                <x-admin.client-summary-row
                    :client="$client"
                    :show-product-columns="false"
                    :grid-template-columns="$gridTemplateColumns"
                    logo-class="h-16 w-16 sm:h-20 sm:w-20"
                />
            @endforeach
        </div>
    </div>
</div>

<x-admin.view-products-modal />