@extends('frontend::layouts.master')

@section('content')
<div class="bg-top-sub-gradient py-12">
    <h1 class="text-center text-24 lg:text-36 font-bold text-primary leading-10">Blog</h1>
    <div class="container">
        <div class="pt-12">
            <div class="pb-6 flex gap-3 flex-wrap">
                <a href="#" class="bg-secondary block px-2 lg:px-4 py-1 lg:py-2 rounded-md text-14 lg:text-16 font-bold">
                    บทความทั้งหมด
                </a>
                <a href="#" class="bg-white block px-2 lg:px-4 py-1 lg:py-2 rounded-md text-14 lg:text-16">
                    หมวดหมู่ 1
                </a>
                <a href="#" class="bg-white block px-2 lg:px-4 py-1 lg:py-2 rounded-md text-14 lg:text-16">
                    หมวดหมู่ 2
                </a>
                <a href="#" class="bg-white block px-2 lg:px-4 py-1 lg:py-2 rounded-md text-14 lg:text-16">
                    หมวดหมู่ 3
                </a>
                <a href="#" class="bg-white block px-2 lg:px-4 py-1 lg:py-2 rounded-md text-14 lg:text-16">
                    หมวดหมู่ 4
                </a>
            </div>
            <div class="flex -mx-3 gap-y-6 flex-wrap">
                @for ($example = 1; $example < 4; $example++)
                    @for ($i = 1; $i < 5; $i++)
                        <div class="w-full xs:w-1/2 md:w-1/3 2xl:w-1/4 px-3">
                            <x-frontend::card.blog-card.template
                                image="{{ Module::asset('frontend:img/blog' . $i . '.jpg') }}"
                                title="อุปกรณ์ไอทีช่วยให้คนทำงานสามารถ เริ่มทำงานที่ใดก็ได้ไม่จำเป็นต้องอยู่"
                                date="17 สิงหาคม 2024" url="blog-detail"
                                :borderStyle=true
                                >
                            </x-frontend>
                        </div>
                    @endfor
                @endfor
                <div class="w-full pt-8 pb-4 text-center">
                    <x-frontend::navigation.pagination.template></x-frontend::navigation.pagination.template>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection