@extends('layouts.master')

@section('content')
<div class="container mx-auto px-4 py-12">
    <!-- Title -->
    <div class="text-center mb-12">
        <h1 class="text-4xl font-extrabold text-gray-800 tracking-tight mb-4">Educator Support Articles</h1>
        <p class="text-gray-600 text-lg">Resources, tips, and information for educators.</p>
    </div>

    <!-- Category Filters (optional, can be added later) -->
    <!-- Category filter removed as per requirements -->

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
        @foreach ($articles as $article)
        <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300">
            <!-- Image Section -->
            <img 
                src="{{ $article->image_url }}" 
                alt="{{ $article->title }}" 
                class="w-full h-56 object-cover">
            
            <!-- Content Section -->
            <div class="p-6">
                <h2 class="text-2xl font-semibold text-gray-800 mb-3">
                    {{ $article->title }}
                </h2>
                <p class="text-gray-600 mb-5 text-sm leading-relaxed">
                    {!!  Str::limit($article->description, 200) !!}
                </p>
                <a 
                    href="{{ route('educator-support-articles.show', $article->id) }}" 
                    class="inline-block text-blue-600 font-medium text-sm hover:text-blue-800 transition duration-200">
                    Read More →
                </a>
            </div>

            <!-- Footer Section -->
            <div class="border-t px-6 py-3 flex justify-between items-center bg-gray-50">
                <span class="text-gray-500 text-sm">{{ $article->created_at->format('M d, Y') }}</span>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Pagination -->
    <div class="mt-12">
        {{ $articles->links('pagination::tailwind') }}
    </div>
</div>
@endsection