@php
    $users = [
        [
            'name' => 'John Doe',
            'email' => 'john.doe@company.com',
            'role' => 'Admin',
            'department' => 'Engineering',
            'status' => 'active',
            'joined' => 'Jan 15, 2026',
            'initials' => 'JD',
        ],
        [
            'name' => 'Sarah Martinez',
            'email' => 'sarah.martinez@company.com',
            'role' => 'Manager',
            'department' => 'Product',
            'status' => 'active',
            'joined' => 'Dec 20, 2025',
            'initials' => 'SM',
        ],
        [
            'name' => 'Emily Wilson',
            'email' => 'emily.wilson@company.com',
            'role' => 'Developer',
            'department' => 'Engineering',
            'status' => 'active',
            'joined' => 'Mar 10, 2025',
            'initials' => 'EW',
        ],
        [
            'name' => 'Michael Johnson',
            'email' => 'michael.j@company.com',
            'role' => 'Analyst',
            'department' => 'Analytics',
            'status' => 'pending',
            'joined' => 'Feb 01, 2025',
            'initials' => 'MJ',
        ],
        [
            'name' => 'Amanda Lee',
            'email' => 'amanda.lee@company.com',
            'role' => 'Designer',
            'department' => 'Design',
            'status' => 'inactive',
            'joined' => 'Dec 05, 2023',
            'initials' => 'AL',
        ],
        [
            'name' => 'David Chen',
            'email' => 'david.chen@company.com',
            'role' => 'Developer',
            'department' => 'Engineering',
            'status' => 'active',
            'joined' => 'May 12, 2024',
            'initials' => 'DC',
        ],
        [
            'name' => 'Lisa Rodriguez',
            'email' => 'lisa.rodriguez@company.com',
            'role' => 'Manager',
            'department' => 'Marketing',
            'status' => 'active',
            'joined' => 'Jun 08, 2024',
            'initials' => 'LR',
        ],
        [
            'name' => 'Robert Kim',
            'email' => 'robert.kim@company.com',
            'role' => 'Support',
            'department' => 'Customer Success',
            'status' => 'pending',
            'joined' => 'Jul 15, 2024',
            'initials' => 'RK',
        ],
    ];
@endphp

