@section('scripts')
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
@endsection

@section('title')
    Dashboard
@endsection
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            @lang('messages.dashboard')
        </h2>
        <small>@lang('messages.welcome')</small>
    </x-slot>
    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mb-4">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
                <a href="{{ route('blogs') }}" title="Blogs" class="bg-white overflow-hidden shadow-sm rounded-lg">
                    <div class="px-4 py-5 p-6 relative">
                        <div class="absolute w-[100px] h-[100px] right-0">
                            <ion-icon name="document-outline" style="width: 100px; font-size:100px;" class="text-indigo-100 opacity-70"></ion-icon>
                        </div>
                        <dl class="relative">
                            <dt class="text-sm leading-5 font-medium text-gray-500 truncate dark:text-gray-400">@lang('messages.total_blogs')</dt>
                            <dd class="text-4xl leading-9 font-bold text-indigo-600 dark:text-indigo-400">{{ count(\App\Models\Post::all()) }}</dd>
                        </dl>
                    </div>
                </a>
                <a href="{{ route('users') }}" title="Users" class="bg-white overflow-hidden shadow-sm rounded-lg">
                    <div class="px-4 py-5 p-6 relative">
                        <div class="absolute w-[100px] h-[100px] right-0">
                            <ion-icon name="people-outline" style="width: 100px; font-size:100px;" class="text-indigo-100 opacity-70"></ion-icon>
                        </div>
                        <dl class="relative">
                            <dt class="text-sm leading-5 font-medium text-gray-500 truncate dark:text-gray-400">@lang('messages.total_users')</dt>
                            <dd class="text-4xl leading-9 font-bold text-indigo-600 dark:text-indigo-400">{{ count(\App\Models\User::all()) }}</dd>
                        </dl>
                    </div>
                </a>
            </div>
        </div>
    </div>
</x-app-layout>