@extends('admin.layouts.app')
@section('title', __('admin.menu_articles'))
@section('heading', __('admin.menu_articles'))
@section('content')
<x-admin.filter-scope>
@can(\App\Models\Permission::PRODUCTS_CREATE)
    <x-admin.page-header :title="__('admin.menu_articles')" :create-route="route('admin.articles.create')" :show-filter="true" />
@else
    <x-admin.page-header :title="__('admin.menu_articles')" :show-filter="true" />
@endcan
<x-admin.filter-panel>
    <form method="get" class="admin-filter-form flex flex-wrap items-end gap-3">
        <div class="min-w-[12rem] flex-1">
            <label class="admin-label">{{ __('admin.search') }}</label>
            <input type="search" name="search" value="{{ request('search') }}" class="admin-input" />
        </div>
        <div class="min-w-[12rem]">
            <label class="admin-label">{{ __('admin.category') }}</label>
            <x-admin.category-select
                name="category_id"
                :options="$categories"
                :value="request('category_id')"
                :placeholder="__('admin.search_placeholder')"
            />
        </div>
        <button type="submit" class="admin-btn-primary">{{ __('admin.search') }}</button>
    </form>
</x-admin.filter-panel>
<div class="admin-card">
    <div class="admin-table-wrap"><table class="admin-table">
        <thead><tr><th>#</th><th>{{ __('admin.image') }}</th><th>{{ __('admin.title') }}</th><th>{{ __('admin.category') }}</th><th>{{ __('admin.is_active') }}</th><th class="admin-table-actions">{{ __('admin.actions') }}</th></tr></thead>
        <tbody>
        @forelse($articles as $article)
            <tr>
                <td>{{ $article->id }}</td>
                <td>
                    @if ($article->image)
                        <img src="/storage/{{ ltrim($article->image, '/') }}" alt="" class="h-12  rounded-lg object-cover  " />
                    @else
                        <span class="text-xs text-slate-400">—</span>
                    @endif
                </td>
                <td>{{ $article->title_fa }}</td>
                <td>{{ $article->category?->name_fa }}</td>
                <td><x-admin.status-badge :active="$article->is_active" /></td>
                <td class="admin-table-actions">
                    <x-admin.table-actions
                        :edit-href="auth()->user()->can(\App\Models\Permission::PRODUCTS_EDIT) ? route('admin.articles.edit', $article) : null"
                        :delete-action="auth()->user()->can(\App\Models\Permission::PRODUCTS_DELETE) ? route('admin.articles.destroy', $article) : null"
                        :toggle-action="auth()->user()->can(\App\Models\Permission::PRODUCTS_EDIT) ? route('admin.articles.toggle', $article) : null"
                    />
                </td>
            </tr>
        @empty
            <tr><td colspan="6" class="py-8 text-center text-slate-500">{{ __('admin.empty') }}</td></tr>
        @endforelse
        </tbody>
    </table></div>
    <div class="mt-4">{{ $articles->links() }}</div>
</div>
</x-admin.filter-scope>
@endsection