@extends('layouts.admin')
@section('title', 'Social connectors')
@section('content')
<x-admin.page
    title="Connectors"
    subtitle="Capability matrix for sandbox adapters. Connect accounts to entitle publish, inbox, and insights."
>
    <x-slot:actions>
        @if($sandbox)
            <span class="admin-btn pointer-events-none">Sandbox mode</span>
        @endif
        <a href="{{ route('admin.social.accounts.connect') }}" class="admin-btn admin-btn-primary">
            <i data-lucide="plug" class="h-3.5 w-3.5"></i> Connect account
        </a>
    </x-slot:actions>

    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        @foreach($catalog as $item)
            <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
                <div class="flex items-start justify-between gap-2">
                    <div>
                        <h2 class="text-sm font-semibold">{{ $item['label'] }}</h2>
                        <p class="mt-1 text-xs text-[#6d7175]">{{ $item['accounts']->count() }} connected account(s)</p>
                    </div>
                    <a href="{{ route('admin.social.accounts.connect') }}" class="admin-btn text-xs">Connect</a>
                </div>
                <div class="mt-3 flex flex-wrap gap-1">
                    @foreach($item['capabilities'] as $cap)
                        <span class="rounded bg-[#f1f2f4] px-2 py-0.5 text-[10px] font-medium">{{ $cap }}</span>
                    @endforeach
                </div>
                @if($item['accounts']->isNotEmpty())
                    <ul class="mt-3 space-y-1 text-xs text-[#6d7175]">
                        @foreach($item['accounts'] as $account)
                            <li>
                                <a href="{{ route('admin.social.accounts.show', $account) }}" class="text-[#2c6ecb] hover:underline">{{ $account->name }}</a>
                                · {{ $item['entitled_counts'][$account->id] ?? 0 }} entitled
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        @endforeach
    </div>
</x-admin.page>
@endsection