@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]">User Management</h2><p class="text-[#44474c]">Create author, editor, and reviewer accounts.</p></div>
  <a href="{{ route('admin.users.create') }}" class="inline-flex justify-center bg-[#041627] text-white px-5 py-2 text-sm font-semibold rounded">Add User</a>
</div>

<form method="GET" id="usersFilter" class="bg-white border border-[#aeb6bf] p-4 grid gap-3 sm:grid-cols-[minmax(0,1fr)_170px_auto] sm:items-center">
  <input name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Search name/email" class="w-full border border-[#aeb6bf] p-2 bg-[#f7fafc]">
  <div class="relative">
    <select name="role" class="w-full appearance-none border border-[#aeb6bf] bg-[#f7fafc] px-3 py-2 pr-10 text-sm text-[#041627] rounded focus:border-[#041627] focus:ring-0">
      <option value="">All roles</option>
      @foreach(['author','editor','reviewer'] as $role)
        <option value="{{ $role }}" @selected(($filters['role'] ?? '') === $role)>{{ ucfirst($role) }}</option>
      @endforeach
    </select>
    <span class="material-symbols-outlined pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[18px] text-[#44474c]">expand_more</span>
  </div>
  <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">
  <div class="overflow-x-auto">
  <table id="usersTable" class="w-full min-w-[760px]">
    <thead><tr class="bg-[#041627] text-white text-xs uppercase"><th class="p-4 text-left">Name</th><th class="p-4 text-left">Email</th><th class="p-4 text-left">Role</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('#usersTable', {
  filterForm: '#usersFilter',
  columns: [
    {data: 'name', name: 'name', className: 'p-4 font-semibold'},
    {data: 'email', name: 'email', className: 'p-4 text-sm text-[#44474c]'},
    {data: 'role_badge', name: 'role', className: 'p-4'},
    {data: 'status_badge', name: 'is_active', className: 'p-4'},
    {data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'p-4'},
  ],
});
</script>
@endpush