@extends('admin.dashboard.layout', ['title' => 'Blogs'])
@section('content')
    <main class="body-wrapper">
        <div class="page-wrapper">
            <!-- Page-Title -->
            <div class="row justify-content-between align-items-center mb-3 pt-3 gy-4">
                <div class="col-md-4 col-12">
                    <h1 class="m-0">Blogs</h1>
                </div>
                <div class="col-md-8 col-12">
                    <div class="d-flex gap-2 justify-content-start justify-content-md-end flex-wrap">
                        <!-- search-input -->
                        <div class="field flex-sm-100">
                            <x-admin.table-search placeholder="Search by Title" />
                        </div>
                        @include('admin.blog.filter')
                        <a href="{{ route('blog.create') }}" class="btn btn-secondary with-icon">Create Blog <span
                                class="iconify" data-icon="mdi:plus-circle-outline" data-inline="false"></span></a>
                    </div>
                </div>
            </div>
            <!-- Inner-wrapper -->
            <x-admin.table>
                <x-slot:head>
                    <th>
                        <div class="heading">
                            <h6>Title</h6>
                            <a href="javascript:void(0)" data-order-by="title" data-order="asc" class="table-sort"> <img
                                    class="sort-icon" id="sort-icon" src="{{ asset('admin/images/sort-icon.svg') }} "
                                    alt="sorting-icon"></a>
                        </div>
                    </th>
                    <th>
                        <div class="heading">
                            <h6>Category</h6>
                            <a href="javascript:void(0)" data-order-by="category" data-order="asc" class="table-sort">
                                <img class="sort-icon" id="sort-icon" src="{{ asset('admin/images/sort-icon.svg') }} "
                                    alt="sorting-icon"></a>
                        </div>
                    </th>
                    <th>
                        <div class="heading">
                            <h6>Author</h6>
                            <a href="javascript:void(0)" data-order-by="user" data-order="asc" class="table-sort"> <img
                                    class="sort-icon" id="sort-icon" src="{{ asset('admin/images/sort-icon.svg') }} "
                                    alt="sorting-icon"></a>
                        </div>
                    </th>
                    <th>
                        <div class="heading">
                            <h6>Status</h6>
                            <a href="javascript:void(0)" data-order-by="status" data-order="asc" class="table-sort"> <img
                                    class="sort-icon" id="sort-icon" src="{{ asset('admin/images/sort-icon.svg') }} "
                                    alt="sorting-icon"></a>
                        </div>

                    </th>
                    <th>
                        <div class="heading">
                            <h6>Created At</h6>
                            <a href="javascript:void(0)" data-order-by="created_at" data-order="asc" class="table-sort">
                                <img class="sort-icon" id="sort-icon" src="{{ asset('admin/images/sort-icon.svg') }} "
                                    alt="sorting-icon"></a>
                        </div>
                    </th>
                </x-slot:head>
            </x-admin.table>
    </main>
@endsection
@section('scripts')
    <script src="{{ asset('admin/assets/js/view-scripts/common.js') }}"></script>

    <script src="{{ asset('admin/assets/js/view-scripts/blog-management/listing.js') }}"></script>
@endsection