<div class="w-full max-w-7xl px-1 sm:px-4 mx-auto">
    <x-ui.card size="custom" class="[--card-padding:0px]">
        <div class="p-4 flex items-center justify-between gap-4">
            <x-ui.input.group class="flex-1 max-w-xs md:h-9">
                <x-ui.input.leading absolute>
                    <x-ui.icon name="ph--magnifying-glass" />
                </x-ui.input.leading>
                <x-ui.input variant="unstyled" placeholder="Search users..." class="ps-10" />
            </x-ui.input.group>
            <div class="flex items-center gap-2">
                <x-ui.button size="none" variant="outline" class="gap-1 sm:btn-md max-sm:btn-icon-sm">
                    <x-ui.icon size="sm" name="ph--funnel" />
                    <span class="hidden sm:inline">Filter</span>
                </x-ui.button>
                <x-ui.button size="sm" class="sm:btn-md">
                    <x-ui.icon size="xs" name="ph--plus" class="mr-1" />
                    New user
                </x-ui.button>
            </div>
        </div>

        <x-ui.table class="text-left">
            <x-ui.table.columns
                wrapper="bg-card border-y border-input/60 [--gutter-x:--spacing(4)] [--gutter-y:--spacing(3)]">
                <x-ui.table.column class="pr-0 text-xs uppercase tracking-wider w-8">
                    <x-ui.checkbox />
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Name
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Email
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Role
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Department
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Status
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Joined
                </x-ui.table.column>
                <x-ui.table.column class="w-10"></x-ui.table.column>
            </x-ui.table.columns>
            <x-ui.table.rows class="divide-y divide-border [--gutter-x:--spacing(4)] [--gutter-y:--spacing(3)]">
                @foreach ($users as $user)
                    <x-ui.table.row>
                        <x-ui.table.cell class="pr-0">
                            <x-ui.checkbox />
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <div class="flex items-center gap-3">
                                <x-ui.avatar-placeholder size="sm" text="{{ $user['initials'] }}" variant="solid"
                                    intent="neutral" />
                                <span class="font-medium text-foreground">{{ $user['name'] }}</span>
                            </div>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <span class="text-muted-foreground">{{ $user['email'] }}</span>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <span class="text-foreground">{{ $user['role'] }}</span>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <span class="text-muted-foreground">{{ $user['department'] }}</span>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            @if ($user['status'] === 'active')
                                <x-ui.badge variant="soft" intent="success" size="sm"
                                    class="inline-flex items-center gap-x-1 font-medium">
                                    <span class="size-2 rounded-full bg-current"></span>
                                    Active
                                </x-ui.badge>
                            @elseif($user['status'] === 'pending')
                                <x-ui.badge variant="soft" intent="warning" size="sm"
                                    class="inline-flex items-center gap-x-1 font-medium">
                                    <span class="size-2 rounded-full bg-current"></span>
                                    Pending
                                </x-ui.badge>
                            @else
                                <x-ui.badge variant="soft" intent="destructive" size="sm"
                                    class="inline-flex items-center gap-x-1 font-medium">
                                    <span class="size-2 rounded-full bg-current"></span>
                                    Inactive
                                </x-ui.badge>
                            @endif
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <span class="text-muted-foreground text-sm">{{ $user['joined'] }}</span>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <x-ui.button size="xs" variant="ghost" icon-only>
                                <x-ui.icon name="ph--dots-three-vertical" />
                            </x-ui.button>
                        </x-ui.table.cell>
                    </x-ui.table.row>
                @endforeach
            </x-ui.table.rows>
        </x-ui.table>

        <div class="p-4 flex items-center md:justify-between border-t border-border">
            <div class="text-sm text-muted-foreground">
                Showing 1 to {{ count($users) }} of {{ count($users) }} users
            </div>
            <div class="flex-1 md:justify-center flex">
                <x-ui.input.group class="sm:max-w-38">
                    <x-ui.input.leading class="text-xs text-muted-foreground px-3 border-r border-input">
                        Per Page
                    </x-ui.input.leading>
                    <x-ui.select class="ps-3 pe-4" variant="unstyled" :indicator="false">
                        <x-ui.select.option value="10" selected label="10" />
                        <x-ui.select.option value="20" selected label="20" />
                        <x-ui.select.option value="50" selected label="50" />
                        <x-ui.select.option value="100" selected label="100" />
                        <x-ui.select.option value="200" selected label="200" />
                    </x-ui.select>
                    <x-ui.input.trailing absolute>
                        <x-ui.icon name="ph--caret-up-down" class="flex text-sm" />
                    </x-ui.input.trailing>
                </x-ui.input.group>
            </div>
            <div class="flex items-center gap-2">
                <x-ui.button size="sm" variant="ghost" icon-only aria-label="Go prev"
                    class="border border-input" disabled>
                    <x-ui.icon name="ph--caret-left" class="size-3.5" />
                </x-ui.button>
                <x-ui.button size="sm" variant="ghost" icon-only aria-label="Go next"
                    class="border border-input">
                    <x-ui.icon name="ph--caret-right" class="size-3.5" />
                </x-ui.button>
            </div>
        </div>
    </x-ui.card>
</div>

@php
    $organizations = [
        [
            'id' => 1,
            'name' => 'TechCorp Solutions',
            'industry' => 'Technology',
            'contact' => 'John Smith',
            'email' => 'john@techcorp.com',
            'phone' => '+1 (555) 123-4567',
            'status' => 'active',
            'revenue' => '$2.5M',
            'employees' => 150,
            'initials' => 'TC',
            'industryIcon' => 'ph--cpu',
            'lastActivity' => '2 hours ago',
        ],
        [
            'id' => 2,
            'name' => 'Global Marketing Inc',
            'industry' => 'Marketing',
            'contact' => 'Sarah Johnson',
            'email' => 'sarah@globalmarketing.com',
            'phone' => '+1 (555) 234-5678',
            'status' => 'prospect',
            'revenue' => '$1.2M',
            'employees' => 45,
            'initials' => 'GM',
            'industryIcon' => 'ph--megaphone',
            'lastActivity' => '1 day ago',
        ],
        [
            'id' => 3,
            'name' => 'FinanceHub LLC',
            'industry' => 'Finance',
            'contact' => 'Michael Chen',
            'email' => 'michael@financehub.com',
            'phone' => '+1 (555) 345-6789',
            'status' => 'active',
            'revenue' => '$5.8M',
            'employees' => 200,
            'initials' => 'FH',
            'industryIcon' => 'ph--bank',
            'lastActivity' => '5 hours ago',
        ],
        [
            'id' => 4,
            'name' => 'Healthcare Plus',
            'industry' => 'Healthcare',
            'contact' => 'Emily Davis',
            'email' => 'emily@healthcareplus.com',
            'phone' => '+1 (555) 456-7890',
            'status' => 'churned',
            'revenue' => '$800K',
            'employees' => 25,
            'initials' => 'HP',
            'industryIcon' => 'ph--heart',
            'lastActivity' => '1 week ago',
        ],
        [
            'id' => 5,
            'name' => 'Retail Dynamics',
            'industry' => 'Retail',
            'contact' => 'Robert Wilson',
            'email' => 'robert@retaildynamics.com',
            'phone' => '+1 (555) 567-8901',
            'status' => 'active',
            'revenue' => '$3.2M',
            'employees' => 85,
            'initials' => 'RD',
            'industryIcon' => 'ph--shopping-bag',
            'lastActivity' => '3 hours ago',
        ],
    ];
