@extends('blog.layout.base')

@section('body')
    <div data-collapse="medium" data-animation="default" data-duration="400" role="banner" class="navbar w-nav">
        <a href="{{ route('index.blog') }}" class="w-nav-brand"><img src="/images/Logotipo_Mapa-do-Imóvel_Branco.svg" loading="lazy" width="200" alt=""></a>
    </div>
    <div class="hero">
        @php
            $featureFirst = $features->shift();
        @endphp
        <div class="hero-img">
            <img data-src="{{ \TCG\Voyager\Facades\Voyager::image($featureFirst->image) }}" alt="Imagem Destaque" data-error="{{ Storage::url(setting('site.imageEmpty')) }}" class="lazy blog-first_feature-img">
        </div>
        <div class="hero-content">
            <h1 class="title">{{ $featureFirst->title }}</h1>
            <div class="hero-p">{{substr($featureFirst->excerpt, 0, 140).'...' }}</div>
            <div class="hero-author-contentbox">
                <a class="hero-author">{{ $featureFirst->authorId->name }}</a>
                <div>{{ $featureFirst->created_at->format('d/m/Y - H:i') }}</div>
            </div>
            <a href="{{ route('post.blog', $featureFirst->slug) }}" class="button w-button">Ver post</a>
        </div>
    </div>
    @include('blog.layout.newsletter')
    <div class="post-list">
        <div class="container">
            <div class="post-list-flexbox">
                <div class="last-posts-contentbox">
                    <div class="last-posts-titlebox">
                        <h3 class="title last-posts-title">Destaques</h3>
                        <div class="last-posts-line"></div>
                    </div>
                    <div class="last-posts-list">
                        @foreach($features as $post)
                            @include('blog.layout.lists.withDescription')
                        @endforeach
                    </div>
                </div>
                <div class="highlights-posts">
                    <div class="last-posts-titlebox">
                        <h3 class="title neighborhoods-title">{{ $highlight1->name }}</h3>
                        <div class="last-posts-line"></div>
                    </div>
                    @foreach($highlightPosts1 as $post)
                        @include('blog.layout.lists.withoutDescription')
                    @endforeach
                    <a href="{{ route('category.blog', $highlight1->slug) }}" class="button see-more w-button">Ver todos</a>
                </div>
            </div>
        </div>
    </div>
    <div class="videos">
        <div class="container">
            <div class="last-posts-titlebox">
                <h3 class="title last-posts-title">Novidades do Canal</h3>
                <div class="last-posts-line"></div>
            </div>
            <div class="videos-box">
                @php
                    $videosFirst = array_shift($videos);
                @endphp
                <div class="video-player">
                    <div style="padding-top:56.17021276595745%" class="w-embed-youtubevideo"><iframe src="https://www.youtube.com/embed/{{ $videosFirst->id->videoId }}?rel=0&amp;controls=1&amp;autoplay=0&amp;mute=0&amp;start=0" frameborder="0" style="position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></div>
                </div>
                <div class="videos-contentlist">
                    <div class="last-posts-titlebox videos-titlebox">
                        <h3 class="title videos-title">Últimos vídeos</h3>
                        <div class="last-posts-line videos-border"></div>
                    </div>
                    @foreach($videos as $video)
                        <a href="https://www.youtube.com/watch?v={{ $video->id->videoId }}" target="_blank" class="post-item video-item w-inline-block">
                            <div class="post-item-img video-img lazy" data-bg="{{ $video->snippet->thumbnails->high->url }}"></div>
                            <div class="post-item-contentbox">
                                <h3 class="post-item-title videos-title">{{ $video->snippet->title }}</h3>
                                <div>por <span class="post-author">{{ $video->snippet->channelTitle }}</span></div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <div class="post-list">
        <div class="container">
            <div class="post-list-flexbox">
                <div class="last-posts-contentbox">
                    <div class="last-posts-titlebox">
                        <h3 class="title last-posts-title">Últimos Posts</h3>
                        <div class="last-posts-line"></div>
                    </div>
                    <div class="last-posts-list">
                        @foreach($posts as $post)
                            @include('blog.layout.lists.withDescription')
                        @endforeach
                    </div>
                </div>
                <div class="highlights-posts">
                    <div class="last-posts-titlebox">
                        <h3 class="title neighborhoods-title">{{ $highlight2->name }}</h3>
                    <div class="last-posts-line"></div>
                    </div>
                    @foreach($highlightPosts2 as $post)
                        @include('blog.layout.lists.withoutDescription')
                    @endforeach
                    <a href="{{ route('category.blog', $highlight2->slug) }}" class="button see-more w-button">Ver todos</a>
                </div>
            </div>
        </div>
    </div>
@endsection