@extends('index')

@section('content')
    @foreach($article_item as $category_id  => $articles)
        @if($category_id != array_key_last($article_item))
            <section class="section">
                <div class="container border-bottom">
                    <div class="section-he$article_itemader">
                        <h2 class="section-heading fw-bold text-center">{{$category_item[$category_id]}}</h2>
                        <a href="{{route('frontend.article_list', ['article_category_name' => \App\Models\ArticleCategory::categoryMap()[$category_item[$category_id]]])}}" class="more">查看更多</a>
                    </div>

                    <div class="carousel carousel-pagination-custom">
                        <div class="swiper" data-swiper-initial-view="2" data-swiper-slides-per-view="3" data-swiper-loop="true" data-autoplay="false">
                            <div class="swiper-wrapper">
                                @foreach($articles as $article)
                                    <div class="swiper-slide">
                                        <div class="image-card">
                                            <a href="{{route('frontend.article_show', ['article_category_id' => $category_id, 'article_title' => $article->article_title])}}" class="image-box">
                                                <span class="image-box-outer ratio-16-9">
                                                    <span class="image-box-inner">
                                                        <img src="{{asset('storage/' . $article->article_image)}}" class="object-fit-contain img-fluid">
                                                    </span>
                                                </span>
                                            </a>
                                            <h4 class="image-card__caption">
                                                <a href="{{route('frontend.article_show', ['article_category_id' => $category_id, 'article_title' => $article->article_title])}}" class="ellipsis ellipsis-line-3">
                                                    {{$article->article_title}}
                                                </a>
                                            </h4>
                                            <div class="image-card__footer">
                                                <div class="text-muted">{{date_format($article->article_begin_at, 'Y-m-d')}}</div>
                                                <div class="d-flex align-items-center text-muted">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
                                                        <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
                                                        <path fill-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z" clip-rule="evenodd" />
                                                    </svg>
                                                    <span class="ms-1">{{$article->article_scan_count}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>

                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </section>
        @else
            <section class="section">
                <div class="container pb-5">
                    <div class="section-header">
                        <h1 class="section-heading fw-bold text-center">{{$category_item[$category_id]}}</h2>
                    </div>
                    <div class="row listing">
                        @foreach($articles as $article)
                            <div class="col-lg-6 list-item">
                                <div class="image-card--h">
                                    <div class="inner-content">
                                        <h4 class="image-card__caption mt-0 mb-1">
                                            <a href="{{route('frontend.article_show', ['article_category_id' => $category_id, 'article_title' => $article->article_title])}}" class="ellipsis ellipsis-line-1">
                                                {{$article->article_title}}
                                            </a>
                                        </h4>
                                        <p class="image-card__summary ellipsis ellipsis-line-2 mb-1">{{$article->article_summary}}</p>
                                        <div class="image-card__footer">
                                            <div class="text-muted">{{date_format($article->article_begin_at, 'Y-m-d')}}</div>
                                            <div class="d-flex align-items-center text-muted">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
                                                    <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
                                                    <path fill-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z" clip-rule="evenodd" />
                                                </svg>
                                                <span class="ms-1">{{$article->article_scan_count}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="{{route('frontend.article_show', ['article_category_id' => $category_id, 'article_title' => $article->article_title])}}" class="image-box">
                                    <span class="image-box-outer ratio-16-9">
                                        <span class="image-box-inner">
                                            <img src="{{asset('storage/' . $article->article_image)}}" class="object-fit-contain img-fluid">
                                        </span>
                                    </span>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <a href="{{route('frontend.article_list', ['article_category_name' => \App\Models\ArticleCategory::categoryMap()[$category_item[$category_id]]])}}" class="button button-outline-primary mx-auto mt-5">查看更多文章</a>
                </div>
            </section>
        @endif
    @endforeach
@endsection