@extends('layouts.site.master')
@section('seo_title', ($category ?? null)?->seo_title ?? ($category ?? null)?->title ?? 'مقالات الوادز')
@section('seo_desc', ($category ?? null)?->seo_description ?? $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">
                {{ ($category ?? null)?->title ?? 'مقالات الوادز' }}
            </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>
                    @if(isset($category))
                        <li class="breadcrumb-item">
                            <a class="choral-filter font-14" href="{{ route('site.blog.list') }}">
                                دسته‌بندی مقالات
                            </a>
                        </li>
                    @endif
                    <li class="breadcrumb-item active mint-green font-14" aria-current="page">
                        {{ ($category ?? null)?->title ?? 'مقالات' }}
                    </li>
                </ol>
            </nav>
        </header>
        <section>
            <div class="row row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1 mx-0 mt-2 w-100 blog-list-grid">
                @foreach($blogs as $blog)
                    <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 blog-list-card"
                           href="{{route('site.blog.detail',$blog->url)}}">
                            <div class="overflow-hidden main-radius p-0 col-md-12 col-5 blog-list-card-media">
                                <img class="w-100 main-radius img transition h-100 object-fit-cover"
                                     src="{{$blog->getImageFile()}}" alt="{{$blog->title}}">
                            </div>
                            <div class="p-0 col-md-12 col-7 ps-md-0 ps-2 blog-list-card-content">
                        <span class="d-flex align-items-center light-gray gap-2 mt-2 font-12 light">
                            <img width="14" height="14" class="mb-1" src="{{asset('assets/site/img/date.svg')}}" alt="">
                            {{$blog->getJalaliCreatedAtAttribute()}}
                        </span>
                                <p class="m-0 dark-gray mt-2 font-14 limit-2">
                                    {{ $blog->title }}
                                </p>
                                <p class="m-0 light-gray mt-1 font-12 limit-2">
                                    {{ strip_tags($blog->short_description) }}
                                </p>
                                <span
                                    class="d-flex mint-green justify-content-md-start justify-content-end mt-2 align-items-center gap-2 font-10 blog-list-card-more">
                            مشاهده بیشتر
                            <img width="6" height="9.75" src="{{asset('assets/site/img/article-more.svg')}}" alt="">
                        </span>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
            {{ $blogs->links() }}
        </section>
    </div>
@endsection

@push('styles')
    <style>
        .blog-list-grid .col {
            display: flex;
        }

        .blog-list-card {
            height: 100%;
        }

        .blog-list-card-content {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .blog-list-card-more {
            margin-top: auto !important;
        }

        @media (min-width: 768px) {
            .blog-list-card {
                height: 325px;
                max-height: 325px;
                overflow: hidden;
            }

            .blog-list-card-media {
                height: 160px;
                min-height: 160px;
                max-height: 160px;
            }

            .blog-list-card-content {
                height: calc(325px - 160px - 1rem);
                overflow: hidden;
            }
        }
    </style>
@endpush