@component('home.layouts.component', ['title' => 'صفحه دسته‌بندی مقاله'])

    @slot('style')
    @endslot

    @slot('content_top')
    @endslot

    @slot('content')
        <section class="container my-5">
            <div class="row">
                <div class="col-lg-9">
                    <h1 class="article-category-title-holder">
                        لیست مقالات
                    </h1>
                    <div class="article-category-content-holder">
                        @for($i=0; $i<6; $i++)
                        <div class="article-content">
                            <div class="sub-title">
                                <div class="d-flex">
                                    <div class="published-at">
                                        <i class="fa fa-calendar"></i>
                                        <span>
                                            ۱۴۰۰/۰۵/۰۳
                                        </span>
                                    </div>
                                    <div class="comments">
                                        <i class="fa fa-comment-o"></i>
                                        <span>
                                            ۴
                                        </span>
                                    </div>
                                </div>
                                <div class="duration-of-study">
                                    <i class="fa fa-clock-o"></i>
                                    <span>
                                        مدت زمان مطالعه ۲۴ دقیقه
                                    </span>
                                </div>
                            </div>
                            <div class="title">
                                <a href="">
                                    عنوان مقاله اول متون بلکه روزنامه و مجله در ستون
                                </a>
                            </div>
                            <div class="lead-text">
                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته
                            </div>
                            <div class="category">
                                <span class="fs-8">
                                    دسته‌بندی:
                                </span>
                                <a href="" class="badge bg-info text-dark">
                                    جاوا
                                </a>
                                <a href="" class="badge bg-info text-dark">
                                    کدنویسی
                                </a>
                                <a href="#" class="badge bg-info text-dark">
                                    برنامه‌نویسی
                                </a>
                                <a href="#" class="badge bg-info text-dark">
                                    مهندسی معکوس
                                </a>
                            </div>
                            <div class="article-footer">
                                <div class="author-published-holder">
                                    <div class="author-avatar-holder">
                                        <img class="author-avatar" src="https://beyondco.de/img/marcel.jpg" alt="avater">
                                    </div>
                                    <div class="author-name">
                                        مشخصات نویسنده
                                    </div>
                                </div>
                                <div class="learn-more">
                                    <a href="" class="btn btn-outline-primary">
                                        ادامه مطلب
                                        <i class="fa fa-arrow-left align-middle"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endfor
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="my-3 text-center">
                        <img src="{{ asset('images/home/banner/g6.gif') }}" alt="image">
                    </div>
                    <div class="my-3 text-center">
                        <img src="{{ asset('images/home/banner/g5.gif') }}" alt="image">
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="pagination-holder d-flex justify-content-center">
                        <nav>
                            <ul class="pagination pagination">
                                <li class="page-item active" aria-current="page">
                                    <span class="page-link">1</span>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </section>
    @endslot

    @slot('script')
        <script>
        </script>
    @endslot

@endcomponent