@extends('layouts.app')

@section('title', 'Social accounts')

@section('content')
<h1>Social accounts</h1>
@if(session('success'))
    <p class="message success" style="margin-bottom:16px;">{{ session('success') }}</p>
@endif
@if(session('error'))
    <p class="message error" style="margin-bottom:16px;">{{ session('error') }}</p>
@endif
<p style="margin-bottom:16px;"><a href="{{ route('social-accounts.create') }}" style="padding:8px 16px; background:var(--m3-primary); color:var(--m3-on-primary); border-radius:8px; text-decoration:none;">Connect account</a></p>
<div class="card">
    <h2>Connected accounts</h2>
    <div class="table-wrap">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Platform</th>
                    <th>Account / page</th>
                    <th>Status</th>
                    <th>Connected</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($socialAccounts as $a)
                    <tr>
                        <td>{{ ucfirst($a->platform) }}</td>
                        <td>{{ $a->account_id ?? '—' }}</td>
                        <td>{{ $a->status }}</td>
                        <td>{{ $a->created_at->format('M j, Y') }}</td>
                        <td>
                            <form method="post" action="{{ route('social-accounts.destroy', $a) }}" style="display:inline;" onsubmit="return confirm('Disconnect this account?');">@csrf @method('DELETE')<button type="submit" style="background:none;border:none;color:var(--m3-primary);cursor:pointer;padding:0;text-decoration:underline;">Disconnect</button></form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="empty-state">No accounts connected yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($socialAccounts->hasPages())
        <div class="pagination">{{ $socialAccounts->links() }}</div>
    @endif
</div>
@endsection