@extends('layouts.app-game-navigation')

@section('style')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
@endsection

@section('content')
    <main class="page-main" id="choose-game-page">
        <section class="choose-game-section">
            <div class="container">
                <div class="decor decor-1">
                    <figure class="img-holder bg-mode">
                        <img src="{{ asset('assets/img/landing-page/decor/firework-yellow.png') }}" alt=""
                            width="" height="">
                    </figure>
                </div>
                <div class="decor decor-2">
                    <figure class="img-holder bg-mode">
                        <img src="{{ asset('assets/img/landing-page/decor/firework-red.png') }}" alt=""
                            width="" height="">
                    </figure>
                </div>
                <div class="decor decor-3">
                    <figure class="img-holder bg-mode">
                        <img src="{{ asset('assets/img/landing-page/decor/firework-red.png') }}" alt=""
                            width="" height="">
                    </figure>
                </div>
                <div class="decor decor-4">
                    <figure class="img-holder bg-mode">
                        <img src="{{ asset('assets/img/landing-page/decor/firework-yellow.png') }}" alt=""
                            width="" height="">
                    </figure>
                </div>

                {{-- Game Info --}}
                <div class="game-info">
                    <div class="user-info">
                        <div class="user">&nbsp;</div>
                        <div class="logout" id="btn-logout"><span>Đăng xuất</span></div>
                    </div>

                    {{-- Game Point --}}
                    <div class="game-point">
                        <div class="number-of-turns">
                            <span>&nbsp;</span>
                        </div>
                        <div class="total-point">
                            <span>&nbsp;</span>
                        </div>
                    </div>
                </div>

                {{-- Tagline --}}
                <div class="tagline">
                    <figure class="img-holder bg-mode">
                        <img src="{{ asset('assets/img/mini-game/tagline_pc.png') }}" alt="" width=""
                            height="" />
                    </figure>
                </div>

                {{-- instructions --}}
                <div class="instructions">
                    {{-- Title --}}
                    <div class="title">hướng dẫn cách chơi</div>

                    <!-- Swiper -->
                    <div class="swiper instructions-swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                {{-- Image --}}
                                <div class="image">
                                    <figure class="img-holder bg-mode">
                                        <img src="{{ asset('assets/img/mini-game/instruction-1.png') }}" alt=""
                                            width="" height="" />
                                    </figure>
                                </div>
                                {{-- Desc --}}
                                <p class="desc">Trò chơi: Tìm điểm khác nhau <br /> giữa hai hình</p>
                            </div>
                            <div class="swiper-slide">
                                {{-- Image --}}
                                <div class="image">
                                    <figure class="img-holder bg-mode">
                                        <img src="{{ asset('assets/img/mini-game/instruction-1.png') }}" alt=""
                                            width="" height="" />
                                    </figure>
                                </div>
                                {{-- Desc --}}
                                <p class="desc">Trò chơi: Tìm điểm khác nhau <br /> giữa hai hình 2</p>
                            </div>
                            <div class="swiper-slide">
                                {{-- Image --}}
                                <div class="image">
                                    <figure class="img-holder bg-mode">
                                        <img src="{{ asset('assets/img/mini-game/instruction-1.png') }}" alt=""
                                            width="" height="" />
                                    </figure>
                                </div>
                                {{-- Desc --}}
                                <p class="desc">Trò chơi: Tìm điểm khác nhau <br /> giữa hai hình 3</p>
                            </div>
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>

                {{-- CTA --}}
                <div class="cta-holder"></div>
            </div>
        </section>
    </main>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
@endsection