@extends('theme.swalanyeti.layout')

@section("styles")

@endsection

@section( 'main_body')

<div class="row mt-4">
    <div class="col-12 col-md-8">
        <div class="row">
            <div class="col-12 col-md-8 post-lg">
                @if (isset($posts[0]))
                    @php
                        $post = $posts[0];
                        $permalink = get_permalink($post);
                    @endphp
                    <div class="post-img zoom">
                        @if ($post->main_image)
                            <a href="{{$permalink}}" title="{!! $post->title !!}">
                                <img class="w-100 rounded" src="{{ fetch_image($post->main_image->file_name, "lg") }}" alt="{{ $post->main_image->alt_text }}">
                            </a>
                        @endif
                        <div class="post-bottom img-gradient">
                            @if ($post->post_label)
                                <span class="post-label top-label">{{$post->post_label}}</span>
                            @endif
                            <h3 class="mt-2 px-2 fw-bold"><a class="text-white" href="{{$permalink}}" title="{!! $post->title !!}">{!! $post->title !!}</a></h3>
                        </div>
                    </div>
                @endif
            </div>
            <div class="col-12 col-md-4 post-sm">
                @for ($i = 1; $i <= 2; $i++)
                    @if (isset($posts[$i]))
                        @php
                            $post = $posts[$i];
                            $permalink = get_permalink($post);
                        @endphp
                        <div class="post-img zoom">
                            @if ($post->main_image)
                                <a href="{{$permalink}}" title="{!! $post->title !!}">
                                    <img class="w-100" src="{{ fetch_image($post->main_image->file_name, "md") }}" alt="{{ $post->main_image->alt_text }}">
                                </a>
                            @endif
                            <div class="post-bottom img-gradient">
                                @if ($post->post_label)
                                    <span class="post-label top-label">{{$post->post_label}}</span>
                                @endif
                                <p class="font-14 mt-2 px-2 sm"><a class="text-white fw-bold" href="{{$permalink}}" title="{!! $post->title !!}">{!! $post->title !!}</a></p>
                            </div>
                        </div>
                    @endif
                @endfor
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="row sticky-top">
            <div class="col-12">
                <div class="d-flex">
                    <h4 class="cat-title">Let's Connect</h4>
                </div>
            </div>
            <div class="col-12 mt-2">
                {{ social_icons() }}
            </div>
            <div class="col-12">
                <div class="my-2 py-2 ad text-center">
                    {!! get_option('ak_default_default_sidebar_ad_1') !!}
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row mt-4">
    <div class="col-12">
        <div class="my-2 ad text-center">
            {!! get_option('ak_default_default_top_section_separator_ad') !!}
        </div>
    </div>
</div>
<div class="row mt-4">
    <div class="col-12 my-3">
        <div class="d-flex">
            <h4 class="cat-title">Trending Stories</h4>
        </div>
    </div>
    @foreach (trending_posts(4) as $post)
        @include(load_template('trending'), ['post' => $post])
    @endforeach
</div>
<div class="row mt-4">
    <div class="col-12 col-md-8">
        <div class="row">
            <div class="col-12 my-4">
                <div class="d-flex">
                    <h4 class="cat-title">More Stories</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12" id="more-stories">
                @if (sizeof($posts) > 3)
                    @for ($i = 3; $i < sizeof($posts); $i++)
                         @if ($i%4 == 0)
                            <div class="row mb-4">
                                <div class="col-12 text-center">
                                    {!! get_option('ak_default_default_post_listings_ad') !!}
                                </div>
                            </div>
                        @endif
                        @include(load_template('more-posts'), ['post' => $posts[$i]])
                    @endfor
                @endif
            </DIV>
            <div class="col-12" id="div-load-more" >
                <a id="action-load-more" href="#" data-href="{{ route("load_more", ["type" => "category", "value" => $category->slug]) }}" class="btn btn-danger">Load More</a>
                <span id="ajax-load-more" class="form-text ms-2 hidden">
                    <i class="fas fa-spinner fa-spin"></i> <small>Please wait...</small>
                </span>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        @include('theme.swalanyeti.templates.sidebar')
    </div>
</div>

@endsection

@section("scripts")

<script>
    var page = 3;
</script>

@endsection