@extends('admin.layout')
@section('title', 'Daftar Provider')

@section('content')
<div class="toolbar">
    <h2 style="font-size:18px; color:#fff;">📚 Provider Tersedia</h2>
    <div style="display:flex; gap:8px;">
        <a href="{{ route('admin.videos.create') }}" class="btn btn-primary">+ Tambah Video</a>
        <a href="{{ route('admin.videos.index') }}" class="btn btn-secondary">← Kembali</a>
    </div>
</div>

<div style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:8px; padding:16px; margin-bottom:16px;">
    <div style="font-size:13px; color:#aaa; margin-bottom:8px;">
        Total provider terdaftar: <strong>{{ count($providers) }}</strong>
    </div>

    @if(count($providers) > 0)
        <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px;">
            @foreach($providers as $provider)
                <div style="background:#111; border:1px solid #2a2a2a; border-radius:6px; padding:10px 12px; font-size:13px; color:#ddd;">
                    {{ $provider }}
                </div>
            @endforeach
        </div>
    @else
        <div class="empty-state">
            <p>Belum ada provider terdaftar.</p>
        </div>
    @endif
</div>
@endsection