@extends('layouts.nova')

@section('content')
<div class="mx-auto max-w-6xl px-4 py-8">
    <div class="mb-4 flex items-center justify-between">
        <h1 class="text-xl font-semibold text-gray-100">Stories Management</h1>
        <div class="flex items-center gap-2">
            <a href="{{ route('admin.stories.review') }}" class="rounded-lg border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-sm text-amber-200">Review queue</a>
            <a href="{{ route('admin.stories.create') }}" class="rounded-lg border border-sky-500/40 bg-sky-500/10 px-3 py-2 text-sm text-sky-200">Create story</a>
        </div>
    </div>

    <div class="overflow-hidden rounded-xl border border-gray-700 bg-gray-900">
        <table class="min-w-full divide-y divide-gray-700 text-sm">
            <thead class="bg-gray-800 text-gray-300">
                <tr>
                    <th class="px-4 py-3 text-left">Title</th>
                    <th class="px-4 py-3 text-left">Creator</th>
                    <th class="px-4 py-3 text-left">Status</th>
                    <th class="px-4 py-3 text-left">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-800 text-gray-200">
                @foreach($stories as $story)
                    <tr>
                        <td class="px-4 py-3">{{ $story->title }}</td>
                        <td class="px-4 py-3">{{ $story->creator?->username ?? 'n/a' }}</td>
                        <td class="px-4 py-3">{{ $story->status }}</td>
                        <td class="px-4 py-3">
                            <a href="{{ route('admin.stories.show', ['story' => $story->id]) }}" class="text-amber-300">View</a>
                            <span class="mx-1 text-gray-500">|</span>
                            <a href="{{ route('admin.stories.edit', ['story' => $story->id]) }}" class="text-sky-300">Edit</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="mt-4">{{ $stories->links() }}</div>
</div>
@endsection