@endphp

<div class="w-full max-w-7xl px-1 sm:px-4 mx-auto">
    <!-- Header with Search and Filter -->
    <div class="flex items-center justify-between gap-4 pb-8">
        <div>
            <h2 class="text-xl font-semibold text-foreground mb-1">Organizations</h2>
            <p class="text-muted-foreground text-sm">Manage your customer relationships and track organization details.</p>
        </div>
        <div class="flex items-center gap-2">
            <x-ui.button size="sm">
                New organization
            </x-ui.button>
        </div>
    </div>

    <x-ui.table class="text-left">
        <x-ui.table.columns class="font-semibold">
            <x-ui.table.column class="uppercase tracking-wider min-w-48 pl-0">
                Organization
            </x-ui.table.column>
            <x-ui.table.column class="uppercase tracking-wider">
                Industry
            </x-ui.table.column>
            <x-ui.table.column class="uppercase tracking-wider min-w-40">
                Contact
            </x-ui.table.column>
            <x-ui.table.column class="uppercase tracking-wider">
                Status
            </x-ui.table.column>
            <x-ui.table.column class="uppercase tracking-wider">
                Revenue
            </x-ui.table.column>
            <x-ui.table.column class="uppercase tracking-wider">
                Employees
            </x-ui.table.column>
            <x-ui.table.column class="uppercase tracking-wider">
                Last Activity
            </x-ui.table.column>
            <x-ui.table.column class="w-10"></x-ui.table.column>
        </x-ui.table.columns>
        <x-ui.table.rows class="divide-y divide-border [--gutter-x:--spacing(4)] [--gutter-y:--spacing(4)]">
            @foreach ($organizations as $organization)
                <x-ui.table.row hoverable class="group">
                    <x-ui.table.cell class="pl-0">
                        <div class="flex items-center gap-3">
                            <x-ui.avatar-placeholder size="sm" text="{{ $organization['initials'] }}"
                                variant="solid" intent="neutral" />
                            <div>
                                <div class="font-medium text-foreground">{{ $organization['name'] }}</div>
                                <div class="text-xs text-muted-foreground">{{ $organization['email'] }}</div>
                            </div>
                        </div>
                    </x-ui.table.cell>
                    <x-ui.table.cell>
                        <div class="flex items-center gap-2">
                            <x-ui.icon name="{{ $organization['industryIcon'] }}" size="sm"
                                class="text-muted-foreground" />
                            <span class="text-sm text-foreground">{{ $organization['industry'] }}</span>
                        </div>
                    </x-ui.table.cell>
                    <x-ui.table.cell>
                        <div>
                            <div class="text-sm font-medium text-foreground">{{ $organization['contact'] }}</div>
                            <div class="text-xs text-muted-foreground">{{ $organization['phone'] }}</div>
                        </div>
                    </x-ui.table.cell>
                    <x-ui.table.cell>
                        @if ($organization['status'] === 'active')
                            <span
                                class="ui-soft ui-soft-success inline-flex items-center gap-x-1 rounded-md px-2 py-1 text-xs font-medium">
                                <span class="size-2 rounded-full bg-success"></span>
                                Active
                            </span>
                        @elseif($organization['status'] === 'prospect')
                            <span
                                class="ui-soft ui-soft-warning inline-flex items-center gap-x-1 rounded-md px-2 py-1 text-xs font-medium">
                                <span class="size-2 rounded-full bg-warning"></span>
                                Prospect
                            </span>
                        @else
                            <span
                                class="ui-soft ui-soft-destructive inline-flex items-center gap-x-1 rounded-md px-2 py-1 text-xs font-medium">
                                <span class="size-2 rounded-full bg-danger"></span>
                                Churned
                            </span>
                        @endif
                    </x-ui.table.cell>
                    <x-ui.table.cell>
                        <span class="text-sm font-semibold text-foreground">{{ $organization['revenue'] }}</span>
                    </x-ui.table.cell>
                    <x-ui.table.cell>
                        <span class="text-sm text-foreground">{{ $organization['employees'] }}</span>
                    </x-ui.table.cell>
                    <x-ui.table.cell>
                        <span class="text-xs text-muted-foreground">{{ $organization['lastActivity'] }}</span>
                    </x-ui.table.cell>
                    <x-ui.table.cell class="pr-0.5">
                        <x-ui.button size="xs" variant="outline" intent="warning">
                            Edit
                        </x-ui.button>
                    </x-ui.table.cell>
                </x-ui.table.row>
            @endforeach
        </x-ui.table.rows>
    </x-ui.table>
    <div class="pt-6 flex items-center md:justify-between border-t border-border">
        <div class="text-sm text-muted-foreground">
            Showing 1 to {{ count($organizations) }} of {{ count($organizations) }} organizations
        </div>
        <div class="flex items-center gap-2">
            <x-ui.button size="sm" variant="ghost" icon-only aria-label="Go prev"
                class="border border-input" disabled>
                <x-ui.icon name="ph--caret-left" />
            </x-ui.button>
            <x-ui.button size="sm" variant="ghost" icon-only aria-label="Go next"
                class="border border-input">
                <x-ui.icon name="ph--caret-right" />
            </x-ui.button>
        </div>
    </div>
