@extends('layouts.panel')
@section('content')
<div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between"><div><h2 class="text-3xl sm:text-4xl text-[#041627]">Volumes</h2><p class="text-[#44474c]">Manage journal volumes.</p></div><div class="flex flex-col gap-2 sm:flex-row"><a href="{{ route('admin.issues.index') }}" class="inline-flex justify-center bg-white border border-[#041627] text-[#041627] px-5 py-2 text-sm font-semibold rounded">Manage Issues</a><a href="{{ route('admin.volumes.create') }}" class="inline-flex justify-center bg-[#041627] text-white px-5 py-2 text-sm font-semibold rounded">New Volume</a></div></div>
<section class="bg-white border border-[#aeb6bf] overflow-hidden"><div class="overflow-x-auto"><table id="volumesTable" class="w-full min-w-[680px]"><thead><tr class="bg-[#041627] text-white text-xs uppercase"><th class="p-4 text-left">Title</th><th class="p-4 text-left">Year</th><th class="p-4 text-left">Status</th><th class="p-4 text-right">Actions</th></tr></thead><tbody class="divide-y divide-[#aeb6bf]"></tbody></table></div></section>
@endsection
@push('scripts')
<script>
NerosaDataTables.init('#volumesTable', {
  columns: [
    {data: 'title', name: 'title', className: 'p-4 font-semibold'},
    {data: 'year', name: 'year', className: 'p-4'},
    {data: 'status_badge', name: 'is_active', className: 'p-4'},
    {data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'p-4 text-right'},
  ],
});
</script>
@endpush