@extends('layouts.admin')

@section('title', 'Products — OAH')

@section('content')
<x-admin.nav :show-title="false" />

<div class="mx-auto max-w-[min(100%,92rem)] px-4 pt-8 pb-16 sm:px-6 sm:pt-10">
    <div class="rounded-2xl border border-neutral-200 bg-white shadow-oah overflow-hidden">
        <div class="border-b border-neutral-100 px-5 pt-10 pb-8 sm:px-8 sm:pt-12 sm:pb-10">
            <div class="flex flex-col items-start justify-between gap-6 sm:flex-row sm:items-center">
                <div>
                    <h1 class="text-xl font-extrabold uppercase leading-tight tracking-tight text-oah-black sm:text-2xl lg:text-3xl">
                        Products
                    </h1>
                    <p class="mt-2 text-sm text-oah-muted">Manage products available when assigning client packages.</p>
                </div>
                <a href="{{ route('admin.products.create') }}"
                    class="btn-oah inline-flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-bold">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14M5 12h14"/></svg>
                    Add product
                </a>
            </div>
        </div>

        <div class="px-5 py-6 sm:px-8 sm:py-8">
            @if ($products->isNotEmpty())
                <x-admin.products-table :products="$products" />
            @else
                <div class="rounded-xl border-2 border-dashed border-neutral-200 bg-neutral-50/50 px-6 py-16 text-center">
                    <p class="font-semibold text-oah-black">No products yet</p>
                    <p class="mt-2 text-sm text-oah-muted">Add products here, then select them when creating a client.</p>
                    <a href="{{ route('admin.products.create') }}" class="btn-oah mt-5 inline-flex rounded-lg px-6 py-2.5 text-sm font-bold">
                        Add product
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection