@extends('layouts.admin')

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

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

<div class="mx-auto max-w-[min(100%,92rem)] px-4 py-8 sm:px-6 sm:py-10">
    <div class="rounded-2xl border border-neutral-200 bg-white shadow-oah overflow-hidden">
        <div class="border-b border-neutral-100 px-5 py-10 sm:px-8 sm:py-10">
            <div class="flex flex-col items-start justify-between gap-6 sm:flex-row sm:items-center">
                <h1 class="text-xl font-extrabold uppercase leading-tight tracking-tight text-oah-black sm:text-2xl lg:text-3xl">
                    Partnership Programme Overview
                </h1>
                <img
                    src="{{ asset('images/company-logo.svg') }}?v=1"
                    alt="Osborn Abas Hunt Yellow Triangle"
                    width="200"
                    height="120"
                    class="h-auto w-auto max-h-28 shrink-0 object-contain sm:max-h-32"
                >
            </div>
        </div>

        <div class="flex flex-col gap-6 px-5 py-8 sm:px-8">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <h2 class="text-lg font-bold text-oah-black">All clients</h2>
                <a href="{{ route('admin.clients.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 client
                </a>
            </div>

            @if ($clients->isNotEmpty())
                <x-admin.clients-cards :clients="$clients" />
            @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 clients yet</p>
                    <p class="mt-2 text-sm text-oah-muted">Add your first client to get started.</p>
                    <a href="{{ route('admin.clients.create') }}" class="btn-oah mt-5 inline-flex rounded-lg px-6 py-2.5 text-sm font-bold">
                        Add client
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection