@extends('layouts.ssipages')

@section('content')
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <h1>{{$subSetting['title']}}-第{{$page}}頁</h1>
                <ol class="bread-area" itemscope itemtype="http://schema.org/BreadcrumbList">
                    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                        <a itemprop="item" href="/">
                            <span itemprop="name">{{$subSetting['meta']['seotitle']}}</span></a>/
                        <meta itemprop="position" content="1" />
                    </li>
                </ol>
                @if(!empty($mainKeywords))
                    <div class="c-grid c-grid-2-cols md:c-grid-4-cols">
                        @foreach($mainKeywords as $key=>$keyword)
                            <div class='c-column'>
                                <div class="overview-step__card card-hover">
                                    
                                        <img src="https://picsum.photos/seed/urtagssi{{$keyword->id}}/300/200?blur=2" alt="">
                                        <h2>{{$keyword->keyword}}</h2>
                                        @if(!empty($socialSpaceHomepage[$key]))
                                            <a href="/tag/{{$keyword->id}}">    
                                                @foreach($socialSpaceHomepage[$key]['content'] as $content)
                                                    <p class="brief">{!!$content!!}</p>
                                                @endforeach
                                                <p class="more" >了解更多 <i class="fa-solid fa-chevron-right"></i> </p>
                                            </a>
                                        @endif
                                    
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
                <div class="pagnation">
                    {{ $mainKeywords->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
{{ csrf_field() }}
@endsection


@push('stylesheet')
@endpush
@push('scripts')
@endpush