</div>

@php
    $organizations = [
        [
            'id' => 1,
            'name' => 'TechCorp Solutions',
            'industry' => 'Technology',
            'contact' => 'John Smith',
            'email' => 'john@techcorp.com',
            'phone' => '+1 (555) 123-4567',
            'status' => 'active',
            'revenue' => '$2.5M',
            'employees' => 150,
            'initials' => 'TC',
            'industryIcon' => 'ph--cpu',
            'lastActivity' => '2 hours ago',
        ],
        [
            'id' => 2,
            'name' => 'Global Marketing Inc',
            'industry' => 'Marketing',
            'contact' => 'Sarah Johnson',
            'email' => 'sarah@globalmarketing.com',
            'phone' => '+1 (555) 234-5678',
            'status' => 'prospect',
            'revenue' => '$1.2M',
            'employees' => 45,
            'initials' => 'GM',
            'industryIcon' => 'ph--megaphone',
            'lastActivity' => '1 day ago',
        ],
        [
            'id' => 3,
            'name' => 'FinanceHub LLC',
            'industry' => 'Finance',
            'contact' => 'Michael Chen',
            'email' => 'michael@financehub.com',
            'phone' => '+1 (555) 345-6789',
            'status' => 'active',
            'revenue' => '$5.8M',
            'employees' => 200,
            'initials' => 'FH',
            'industryIcon' => 'ph--bank',
            'lastActivity' => '5 hours ago',
        ],
        [
            'id' => 4,
            'name' => 'Healthcare Plus',
            'industry' => 'Healthcare',
            'contact' => 'Emily Davis',
            'email' => 'emily@healthcareplus.com',
            'phone' => '+1 (555) 456-7890',
            'status' => 'churned',
            'revenue' => '$800K',
            'employees' => 25,
            'initials' => 'HP',
            'industryIcon' => 'ph--heart',
            'lastActivity' => '1 week ago',
        ],
        [
            'id' => 5,
            'name' => 'Retail Dynamics',
            'industry' => 'Retail',
            'contact' => 'Robert Wilson',
            'email' => 'robert@retaildynamics.com',
            'phone' => '+1 (555) 567-8901',
            'status' => 'active',
            'revenue' => '$3.2M',
            'employees' => 85,
            'initials' => 'RD',
            'industryIcon' => 'ph--shopping-bag',
            'lastActivity' => '3 hours ago',
        ],
    ];
