@extends('layouts.dashboard.inface', ['section' => 'agents'])

@section('content')
    <div class="flex-1 overflow-y-auto p-6 no-scrollbar">
        <!-- Breadcrumbs -->
        <div class="flex items-center gap-2 text-sm">
            <a class="text-text-sub-light dark:text-text-sub-dark hover:text-primary dark:hover:text-primary"
                href="#">Dashboard</a>
            <span class="text-text-sub-light dark:text-gray-600">/</span>
            <a class="text-text-sub-light dark:text-text-sub-dark hover:text-primary dark:hover:text-primary"
                href="#">Agents</a>
            <span class="text-text-sub-light dark:text-gray-600">/</span>
            <span class="font-medium text-text-main-light dark:text-text-main-dark">Carlos Rodriguez</span>
        </div>
        <!-- Profile Header -->
        <div class="bg-card-light dark:bg-card-dark rounded-xl p-6 shadow-sm border border-gray-100 dark:border-gray-800">
            <div class="flex flex-col md:flex-row gap-6 items-start md:items-center justify-between">
                <div class="flex flex-col sm:flex-row gap-5 items-center sm:items-start text-center sm:text-left">
                    <div class="relative">
                        <div class="bg-center bg-no-repeat bg-cover rounded-full size-24 border-4 border-white dark:border-gray-700 shadow-md"
                            data-alt="Portrait of real estate agent Carlos Rodriguez"
                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDXIJAfZPv0_QvjK61P7vNRPsk0gI6kMPTmHE5ARBTmNRdKotck7T58P5785E8VSzitzKSmKchXUsvK7dWSavfeMii7FMF2yB77oDUTFGu1yAJvwlE802uDINxt8QRZgtft3ItWiRKHZd_9ieF_T4uet5Kcw6T6-mgW_YDjc0utFitV6QcV9HkQ5ECkyjc_lKg869pSi3EITjHf_nkFnkzBj-YInkVyPKaGPiz6kKgCh59vu6Gsvd4U2BLHieOzgIJLDgDRRH4hS98");'>
                        </div>
                        <div
                            class="absolute bottom-1 right-1 bg-green-500 size-4 rounded-full border-2 border-white dark:border-gray-800">
                        </div>
                    </div>
                    <div class="flex flex-col pt-1">
                        <h2 class="text-2xl font-bold text-text-main-light dark:text-text-main-dark">Carlos
                            Rodriguez</h2>
                        <p class="text-text-sub-light dark:text-text-sub-dark font-medium mt-1">Senior
                            Broker</p>
                        <div
                            class="flex items-center gap-1 text-sm text-text-sub-light dark:text-gray-500 mt-2 justify-center sm:justify-start">
                            <span class="material-symbols-outlined text-[18px]">location_on</span>
                            <span>Polanco, CDMX Branch</span>
                        </div>
                    </div>
                </div>
                {{-- <div class="flex gap-3 w-full md:w-auto">
                    <button
                        class="flex-1 md:flex-none items-center justify-center gap-2 px-4 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 text-sm font-semibold transition-colors">
                        <span class="material-symbols-outlined text-[20px]">chat</span>
                        Message
                    </button>
                    <button
                        class="flex-1 md:flex-none items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-semibold shadow-sm transition-colors">
                        <span class="material-symbols-outlined text-[20px]">call</span>
                        Contact
                    </button>
                </div> --}}
            </div>
        </div>
        <!-- KPI Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <!-- KPI Card 1 -->
            <div
                class="bg-card-light dark:bg-card-dark p-5 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm flex flex-col justify-between h-32">
                <div class="flex justify-between items-start">
                    <div class="flex flex-col">
                        <p class="text-sm font-medium text-text-sub-light dark:text-text-sub-dark">Total
                            Sales (YTD)</p>
                        <h3 class="text-2xl font-bold text-text-main-light dark:text-text-main-dark mt-1">
                            $12.5M <span class="text-sm font-normal text-text-sub-light dark:text-gray-500">MXN</span>
                        </h3>
                    </div>
                    <div class="bg-blue-50 dark:bg-blue-900/30 p-2 rounded-lg text-primary">
                        <span class="material-symbols-outlined">payments</span>
                    </div>
                </div>
                <div class="flex items-center gap-1 text-sm text-green-600 dark:text-green-400 font-medium">
                    <span class="material-symbols-outlined text-[16px]">trending_up</span>
                    <span>12% vs last year</span>
                </div>
            </div>
            <!-- KPI Card 2 -->
            <div
                class="bg-card-light dark:bg-card-dark p-5 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm flex flex-col justify-between h-32">
                <div class="flex justify-between items-start">
                    <div class="flex flex-col">
                        <p class="text-sm font-medium text-text-sub-light dark:text-text-sub-dark">
                            Conversion Rate</p>
                        <h3 class="text-2xl font-bold text-text-main-light dark:text-text-main-dark mt-1">
                            3.5%</h3>
                    </div>
                    <div class="bg-purple-50 dark:bg-purple-900/30 p-2 rounded-lg text-purple-600">
                        <span class="material-symbols-outlined">percent</span>
                    </div>
                </div>
                <div class="flex items-center gap-1 text-sm text-green-600 dark:text-green-400 font-medium">
                    <span class="material-symbols-outlined text-[16px]">arrow_upward</span>
                    <span>0.4% this month</span>
                </div>
            </div>
            <!-- KPI Card 3 -->
            <div
                class="bg-card-light dark:bg-card-dark p-5 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm flex flex-col justify-between h-32">
                <div class="flex justify-between items-start">
                    <div class="flex flex-col">
                        <p class="text-sm font-medium text-text-sub-light dark:text-text-sub-dark">Active
                            Prospects</p>
                        <h3 class="text-2xl font-bold text-text-main-light dark:text-text-main-dark mt-1">
                            42</h3>
                    </div>
                    <div class="bg-orange-50 dark:bg-orange-900/30 p-2 rounded-lg text-orange-600">
                        <span class="material-symbols-outlined">person</span>
                    </div>
                </div>
                <div class="flex items-center gap-1 text-sm text-text-sub-light dark:text-gray-500">
                    <span>5 New this week</span>
                </div>
            </div>
            <!-- KPI Card 4 -->
            <div
                class="bg-card-light dark:bg-card-dark p-5 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm flex flex-col justify-between h-32">
                <div class="flex justify-between items-start">
                    <div class="flex flex-col">
                        <p class="text-sm font-medium text-text-sub-light dark:text-text-sub-dark">
                            Appointments</p>
                        <h3 class="text-2xl font-bold text-text-main-light dark:text-text-main-dark mt-1">
                            18</h3>
                    </div>
                    <div class="bg-green-50 dark:bg-green-900/30 p-2 rounded-lg text-green-600">
                        <span class="material-symbols-outlined">event_available</span>
                    </div>
                </div>
                <div class="flex items-center gap-1 text-sm text-text-sub-light dark:text-gray-500">
                    <span>For current month</span>
                </div>
            </div>
        </div>
        <!-- Monthly Goal Progress -->
        <div class="bg-card-light dark:bg-card-dark rounded-xl p-6 shadow-sm border border-gray-100 dark:border-gray-800">
            <div class="flex justify-between items-end mb-3">
                <div>
                    <h3 class="text-base font-bold text-text-main-light dark:text-text-main-dark">October
                        Sales Goal</h3>
                    <p class="text-sm text-text-sub-light dark:text-text-sub-dark mt-1">Target: $2,500,000
                        MXN</p>
                </div>
                <div class="text-right">
                    <span class="text-2xl font-bold text-primary">$2,000,000</span>
                    <span class="text-sm font-medium text-text-sub-light dark:text-text-sub-dark">
                        (80%)</span>
                </div>
            </div>
            <div class="w-full bg-gray-100 dark:bg-gray-800 rounded-full h-4 overflow-hidden">
                <div class="bg-primary h-4 rounded-full transition-all duration-500 ease-out" style="width: 80%"></div>
            </div>
            <div class="flex justify-between mt-2 text-xs text-text-sub-light dark:text-gray-500">
                <span>Started Oct 1</span>
                <span>Ends Oct 31</span>
            </div>
        </div>
        <!-- Charts Section -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Sales Trend Chart (Simulated) -->
            <div
                class="bg-card-light dark:bg-card-dark rounded-xl p-6 shadow-sm border border-gray-100 dark:border-gray-800 flex flex-col h-80">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-base font-bold text-text-main-light dark:text-text-main-dark">Sales
                        Performance (6 Months)</h3>
                    <button
                        class="text-xs font-medium text-primary bg-primary/10 px-2 py-1 rounded hover:bg-primary/20 transition">Download
                        CSV</button>
                </div>
                <div class="flex-1 flex items-end justify-between gap-2 md:gap-4 px-2">
                    <!-- Bar 1 -->
                    <div class="flex flex-col items-center gap-2 w-full group">
                        <div
                            class="relative w-full bg-blue-100 dark:bg-blue-900/20 rounded-t-sm h-32 group-hover:bg-primary/30 transition-colors">
                            <div class="absolute bottom-0 w-full bg-primary rounded-t-sm" style="height: 45%;"></div>
                            <!-- Tooltip -->
                            <div
                                class="opacity-0 group-hover:opacity-100 absolute -top-10 left-1/2 -translate-x-1/2 bg-gray-900 text-white text-xs py-1 px-2 rounded whitespace-nowrap transition-opacity pointer-events-none z-10">
                                $0.9M
                            </div>
                        </div>
                        <span class="text-xs text-text-sub-light dark:text-gray-500">May</span>
                    </div>
                    <!-- Bar 2 -->
                    <div class="flex flex-col items-center gap-2 w-full group">
                        <div
                            class="relative w-full bg-blue-100 dark:bg-blue-900/20 rounded-t-sm h-32 group-hover:bg-primary/30 transition-colors">
                            <div class="absolute bottom-0 w-full bg-primary rounded-t-sm" style="height: 60%;"></div>
                            <div
                                class="opacity-0 group-hover:opacity-100 absolute -top-10 left-1/2 -translate-x-1/2 bg-gray-900 text-white text-xs py-1 px-2 rounded whitespace-nowrap transition-opacity pointer-events-none z-10">
                                $1.2M
                            </div>
                        </div>
                        <span class="text-xs text-text-sub-light dark:text-gray-500">Jun</span>
                    </div>
                    <!-- Bar 3 -->
                    <div class="flex flex-col items-center gap-2 w-full group">
                        <div
                            class="relative w-full bg-blue-100 dark:bg-blue-900/20 rounded-t-sm h-32 group-hover:bg-primary/30 transition-colors">
                            <div class="absolute bottom-0 w-full bg-primary rounded-t-sm" style="height: 30%;"></div>
                            <div
                                class="opacity-0 group-hover:opacity-100 absolute -top-10 left-1/2 -translate-x-1/2 bg-gray-900 text-white text-xs py-1 px-2 rounded whitespace-nowrap transition-opacity pointer-events-none z-10">
                                $0.6M
                            </div>
                        </div>
                        <span class="text-xs text-text-sub-light dark:text-gray-500">Jul</span>
                    </div>
                    <!-- Bar 4 -->
                    <div class="flex flex-col items-center gap-2 w-full group">
                        <div
                            class="relative w-full bg-blue-100 dark:bg-blue-900/20 rounded-t-sm h-32 group-hover:bg-primary/30 transition-colors">
                            <div class="absolute bottom-0 w-full bg-primary rounded-t-sm" style="height: 85%;"></div>
                            <div
                                class="opacity-0 group-hover:opacity-100 absolute -top-10 left-1/2 -translate-x-1/2 bg-gray-900 text-white text-xs py-1 px-2 rounded whitespace-nowrap transition-opacity pointer-events-none z-10">
                                $1.7M
                            </div>
                        </div>
                        <span class="text-xs text-text-sub-light dark:text-gray-500">Aug</span>
                    </div>
                    <!-- Bar 5 -->
                    <div class="flex flex-col items-center gap-2 w-full group">
                        <div
                            class="relative w-full bg-blue-100 dark:bg-blue-900/20 rounded-t-sm h-32 group-hover:bg-primary/30 transition-colors">
                            <div class="absolute bottom-0 w-full bg-primary rounded-t-sm" style="height: 70%;"></div>
                            <div
                                class="opacity-0 group-hover:opacity-100 absolute -top-10 left-1/2 -translate-x-1/2 bg-gray-900 text-white text-xs py-1 px-2 rounded whitespace-nowrap transition-opacity pointer-events-none z-10">
                                $1.4M
                            </div>
                        </div>
                        <span class="text-xs text-text-sub-light dark:text-gray-500">Sep</span>
                    </div>
                    <!-- Bar 6 -->
                    <div class="flex flex-col items-center gap-2 w-full group">
                        <div
                            class="relative w-full bg-blue-100 dark:bg-blue-900/20 rounded-t-sm h-32 group-hover:bg-primary/30 transition-colors">
                            <div class="absolute bottom-0 w-full bg-primary rounded-t-sm" style="height: 95%;"></div>
                            <div
                                class="opacity-0 group-hover:opacity-100 absolute -top-10 left-1/2 -translate-x-1/2 bg-gray-900 text-white text-xs py-1 px-2 rounded whitespace-nowrap transition-opacity pointer-events-none z-10">
                                $2.0M
                            </div>
                        </div>
                        <span class="text-xs font-bold text-primary">Oct</span>
                    </div>
                </div>
            </div>
            <!-- Funnel Chart (Simulated) -->
            <div
                class="bg-card-light dark:bg-card-dark rounded-xl p-6 shadow-sm border border-gray-100 dark:border-gray-800 flex flex-col h-80">
                <h3 class="text-base font-bold text-text-main-light dark:text-text-main-dark mb-6">Lead
                    Conversion Pipeline</h3>
                <div class="flex flex-col gap-3 justify-center flex-1">
                    <!-- Stage 1 -->
                    <div class="flex items-center gap-4 group">
                        <div class="w-24 text-xs font-medium text-text-sub-light dark:text-text-sub-dark text-right">
                            Leads (120)</div>
                        <div class="flex-1 h-8 bg-blue-50 dark:bg-blue-900/20 rounded-r-lg relative overflow-hidden">
                            <div
                                class="absolute left-0 top-0 h-full bg-blue-300 dark:bg-blue-600 w-full rounded-r-lg opacity-80 group-hover:opacity-100 transition-opacity">
                            </div>
                            <span
                                class="absolute right-2 top-1/2 -translate-y-1/2 text-xs font-bold text-blue-900 dark:text-white">100%</span>
                        </div>
                    </div>
                    <!-- Stage 2 -->
                    <div class="flex items-center gap-4 group">
                        <div class="w-24 text-xs font-medium text-text-sub-light dark:text-text-sub-dark text-right">
                            Prospects (42)</div>
                        <div class="flex-1 h-8 bg-blue-50 dark:bg-blue-900/20 rounded-r-lg relative overflow-hidden">
                            <div class="absolute left-0 top-0 h-full bg-blue-400 dark:bg-blue-500 rounded-r-lg opacity-80 group-hover:opacity-100 transition-opacity"
                                style="width: 65%"></div>
                            <span class="absolute left-2 top-1/2 -translate-y-1/2 text-xs font-bold text-white">35%</span>
                        </div>
                    </div>
                    <!-- Stage 3 -->
                    <div class="flex items-center gap-4 group">
                        <div class="w-24 text-xs font-medium text-text-sub-light dark:text-text-sub-dark text-right">
                            Visits (18)</div>
                        <div class="flex-1 h-8 bg-blue-50 dark:bg-blue-900/20 rounded-r-lg relative overflow-hidden">
                            <div class="absolute left-0 top-0 h-full bg-primary rounded-r-lg opacity-80 group-hover:opacity-100 transition-opacity"
                                style="width: 35%"></div>
                            <span class="absolute left-2 top-1/2 -translate-y-1/2 text-xs font-bold text-white">15%</span>
                        </div>
                    </div>
                    <!-- Stage 4 -->
                    <div class="flex items-center gap-4 group">
                        <div class="w-24 text-xs font-medium text-text-sub-light dark:text-text-sub-dark text-right">
                            Closing (4)</div>
                        <div class="flex-1 h-8 bg-blue-50 dark:bg-blue-900/20 rounded-r-lg relative overflow-hidden">
                            <div class="absolute left-0 top-0 h-full bg-indigo-600 rounded-r-lg opacity-80 group-hover:opacity-100 transition-opacity"
                                style="width: 15%"></div>
                            <span class="absolute left-2 top-1/2 -translate-y-1/2 text-xs font-bold text-white">3.5%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Portfolio Table -->
        <div
            class="bg-card-light dark:bg-card-dark rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden">
            <div class="p-6 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center">
                <h3 class="text-lg font-bold text-text-main-light dark:text-text-main-dark">Assigned
                    Portfolio</h3>
                <div class="flex gap-2">
                    <button
                        class="px-3 py-1.5 text-xs font-medium text-text-sub-light dark:text-text-sub-dark border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-800 transition">Filter</button>
                    <button
                        class="px-3 py-1.5 text-xs font-medium text-white bg-primary rounded hover:bg-primary/90 transition">Add
                        Lead</button>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm text-left">
                    <thead
                        class="text-xs text-text-sub-light dark:text-text-sub-dark uppercase bg-gray-50 dark:bg-gray-800/50">
                        <tr>
                            <th class="px-6 py-4 font-medium" scope="col">Lead Name</th>
                            <th class="px-6 py-4 font-medium" scope="col">Property Interest</th>
                            <th class="px-6 py-4 font-medium" scope="col">Budget (MXN)</th>
                            <th class="px-6 py-4 font-medium" scope="col">Stage</th>
                            <th class="px-6 py-4 font-medium" scope="col">Last Contact</th>
                            <th class="px-6 py-4 font-medium text-right" scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                        <!-- Row 1 -->
                        <tr
                            class="bg-card-light dark:bg-card-dark hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group cursor-pointer">
                            <td class="px-6 py-4 font-medium text-text-main-light dark:text-text-main-dark">
                                Maria Gonzalez
                                <div class="text-xs text-text-sub-light dark:text-gray-500 font-normal mt-0.5">
                                    m.gonzalez@example.com</div>
                            </td>
                            <td class="px-6 py-4 text-text-sub-light dark:text-text-sub-dark">Condo in Roma
                                Norte</td>
                            <td class="px-6 py-4 text-text-main-light dark:text-text-main-dark font-medium">
                                $4,500,000</td>
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
                                    Negotiation
                                </span>
                            </td>
                            <td class="px-6 py-4 text-text-sub-light dark:text-text-sub-dark">Oct 24, 2023
                            </td>
                            <td class="px-6 py-4 text-right">
                                <button
                                    class="text-text-sub-light dark:text-gray-500 hover:text-primary dark:hover:text-primary">
                                    <span class="material-symbols-outlined text-[20px]">chevron_right</span>
                                </button>
                            </td>
                        </tr>
                        <!-- Row 2 -->
                        <tr
                            class="bg-card-light dark:bg-card-dark hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group cursor-pointer">
                            <td class="px-6 py-4 font-medium text-text-main-light dark:text-text-main-dark">
                                Roberto Sanchez
                                <div class="text-xs text-text-sub-light dark:text-gray-500 font-normal mt-0.5">
                                    rob.sanchez@email.com</div>
                            </td>
                            <td class="px-6 py-4 text-text-sub-light dark:text-text-sub-dark">House in
                                Coyoacán</td>
                            <td class="px-6 py-4 text-text-main-light dark:text-text-main-dark font-medium">
                                $8,200,000</td>
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
                                    Viewing
                                </span>
                            </td>
                            <td class="px-6 py-4 text-text-sub-light dark:text-text-sub-dark">Oct 22, 2023
                            </td>
                            <td class="px-6 py-4 text-right">
                                <button
                                    class="text-text-sub-light dark:text-gray-500 hover:text-primary dark:hover:text-primary">
                                    <span class="material-symbols-outlined text-[20px]">chevron_right</span>
                                </button>
                            </td>
                        </tr>
                        <!-- Row 3 -->
                        <tr
                            class="bg-card-light dark:bg-card-dark hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group cursor-pointer">
                            <td class="px-6 py-4 font-medium text-text-main-light dark:text-text-main-dark">
                                Ana &amp; Luis Torres
                                <div class="text-xs text-text-sub-light dark:text-gray-500 font-normal mt-0.5">
                                    torres.family@outlook.com</div>
                            </td>
                            <td class="px-6 py-4 text-text-sub-light dark:text-text-sub-dark">Apartment in
                                Santa Fe</td>
                            <td class="px-6 py-4 text-text-main-light dark:text-text-main-dark font-medium">
                                $6,000,000</td>
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                                    Qualified
                                </span>
                            </td>
                            <td class="px-6 py-4 text-text-sub-light dark:text-text-sub-dark">Oct 20, 2023
                            </td>
                            <td class="px-6 py-4 text-right">
                                <button
                                    class="text-text-sub-light dark:text-gray-500 hover:text-primary dark:hover:text-primary">
                                    <span class="material-symbols-outlined text-[20px]">chevron_right</span>
                                </button>
                            </td>
                        </tr>
                        <!-- Row 4 -->
                        <tr
                            class="bg-card-light dark:bg-card-dark hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group cursor-pointer">
                            <td class="px-6 py-4 font-medium text-text-main-light dark:text-text-main-dark">
                                Javier Mendez
                                <div class="text-xs text-text-sub-light dark:text-gray-500 font-normal mt-0.5">
                                    jmendez99@gmail.com</div>
                            </td>
                            <td class="px-6 py-4 text-text-sub-light dark:text-text-sub-dark">Studio in
                                Condesa</td>
                            <td class="px-6 py-4 text-text-main-light dark:text-text-main-dark font-medium">
                                $3,100,000</td>
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
                                    Offer Made
                                </span>
                            </td>
                            <td class="px-6 py-4 text-text-sub-light dark:text-text-sub-dark">Oct 18, 2023
                            </td>
                            <td class="px-6 py-4 text-right">
                                <button
                                    class="text-text-sub-light dark:text-gray-500 hover:text-primary dark:hover:text-primary">
                                    <span class="material-symbols-outlined text-[20px]">chevron_right</span>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div
                class="px-6 py-4 border-t border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/30 flex items-center justify-between">
                <span class="text-xs text-text-sub-light dark:text-gray-500">Showing 4 of 42
                    prospects</span>
                <div class="flex gap-1">
                    <button
                        class="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-text-sub-light dark:text-text-sub-dark disabled:opacity-50">
                        <span class="material-symbols-outlined text-[20px]">chevron_left</span>
                    </button>
                    <button
                        class="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-text-sub-light dark:text-text-sub-dark">
                        <span class="material-symbols-outlined text-[20px]">chevron_right</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection