@extends('layouts.master')

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Article Container -->
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
            <!-- Article Image -->
            @if($article->image_url)
                <div class="h-64 bg-cover bg-center" style="background-image: url('{{ $article->image_url }}'); height:50vh; background-size: cover">
                </div>
            @else
                <div class="h-auto bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 flex items-center justify-center text-white text-3xl font-bold">
                    No Image
                </div>
            @endif

            <!-- Article Content -->
            <div class="p-6">
                <h1 class="text-4xl font-bold text-gray-900 dark:text-white leading-tight mb-4">
                    {{ $article->title }}
                </h1>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
                    Published on {{ $article->created_at->format('F d, Y') }}
                </p>
                <div class="text-gray-800 dark:text-gray-300 text-lg leading-relaxed">
                    {!! $article->description !!}
                </div>
            </div>
        </div>

        <!-- Back Button -->
        <div class="mt-6">
            <a href="{{ route('educatorSupportListing') }}" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring ring-gray-300 disabled:opacity-25 transition">
                &larr; Back to Articles
            </a>
        </div>
    </div>
</div>
@endsection