@extends('layouts.default1400-page', ['title' => 'مقالات'])

@section('content')
 
<div class="lg:flex">


	<div class="lg:w-3/4">

        <x-newlayout.static.articles-headers />
        
        <!-- Top news -->

        <div class="lg:flex">
            
            @isset($last3_articles)
                @foreach ($last3_articles as $item)
                    @if($loop->iteration == 1)
                    <a class="flex bg-cover lg:w-2/3 m-2 p-4 rounded-lg items-end"
                        style="background-image: url('{{ $item->full_image }}')" href="{{ $item->full_link }}">
                        <span class="text-white font-bold text-right "
                            style="text-shadow: 1px 1px #3f3d3d;">

                            {{ $item->title }}

                        </span>
                    </a>
                    @elseif($loop->iteration == 2)
                    <div class="md:flex lg:flex-col lg:w-1/3">
                        <a class="flex bg-cover m-2 md:w-1/2 lg:w-auto  h-28 rounded-lg items-end"
                            style="background-image: url('{{ $item->full_image }}')" href="{{ $item->full_link }}">

                            <span class="text-white text-sm text-right p-2 "
                                style="text-shadow: 1px 1px #3f3d3d;">

                                {{ $item->title }}

                            </span>
                        </a>
                    @elseif($loop->iteration == 3)
                        <a class="flex bg-cover m-2 md:w-1/2 lg:w-auto  h-28 rounded-lg items-end"
                            style="background-image: url('{{ $item->full_image }}')" href="{{ $item->full_link }}">

                            <span class="text-white text-sm text-right p-2 "
                                style="text-shadow: 1px 1px #3f3d3d;">

                                {{ $item->title }}

                            </span>
                        </a>
                    </div>
                    @endif
                @endforeach 
            @endisset
        </div>

        <!-- news list -->

        <x-newlayout.static.articles-all :items="$data" />
        
        <div class="ltr">
            {{ $data->links('pagination::tailwind') }}
        </div>
 
    </div>
    <!-- left side -->
    <div class="lg:w-1/4">

        <div class="flex h-6 m-2 w-full border-b-2 border-yellow-500 " href="#">
            <span class="bg-yellow-500 px-4 text-white"> پربازدیدها</span>
   
        </div>

        @foreach ($random_articles as $article)
        <x-newlayout.static.articles-item :item="$article" /> 
        @endforeach
        
    </div>

</div>
 
@stop