@extends('layouts.app')

@section('content')
<div>
    <section class="mx-auto max-w-6xl py-5">
        <div class="flex flex-col">
            <div class="flex flex-col md:flex-row justify-center items-center">
                <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center">
                    <div slot="middle-right" class="max-w-xs">
                        <div class="flex flex-col justify-center h-48 p-3">
                            <div class="text-5xl text-gray-800 mb-2 text-center MvAamu"  style="font-weight: 100;">{{$topic->name}}</div>
                            <div class="text-sm my-3 MvTyper text-center leading-6" style="direction:rtl;">
                                {{$topic->name}} އާއިބެހޭ މަޢުލޫމާތުތަށް އެއްތަންކުރެވިފައި</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-10 mt-8">

                @foreach ($articles as $article)
                <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center mr-0 md:mr-2">


                    <div slot="bottom-left" class="max-w-xs">
                        <div class="p-5 shadow-md m-2 mt-4">

                            <a href="{{route('articles.show', $article->id)}}">
                                <img class="object-scale-down h-30" src="{{$article->featured_image}}"
                                    alt="{{$article->meta['title']}}">
                            </a>

                            <div class="text-xs font-bold uppercase text-gray-500 text-right mt-1 mb-2 MvTyper">
                                {{$article->source->name}}</div>

                            <a href="{{route('articles.show', $article->id)}}">
                                <div class="text-md font-bold leading-7 mb-2 MvTyper text-right hover:underline">
                                    {{$article->title}}</div>
                            </a>

                        </div>
                    </div>


                </div>

                @endforeach



            </div>
        </div>
    </section>
</div>
@endsection