@extends('layouts.pages')

@section('content')
<div id="app">
    <div class="container">
        <div class="row">
            <div class="hot-area">
                <div>
                <a href="/post/{{$homeMainPost[0]->id}}"><img src="https://picsum.photos/seed/urtag{{$homeMainPost[0]->id}}/400/300?blur=2" alt=""></a>
                </div>
                <div class="info">
                    <a href="/post/{{$homeMainPost[0]->id}}"><h1>{{$homeMainPost[0]->title}}</h1></a>
                    <p>{{mb_substr($homeMainPost[0]->desc,0,500,"utf-8")}}...</p>
                </div>
            </div>
            <div class="col-md-8 col-sm-12 article-area col-xs-12">
                <h2>精選文章</h2> <a href="/all">看更多...</a>
                @foreach($homePosts as $post)
                <div class="one-article">
                    <div>
                        <a href="/post/{{$post->id}}"><img src="https://picsum.photos/seed/urtag{{$post->id}}/300/200?blur=2" alt=""></a>
                    </div>
                    <div class="info">
                        <a href="/post/{{$post->id}}"><h4>{{$post->title}}</h4></a>
                        <p>{{mb_substr($post->desc,0,300,"utf-8")}}...</p>
                    </div>
                </div>
                @endforeach


            </div>
            <div class="col-md-4 col-sm-12 col-xs-12">
                <div class="tags-area">
                    <h4>關鍵字</h4>
                    @if(!empty($baseKeywords))
                    @foreach($baseKeywords as $kid=>$keyword)
                        <span><a href="/look/{{$keyword->id}}" class="tags">#{{$keyword->keyword}}</a></span>
                    @endforeach
                    @endif
                </div>
                <div>
                    <h4>發燒文章</h4>
                    <ul>
                        @if(!empty($hotPosts))
                        @foreach($hotPosts as $relate)
                        <li><a class="relate-article" href='/post/{{$relate->id}}' taget='_blank'><p>{{$relate->title}}</p></a></li>
                        @endforeach
                        @endif
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{{ csrf_field() }}
@endsection


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