@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 text-left'
                },
                {
                    data: 'status_badge',
                    name: 'is_active',
                    className: 'p-4'
                },
                {
                    data: 'actions',
                    name: 'actions',
                    orderable: false,
                    searchable: false,
                    className: 'p-4 text-right'
                },
            ],
        });
    </script>
@endpush