@extends('layouts.site.master')
@section('seo_title', 'دسته‌بندی مقالات')
@section('seo_desc', $setting->getSetting('seo_description'))
@section('content')
    <div class="container">
        <header class="p-2 pt-md-2 pt-0 mt-md-4 mt-0">
            <h1 class="extra-bold mb-2 dark-gray font-30">
                دسته‌بندی مقالات
            </h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a class="choral-filter font-14" href="{{ route('site.home') }}">
                            <img width="12" src="{{ asset('assets/site/img/bread-home.svg') }}" alt="">
                            خانه
                        </a>
                    </li>
                    <li class="breadcrumb-item active mint-green font-14" aria-current="page">
                        دسته‌بندی مقالات
                    </li>
                </ol>
            </nav>
        </header>

        <section class="mb-4">
            <div class="row row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1 mx-0 mt-2 w-100">
                @forelse($categories as $category)
                    <div class="col p-2 py-md-2 py-1">
                        <a class="row m-0 flex-md-column flex-row w-100 p-2 bg-white border main-radius article-box"
                           href="{{ route('site.blog.category', $category->url) }}">
                            <div class="overflow-hidden main-radius p-0 col-md-12 col-5">
                                <img class="w-100 main-radius img transition h-100 object-fit-cover"
                                     src="{{ $category->getImageFile() }}" alt="{{ $category->title }}">
                            </div>
                            <div class="p-0 col-md-12 col-7 ps-md-0 ps-2">
                                <p class="m-0 dark-gray mt-2 font-14 limit-2">
                                    {{ $category->title }}
                                </p>
                                <p class="m-0 light-gray mt-1 font-12">
                                    {{ $category->blogs_count }} مقاله
                                </p>
                            </div>
                        </a>
                    </div>
                @empty
                    <div class="col-12 p-2">
                        <div class="main-radius border bg-white p-4 text-center light-gray font-14">
                            هنوز دسته‌بندی فعالی ثبت نشده است.
                        </div>
                    </div>
                @endforelse
            </div>
        </section>
    </div>
@endsection