@extends('admin.layout')

@section('title', 'OG Previews')

@section('content')
<div style="padding: 24px;">
    <h1 style="margin: 0 0 8px; color: #fff;">Generated VS Cards</h1>
    <p style="color: #aaa; margin: 0 0 20px;">
        These are the 1200×630 PNGs that WhatsApp, Facebook, and Twitter show
        when a sports match video is shared. Generated on save; regenerated on
        edit. Filename is <code>match-{video_id}-{updated_at}.png</code>.
    </p>

    @if($files->isEmpty())
        <p style="color: #aaa;">No previews cached yet. Save a match video to generate one.</p>
    @else
        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px;">
            @foreach($files as $f)
                <div style="background: #1a1a1a; border: 1px solid #333; border-radius: 12px; overflow: hidden;">
                    <a href="{{ route('admin.og-previews.file', $f['name']) }}" target="_blank" style="display: block; background: #000;">
                        <img src="{{ route('admin.og-previews.file', $f['name']) }}"
                             alt="{{ $f['name'] }}"
                             style="display: block; width: 100%; height: auto;">
                    </a>
                    <div style="padding: 12px 14px; color: #ccc; font-size: 13px;">
                        <div style="font-weight: 600; color: #fff;">Video #{{ $f['id'] }}</div>
                        <div style="color: #888; margin-top: 4px; font-family: monospace; font-size: 11px; word-break: break-all;">
                            {{ $f['name'] }}
                        </div>
                        <div style="color: #888; margin-top: 4px;">
                            {{ number_format($f['size'] / 1024, 1) }} KB &middot;
                            {{ \Carbon\Carbon::createFromTimestamp($f['mtime'])->diffForHumans() }}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection