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

@section('content')
    <div class="page-header-wrapper mt-12">
        <h1 class='page-header'>Games</h1>
        <div class="img-wrapper">
            <img src="{{ Module::asset('frontend:img/games.svg') }}" alt="Games">
        </div>
    </div>
    <div class="container pt-6 lg:pt-10">
        <div class="flex flex-wrap -mx-2 xs:-mx-4">
            @for ($test = 1; $test < 4; $test++)
                @for ($example = 1; $example < 5; $example++)
                    <div class="w-full xtn:w-1/2 md:w-1/3 xl:w-1/4 p-2 xs:p-4">
                        <div class="game-card">
                            <a href="category">
                                <div class="img-wrapper">
                                    <img src="{{ Module::asset('frontend:img/game'.$example.'.jpg') }}" alt="Game Name">
                                </div>
                                <p>Game Name</p>
                            </a>
                        </div>
                    </div>
                @endfor
            @endfor
        </div>
        <div class="flex justify-center mt-8">
            <button class="button-primary">
                <div>Load More</div>
                <img  class="w-[.75rem]" src="{{ Module::asset('frontend:img/arrow.svg') }}" alt="Game Name">
            </button>
        </div>
    </div>
@endsection