@endphp

<div class="w-full max-w-7xl px-1 sm:px-4 mx-auto">
    <x-ui.card size="none" class="rounded-ui">
        <!-- Header with Search and Filter -->
        <div class="p-4 flex items-center justify-between gap-4">
            <div>
                <h2 class="text-xl font-semibold text-foreground mb-1">Organizations</h2>
                <p class="text-muted-foreground text-sm">Manage your customer relationships and track organization details.</p>
            </div>
            <div class="flex items-center gap-2">
                <x-ui.button size="sm">
                    New organization
                </x-ui.button>
            </div>
        </div>

        <x-ui.table class="text-left">
            <x-ui.table.columns
                wrapper="bg-card border-y border-input/60 [--gutter-x:--spacing(4)] [--gutter-y:--spacing(4)]">
                <x-ui.table.column class="pr-0 text-xs uppercase tracking-wider w-8">
                    <x-ui.checkbox />
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider min-w-48">
                    Organization
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Industry
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider min-w-40">
                    Contact
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Status
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Revenue
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Employees
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Last Activity
                </x-ui.table.column>
                <x-ui.table.column class="w-10"></x-ui.table.column>
            </x-ui.table.columns>
            <x-ui.table.rows class="divide-y divide-border [--gutter-x:--spacing(4)] [--gutter-y:--spacing(4)]">
                @foreach ($organizations as $organization)
                    <x-ui.table.row hoverable class="group">
                        <x-ui.table.cell class="pr-0">
                            <x-ui.checkbox />
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <div class="flex items-center gap-3">
                                <x-ui.avatar-placeholder size="sm" text="{{ $organization['initials'] }}"
                                    variant="solid" intent="neutral" />
                                <div>
                                    <div class="font-medium text-foreground">{{ $organization['name'] }}</div>
                                    <div class="text-xs text-muted-foreground">{{ $organization['email'] }}</div>
                                </div>
                            </div>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <div class="flex items-center gap-2">
                                <x-ui.icon name="{{ $organization['industryIcon'] }}" size="sm"
                                    class="text-muted-foreground" />
                                <span class="text-sm text-foreground">{{ $organization['industry'] }}</span>
                            </div>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <div>
                                <div class="text-sm font-medium text-foreground">{{ $organization['contact'] }}</div>
                                <div class="text-xs text-muted-foreground">{{ $organization['phone'] }}</div>
                            </div>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            @if ($organization['status'] === 'active')
                                <span
                                    class="ui-soft ui-soft-success inline-flex items-center gap-x-1 rounded-md px-2 py-1 text-xs font-medium">
                                    <span class="size-2 rounded-full bg-success"></span>
                                    Active
                                </span>
                            @elseif($organization['status'] === 'prospect')
                                <span
                                    class="ui-soft ui-soft-warning inline-flex items-center gap-x-1 rounded-md px-2 py-1 text-xs font-medium">
                                    <span class="size-2 rounded-full bg-warning"></span>
                                    Prospect
                                </span>
                            @else
                                <span
                                    class="ui-soft ui-soft-destructive inline-flex items-center gap-x-1 rounded-md px-2 py-1 text-xs font-medium">
                                    <span class="size-2 rounded-full bg-danger"></span>
                                    Churned
                                </span>
                            @endif
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <span class="text-sm font-semibold text-foreground">{{ $organization['revenue'] }}</span>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <span class="text-sm text-foreground">{{ $organization['employees'] }}</span>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <span class="text-xs text-muted-foreground">{{ $organization['lastActivity'] }}</span>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <x-ui.button size="sm" variant="ghost" icon-only>
                                <x-ui.icon name="ph--dots-three-vertical" />
                            </x-ui.button>
                        </x-ui.table.cell>
                    </x-ui.table.row>
                @endforeach
            </x-ui.table.rows>
        </x-ui.table>

        <div class="p-4 flex items-center md:justify-between border-t border-border">
            <div class="text-sm text-muted-foreground">
                Showing 1 to {{ count($organizations) }} of {{ count($organizations) }} organizations
            </div>
            <div class="flex items-center gap-2">
                <x-ui.button size="sm" variant="ghost" icon-only aria-label="Go prev"
                    class="border border-input" disabled>
                    <x-ui.icon name="ph--caret-left" />
                </x-ui.button>
                <x-ui.button size="sm" variant="ghost" icon-only aria-label="Go next"
                    class="border border-input">
                    <x-ui.icon name="ph--caret-right" />
                </x-ui.button>
            </div>
        </div>
    </x-ui.card>
