<x-app-layout>
    <x-slot name="header">
        <div class="d-flex justify-content-between align-items-center">
            <h2 class="fw-semibold fs-4">
                {{ __('Creatives') }}
            </h2>
            <a href="{{ route('creatives.create') }}" class="btn btn-primary">New Creative</a>
        </div>
    </x-slot>

    <div class="py-4">
        <div class="container">
            @if (session('status'))
                <div class="alert alert-success">{{ session('status') }}</div>
            @endif

            <div class="card shadow-sm">
                <div class="card-body">
                    @if ($creatives->isEmpty())
                        <p class="text-muted mb-0">No creatives yet. Click "New Creative" to generate one.</p>
                    @else
                        <div class="table-responsive">
                            <table class="table align-middle">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Type</th>
                                        <th>Source</th>
                                        <th>Status</th>
                                        <th>Created</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($creatives as $creative)
                                        <tr>
                                            <td>{{ $creative->id }}</td>
                                            <td>{{ $creative->type }}</td>
                                            <td>{{ $creative->source }}</td>
                                            <td>
                                                <span class="badge bg-{{ match($creative->status) {
                                                    'completed' => 'success',
                                                    'failed' => 'danger',
                                                    'queued' => 'secondary',
                                                    default => 'warning',
                                                } }}">
                                                    {{ $creative->status }}
                                                </span>
                                            </td>
                                            <td>{{ $creative->created_at->diffForHumans() }}</td>
                                            <td>
                                                <a href="{{ route('creatives.show', $creative) }}" class="btn btn-sm btn-outline-primary">View</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="mt-3">
                            {{ $creatives->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
