<section class="rounded-2xl border border-slate-200 bg-white p-5">
    <div class="flex flex-wrap items-start justify-between gap-3">
        <div>
            <h2 class="text-sm font-semibold text-slate-900">Service catalog</h2>
            <p class="mt-0.5 text-xs text-slate-500">Billable services seeded when this module is activated. Invoices use the Billing Engine.</p>
        </div>
    </div>

    <div class="mt-4 overflow-x-auto">
        <table class="min-w-full text-left text-sm">
            <thead class="border-b border-slate-100 text-xs uppercase tracking-wide text-slate-500">
                <tr>
                    <th class="px-2 py-2 font-medium">Code</th>
                    <th class="px-2 py-2 font-medium">Service</th>
                    <th class="px-2 py-2 font-medium">Type</th>
                    <th class="px-2 py-2 text-right font-medium">Amount</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($services as $service)
                    <tr class="border-b border-slate-50">
                        <td class="px-2 py-2 font-mono text-xs text-slate-500">{{ $service['code'] ?? '' }}</td>
                        <td class="px-2 py-2 font-medium text-slate-800">{{ $service['label'] ?? '' }}</td>
                        <td class="px-2 py-2 text-slate-500">{{ $service['type'] ?? 'misc' }}</td>
                        <td class="px-2 py-2 text-right tabular-nums text-slate-800">
                            {{ $currency ?? 'GHS' }} {{ number_format(((int) ($service['amount_minor'] ?? 0)) / 100, 2) }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="px-2 py-8 text-center text-slate-500">No services provisioned. Re-activate the module to seed the catalog.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <p class="mt-4 text-xs text-slate-500">
        Add a service to a visit invoice from a specialty <a href="{{ route('care.specialty.show', $moduleKey) }}" class="font-medium text-indigo-600">visit workspace</a> Billing tab.
    </p>
</section>
