@extends('layouts.master')
@section('title', config('app.name') . ' : Arcade')
@section('content')
<div class="main-content game">
    @if ($banners->count() > 0)
    <div class="container game__slider">
      <div class="swiper-container game-category-slider swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
        <div class="swiper-wrapper" id="swiper-wrapper-ed1d99795732dc99" aria-live="off" style="transition-duration: 0ms; transform: translate3d(-6660px, 0px, 0px);">
            @foreach ($banners as $index => $banner)
          <div class="swiper-slide" data-swiper-slide-index="{{ $index }}"" role="group" aria-label="{{ $index + 1 }} / {{ $banners->count() }}" style="width: 1110px;">
            <img loading="lazy" alt="{{ $banner->title }}" title="" src="{{ asset($banner->image) }}">
          </div>
          @endforeach
        </div>
        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
      </div>
    </div>
    @endif
    <div class="container">
      <nav class="breadcrumb-container">
        <ul class="breadcrumb-list">
          <li class="breadcrumb-item" text="{{ getSetting('site_name') }}">
            <a href="{{ url('/') }}" class="breadcrumb-link" target="_self">{{ getSetting('site_name') }}</a>
          </li>
          <li class="breadcrumb-item" text="Arcade" url="{{ url('/') }}/arcade">
            <a href="{{ url('/') }}/arcade" class="breadcrumb-link" target="_self">Arcade</a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="container">
      <div class="game__list">
        <div class="page-header">Arcade</div>
        <div class="game-list-container">
          <div class="game-holder">
            <a onclick="routeNav('/arcade/pragmaticplay')" href="javascript:;">
              <div class="game-img">
                <img loading="lazy" title="Crash Game" alt="Crash Game" src="https://cdn.mixlink.top/global/game-skin/banner/other/spa.webp">
                <div class="hover-play">
                  <h6>Crash Game</h6>
                  <i class="fi fi-sr-play"></i>
                </div>
              </div>
            </a>
          </div>
          <div class="game-holder">
            <a onclick="routeNav('/arcade/joker')" href="javascript:;">
              <div class="game-img">
                <img loading="lazy" title="Joker Gaming" alt="Joker Gaming" src="https://cdn.mixlink.top/global/game-skin/banner/fishing/jok.webp">
                <div class="hover-play">
                  <h6>Joker Gaming</h6>
                  <i class="fi fi-sr-play"></i>
                </div>
              </div>
            </a>
          </div>
          <div class="game-holder">
            <a onclick="routeNav('/arcade/jili')" href="javascript:;">
              <div class="game-img">
                <img loading="lazy" title="JILI" alt="JILI" src="https://cdn.mixlink.top/global/game-skin/banner/fishing/jli.webp">
                <div class="hover-play">
                  <h6>JILI</h6>
                  <i class="fi fi-sr-play"></i>
                </div>
              </div>
            </a>
          </div>
          <div class="game-holder">
            <a onclick="routeNav('/arcade/fachai')" href="javascript:;">
              <div class="game-img">
                <img loading="lazy" title="Fa Chai" alt="Fa Chai" src="https://cdn.mixlink.top/global/game-skin/banner/fishing/fac.webp">
                <div class="hover-play">
                  <h6>Fa Chai</h6>
                  <i class="fi fi-sr-play"></i>
                </div>
              </div>
            </a>
          </div>
          <div class="game-holder">
            <a onclick="routeNav('/arcade/jdb')" href="javascript:;">
              <div class="game-img">
                <img loading="lazy" title="JDB" alt="JDB" src="https://cdn.mixlink.top/global/game-skin/banner/fishing/jdb.webp">
                <div class="hover-play">
                  <h6>JDB</h6>
                  <i class="fi fi-sr-play"></i>
                </div>
              </div>
            </a>
          </div>
          <div class="game-holder">
            <a onclick="routeNav('/arcade/spade')" href="javascript:;">
              <div class="game-img">
                <img loading="lazy" title="Spade Gaming" alt="Spade Gaming" src="https://cdn.mixlink.top/global/game-skin/banner/fishing/spd.webp">
                <div class="hover-play">
                  <h6>Spade Gaming</h6>
                  <i class="fi fi-sr-play"></i>
                </div>
              </div>
            </a>
          </div>
          <div class="game-holder">
            <a onclick="routeNav('/arcade/cq9')" href="javascript:;">
              <div class="game-img">
                <img loading="lazy" title="CQ9" alt="CQ9" src="https://cdn.mixlink.top/global/game-skin/banner/fishing/cq9.webp">
                <div class="hover-play">
                  <h6>CQ9</h6>
                  <i class="fi fi-sr-play"></i>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="game__seo">
        <div hidden="" id="title-seo">{{ getSetting('site_name') }}: Arcade</div>
        <div class="seo-content showFooter">
          <h1>Arcade</h1>
          <p>Arcade</p>
        </div>
      </div>
    </div>
  </div>
@endsection