@extends('layouts.app')

@section('content')
@if(!isset($articles))
    <div class="mb-10">
        <div>
            <h3
                class="text-gray-800 font-bold text-3xl text-center mt-3 mb-2 mr-3 MvAamu"
                style="direction: rtl;"
            >
               ރައްކާކުރެވިފައި އެއްވެސް ލިޔުމެއް ނެއް
            </h3>
        </div>
    </div>
@else
<div class="mb-10">
    <div>
        <h3
            class="text-gray-800 font-bold text-3xl text-right mt-3 mb-2 mr-3 MvAamu"
        >
           ރައްކާ ކުރެވިފައިާ ލިޔުންތައް
        </h3>
    </div>

    <div class="flex justify-end mt-5">
        <!-- post cards -->
        <div class="w-full lg:w-2/3">
            @foreach($articles as $article)
                <div>
                    <a
                        href="{{route('articles.show', $article->id)}}"
                        class="w-full flex mb-10 shadow rounded-lg"
                    >
                        <div
                            class="bg-white rounded px-4 flex flex-col flex-grow justify-between leading-normal"
                        >
                            <div>
                                <div
                                    class="mt-5 text-gray-700 font-semibold text-1xl mb-2 text-right MvTyper hover:underline"
                                    style="direction:rtl;"
                                >
                                    {{$article->title}}
                                </div>



                                <div
                                    class="flex items-center justify-end mt-3 mb-3"
                                >
                                    <p
                                        class="font-semibold text-gray-700 text-sm capitalize MvTyper py-4"
                                    >
                                        {{$article->source->name}}
                                    </p>
                                    <p class="text-gray-600 text-xs ml-1 MvTyper" style="direction: rtl;">

                                        {{$article->published_date->locale('dv')->isoFormat('Do MMMM YYYY')}}

                                        &mdash;
                                    </p>
                                </div>
                            </div>
                        </div>

                    </a>
                </div>
            @endforeach

        </div>
    </div>
</div>
@endif
   
@endsection