@extends('layouts.site_layout')
@section('title')
    معرفی اتم های حاضر در رویداد
@endsection
@section('custom-css')
    <style>
        .my_logo {
            width: 300px;
        }
        .my_hr{
            width: 60%;
            height: 2px;
            border-radius: 5px;
            background: red;
        }
        /*.no-js .owl-carousel, .owl-carousel.owl-loaded{*/
        /*    direction: rtl !important;*/
        /*}*/
    </style>
@endsection
@section('content')
    <div class="container mt-4">
        <div class="row">
            <div class="col-12 text-center">
                <a href="{{route('home')}}">
                    <img src="{{asset('site/assets/images/logo.png')}}" class="my_logo">
                </a>
                <hr class="my_hr">
                <h3>
                    شناسنامه های بخش {{$cat_title}}
                </h3>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-12 mb-5">
                <div class="owl-carousel owl-theme">
                    @foreach($category_post_info as $category_post)
                    <div class="item">
                        <a href="{{route('detail',['id' => $category_post['post_id']])}}">
                            <img src="{{asset($category_post['post_info']['post_image'])}}" style="margin-bottom: 20px">
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection
@section('custom-js')
    <script>
        $('.owl-carousel').owlCarousel({
            loop:true,
            margin:10,
            responsiveClass:true,
            responsive:{
                0:{
                    items:1,
                    nav:true
                },
                480:{
                    items:3,
                    nav:true
                },
                768:{
                    items:3,
                    nav:true,
                    loop:true
                }
            }
        })
    </script>
@endsection