@extends('layouts.panel')
@section('content')
<div class="flex items-end justify-between">
  <div><h2 class="text-4xl text-[#041627]">Articles</h2><p class="text-[#44474c]">Manage submissions and lifecycle states.</p></div>
  <a href="{{ route('articles.create') }}" class="bg-[#041627] text-white px-5 py-2 text-sm font-semibold rounded">New Submission</a>
</div>

<form method="GET" id="articlesFilter" class="bg-white border border-[#aeb6bf] p-4 flex gap-3 items-center">
  <input name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Search by title..." class="flex-1 border border-[#aeb6bf] p-2 bg-[#f7fafc]">
  <select name="status" class="border border-[#aeb6bf] p-2 bg-[#f7fafc]">
    <option value="">All Statuses</option>
    @foreach(['submitted','under_review','revision_requested','resubmitted','accepted','published'] as $status)
      <option value="{{ $status }}" @selected(($filters['status'] ?? '') === $status)>{{ str_replace('_',' ', ucfirst($status)) }}</option>
    @endforeach
  </select>
  <button class="bg-[#041627] text-white px-4 py-2 text-sm font-semibold">Filter</button>
</form>

<section class="bg-white border border-[#aeb6bf] overflow-hidden">
<table id="articlesTable" class="w-full"><thead><tr class="bg-[#041627] text-white text-xs uppercase"><th class="p-4 text-left">ID / Title</th><th class="p-4 text-left">Category</th><th class="p-4 text-left">Status</th><th class="p-4 text-left">Author</th><th class="p-4 text-right">Actions</th></tr></thead>
<tbody class="divide-y divide-[#aeb6bf]"></tbody></table>
</section>
@endsection
@push('scripts')
<script>
NerosaDataTables.init('#articlesTable', {
  filterForm: '#articlesFilter',
  columns: [
    {data: 'identity', name: 'identity', orderable: false, className: 'p-4'},
    {data: 'category_name', name: 'category_name', orderable: false, className: 'p-4'},
    {data: 'status_badge', name: 'status_badge', orderable: false, className: 'p-4'},
    {data: 'author_name', name: 'author_name', orderable: false, className: 'p-4'},
    {data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'p-4 text-right'},
  ],
});
</script>
@endpush