@extends('layouts.app')

@section('title', 'My Content')

@section('content')
    <div class="mb-6 flex items-center justify-between">
        <h1 class="text-2xl font-bold">My Content</h1>
        <a href="{{ route('user.contents.create') }}" class="btn-primary rounded-lg px-4 py-2 text-sm font-semibold">Upload New</a>
    </div>

    <div class="space-y-3">
        @forelse ($contents as $item)
            <article class="rounded-xl border border-slate-200 bg-white p-4">
                <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h2 class="font-semibold">{{ $item->title }}</h2>
                        <p class="text-xs text-slate-500">{{ $item->content_type_label }} | {{ $item->category?->name }}</p>
                        <p class="text-xs mt-1 {{ $item->approval_status === 'approved' ? 'text-emerald-600' : ($item->approval_status === 'rejected' ? 'text-rose-600' : 'text-amber-600') }}">
                            Status: {{ $item->approval_status_label }}
                            @if ($item->approval_note)
                                | Note: {{ $item->approval_note }}
                            @endif
                        </p>
                    </div>
                    <div class="flex gap-2 text-xs">
                        <a href="{{ route('user.contents.edit', $item) }}" class="rounded-lg border border-slate-200 px-3 py-1.5 text-sky-700">Edit</a>
                        <form action="{{ route('user.contents.destroy', $item) }}" method="post" onsubmit="return confirm('Delete this content?');">
                            @csrf
                            @method('DELETE')
                            <button class="rounded-lg border border-red-200 px-3 py-1.5 text-red-600">Delete</button>
                        </form>
                    </div>
                </div>
            </article>
        @empty
            <p class="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-600">No content uploaded yet.</p>
        @endforelse
    </div>

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