@extends('layouts.Article')
@section('bodyClass', 'articles')

@section('meta')
    <title>Blog Post Archives {{ isset($_GET['page']) ? 'page ' . $_GET['page'] : '' }} - AOLC BC</title>

    <meta name="title" content="Blog Post Archives {{ isset($_GET['page']) ? 'page ' . $_GET['page'] : '' }} - AOLC BC">
    <meta name="keywords" content="Blog Post Archives - AOLC BC" />
    <meta name="description" content="dive into aolc bc's blog for expert advice on career training and education. discover insights and tips for your professional growth!" />
@endsection

@section('welcome-title')
    <h1
        class='relative font-bold text-xl text-white xs:text-2xl xs:leading-10 laptop:text-[40px] laptop:py-10  '>
        Articles | News | Events</h1>
@endsection


@section('content') 
    <section class='bg-white relative p-6 py-10 laptop:p-[60px] laptop:pb-10  laptop:container'>
        <div class='space-y-[80px]'>
            @foreach($articles ?? [] as $article)
                <div class='flex flex-col gap-4 tablet:flex-row relative hd:items-center after:absolute after:w-full after:h-[2px] after:bg-lightGray after:-bottom-10 after:left-0'>
                    <div>
                        <div style="background-image: url('{{ Storage::url($article->image) }}');"  class="rounded-xl w-[250px] h-[200px] bg-no-repeat bg-cover bg-center flex items-center justify-center">
                            <a href="{{ $article->url }}"
                            class='w-[162px] block bg-orange hover:bg-teal rounded-full py-2 text-white text-[15px] font-bold text-center animate-mover'>Read More</a>
                        </div>
                    </div>
                    <div class=' text-navy font-black text-xl tablet:text-[28px]'>
                        <a href="{{ $article->url }}">{{ $article->title }}</a>
                        <div class='font-semibold text-base pt-6 pb-4 tablet:text-lg'>{!! substr($article->content, 0, 30) !!}…</div>
                        <p class='text-teal font-medium text-xs tablet:text-[14px]'>Posted by AOLCC  |  {{ $article->published_at->format('jS F Y') }}</p>
                    </div>
                </div>
            @endforeach
        </div>
        <div class='mt-[80px]'>
            {{ $articles->links('partials.pagination') }}
        </div>
    </section>
@endsection