</div>

@php
    $users = [
        ['name' => 'Alex Rivera', 'email' => 'alex@company.com', 'role' => 'Admin', 'status' => 'active', 'joined' => 'Jan 15, 2024', 'avatar' => '/avatar2.webp'],
        ['name' => 'Sarah Chen', 'email' => 'sarah@company.com', 'role' => 'Developer', 'status' => 'active', 'joined' => 'Mar 22, 2024', 'avatar' => ''],
        ['name' => 'Michael Johnson', 'email' => 'michael@company.com', 'role' => 'Designer', 'status' => 'active', 'joined' => 'Apr 10, 2024', 'avatar' => ''],
        ['name' => 'Emily Davis', 'email' => 'emily@company.com', 'role' => 'Manager', 'status' => 'pending', 'joined' => 'Jun 05, 2024', 'avatar' => ''],
        ['name' => 'David Kim', 'email' => 'david@company.com', 'role' => 'Developer', 'status' => 'inactive', 'joined' => 'Aug 18, 2023', 'avatar' => ''],
        ['name' => 'Lisa Martinez', 'email' => 'lisa@company.com', 'role' => 'Developer', 'status' => 'active', 'joined' => 'Sep 01, 2024', 'avatar' => ''],
        ['name' => 'James Wilson', 'email' => 'james@company.com', 'role' => 'Support', 'status' => 'pending', 'joined' => 'Oct 12, 2024', 'avatar' => ''],
        ['name' => 'Anna Thompson', 'email' => 'anna@company.com', 'role' => 'Admin', 'status' => 'active', 'joined' => 'Nov 30, 2023', 'avatar' => ''],
    ];
@endphp

