@props(['admins'])

@php
    $gridTemplateColumns = 'minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(18rem, 18rem)';
    $gridMinWidth = 780;
    $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-admins-table-scroll {
        -webkit-overflow-scrolling: touch;
    }

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

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

    @media (max-width: 1299px) {
        .oah-admins-table-inner,
        .oah-admins-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-admins-table-scroll overflow-x-auto">
        <div class="oah-admins-table-inner min-w-full divide-y divide-neutral-200" style="min-width: {{ $gridMinWidth }}px;">
            <div
                class="oah-admins-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 sm:px-5">Name</div>
                <div class="flex items-center justify-start border-r border-neutral-200 px-3 py-3 text-left sm:px-5">Email</div>
                <div class="flex w-full items-center justify-end px-3 py-3 sm:px-5">
                    <div class="oah-admins-actions-slot whitespace-nowrap text-center">Actions</div>
                </div>
            </div>

            @foreach ($admins as $admin)
                <div
                    class="oah-admins-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 sm:px-5">
                        <p class="text-sm font-bold leading-tight text-oah-black">{{ $admin->name }}</p>
                    </div>

                    <div class="flex min-w-0 items-center justify-start border-r border-neutral-200 px-3 py-3 sm:px-5">
                        <p class="truncate text-sm text-oah-black">{{ $admin->email }}</p>
                    </div>

                    <div class="flex min-h-full w-full items-center justify-end self-stretch px-3 py-3 sm:px-5">
                        <div class="oah-admins-actions-slot flex flex-row flex-nowrap gap-2 sm:gap-2.5">
                            <a href="{{ route('admin.admins.edit', $admin) }}"
                                @class([
                                    'btn-oah !border-1 border-oah-yellow-dark',
                                    $compactActionBtn,
                                ])>
                                <span class="px-4">Update</span>
                            </a>
                            <form id="delete-admin-{{ $admin->id }}" method="POST" action="{{ route('admin.admins.destroy', $admin) }}" class="hidden">
                                @csrf
                                @method('DELETE')
                            </form>
                            <button
                                type="button"
                                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"
                                data-oah-confirm
                                data-oah-confirm-form="#delete-admin-{{ $admin->id }}"
                                data-oah-confirm-title="Delete admin"
                                data-oah-confirm-message="{{ e('Are you sure you want to delete '.$admin->email.'? They will no longer be able to sign in.') }}"
                                aria-label="Delete {{ $admin->email }}"
                            >
                                <span class="px-4">Delete</span>
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>