<div class="w-full max-w-7xl px-1 sm:px-4 mx-auto">
    <x-ui.card size="custom" class="[--card-padding:0px]">
        <div class="p-4 flex items-center justify-between gap-4 border-b border-border">
            <x-ui.input.group class="flex-1 max-w-xs md:h-9">
                <x-ui.input.leading absolute>
                    <x-ui.icon name="ph--magnifying-glass" />
                </x-ui.input.leading>
                <x-ui.input variant="unstyled" placeholder="Search users..." class="ps-10" />
            </x-ui.input.group>
            <div class="flex items-center gap-2">
                <x-ui.button size="none" variant="outline" class="gap-1 sm:btn-sm">
                    <x-ui.icon size="sm" name="ph--funnel" />
                    <span class="hidden sm:inline">Filter</span>
                </x-ui.button>
                <x-ui.select size="sm" class="w-32">
                    <x-ui.select.option value="all" label="All Roles" selected />
                    <x-ui.select.option value="admin" label="Admin" />
                    <x-ui.select.option value="developer" label="Developer" />
                    <x-ui.select.option value="designer" label="Designer" />
                    <x-ui.select.option value="manager" label="Manager" />
                </x-ui.select>
            </div>
        </div>

        <x-ui.table class="text-left">
            <x-ui.table.columns wrapper="bg-card [--gutter-x:--spacing(4)] [--gutter-y:--spacing(3)]">
                <x-ui.table.column class="pr-0 text-xs uppercase tracking-wider w-8">
                    <x-ui.checkbox id="select-all" />
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">User</x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider hidden sm:table-cell">Role</x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider hidden md:table-cell">Status</x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider hidden lg:table-cell">Joined</x-ui.table.column>
                <x-ui.table.column class="w-10"></x-ui.table.column>
            </x-ui.table.columns>
            <x-ui.table.rows class="divide-y divide-border [--gutter-x:--spacing(4)] [--gutter-y:--spacing(3)]">
                @foreach ($users as $user)
                    <x-ui.table.row>
                        <x-ui.table.cell class="pr-0">
                            <x-ui.checkbox id="select-{{ $loop->index }}" />
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <div class="flex items-center gap-3">
                                @if ($user['avatar'])
                                    <x-ui.avatar size="sm" radius="full" src="{{ $user['avatar'] }}" alt="" />
                                @else
                                    <x-ui.avatar-placeholder size="sm" radius="full" text="{{ substr($user['name'], 0, 2) }}" variant="solid" intent="neutral" />
                                @endif
                                <div>
                                    <p class="font-medium text-foreground text-sm">{{ $user['name'] }}</p>
                                    <p class="text-xs text-muted-foreground">{{ $user['email'] }}</p>
                                </div>
                            </div>
                        </x-ui.table.cell>
                        <x-ui.table.cell class="hidden sm:table-cell">
                            <span class="text-foreground text-sm">{{ $user['role'] }}</span>
                        </x-ui.table.cell>
                        <x-ui.table.cell class="hidden md:table-cell">
                            @if ($user['status'] === 'active')
                                <x-ui.badge variant="soft" intent="success" size="sm" class="inline-flex items-center gap-x-1 font-medium">
                                    <span class="size-1.5 rounded-full bg-current"></span>
                                    Active
                                </x-ui.badge>
                            @elseif($user['status'] === 'pending')
                                <x-ui.badge variant="soft" intent="warning" size="sm" class="inline-flex items-center gap-x-1 font-medium">
                                    <span class="size-1.5 rounded-full bg-current"></span>
                                    Pending
                                </x-ui.badge>
                            @else
                                <x-ui.badge variant="soft" intent="destructive" size="sm" class="inline-flex items-center gap-x-1 font-medium">
                                    <span class="size-1.5 rounded-full bg-current"></span>
                                    Inactive
                                </x-ui.badge>
                            @endif
                        </x-ui.table.cell>
                        <x-ui.table.cell class="hidden lg:table-cell">
                            <span class="text-muted-foreground text-sm">{{ $user['joined'] }}</span>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <x-ui.dropdown.trigger variant="ghost" size="xs" icon-only dropdown-id="actions-{{ $loop->index }}">
                                <x-ui.icon name="ph--dots-three-vertical" />
                            </x-ui.dropdown.trigger>
                            <x-ui.dropdown id="actions-{{ $loop->index }}" placement="bottom-end" class="w-40">
                                <x-ui.dropdown.item href="#">
                                    <x-ui.dropdown.icon><x-ui.icon name="ph--pencil" /></x-ui.dropdown.icon>
                                    <x-ui.dropdown.label>Edit</x-ui.dropdown.label>
                                </x-ui.dropdown.item>
                                <x-ui.dropdown.item href="#">
                                    <x-ui.dropdown.icon><x-ui.icon name="ph--prohibit" /></x-ui.dropdown.icon>
                                    <x-ui.dropdown.label>Suspend</x-ui.dropdown.label>
                                </x-ui.dropdown.item>
                                <x-ui.dropdown.separator />
                                <x-ui.dropdown.item href="#" intent="destructive">
                                    <x-ui.dropdown.icon class="text-current"><x-ui.icon name="ph--trash" /></x-ui.dropdown.icon>
                                    <x-ui.dropdown.label>Delete</x-ui.dropdown.label>
                                </x-ui.dropdown.item>
                            </x-ui.dropdown>
                        </x-ui.table.cell>
                    </x-ui.table.row>
                @endforeach
            </x-ui.table.rows>
        </x-ui.table>

        <div class="p-4 flex items-center justify-between border-t border-border">
            <span class="text-sm text-muted-foreground">Showing 1 to {{ count($users) }} of {{ count($users) }} users</span>
            <div class="flex items-center gap-2">
                <x-ui.button size="sm" variant="ghost" icon-only aria-label="Previous" class="border border-input" disabled>
                    <x-ui.icon name="ph--caret-left" class="size-3.5" />
                </x-ui.button>
                <x-ui.button size="sm" variant="solid" intent="neutral" class="min-w-8">1</x-ui.button>
                <x-ui.button size="sm" variant="ghost" class="min-w-8 border border-input">2</x-ui.button>
                <x-ui.button size="sm" variant="ghost" class="min-w-8 border border-input">3</x-ui.button>
                <x-ui.button size="sm" variant="ghost" icon-only aria-label="Next" class="border border-input">
                    <x-ui.icon name="ph--caret-right" class="size-3.5" />
                </x-ui.button>
            </div>
        </div>
    </x-ui.card>
</div>