@extends('layouts.app')
@section('title', 'Lobby / Fila - KRUX ARENA')
@section('page_title', 'Lobby / Fila')
@section('content')

<div class="grid lobby-grid">
 <section class="panel pad"><h3 class="panel-title">Selecione o Jogo</h3><div class="game-cards"><div class="game-card active">CROSSFIRE</div><div class="game-card">CS 2</div><div class="game-card">VALORANT</div><div class="game-card">FREE FIRE</div><div class="game-card">LEAGUE OF LEGENDS</div></div><h3 class="panel-title" style="margin-top:22px">Selecione o Modo</h3><div class="mode-grid"><div class="mode-card active">RANKED</div><div class="mode-card">CASUAL</div><div class="mode-card">MIX</div><div class="mode-card">TREINO</div></div><h3 class="panel-title" style="margin-top:22px">Selecione a Fila</h3><div class="mode-grid"><div class="mode-card active">SOLO</div><div class="mode-card">DUO</div><div class="mode-card">SQUAD</div><div class="mode-card">5V5</div></div></section>
 <section class="panel pad" style="text-align:center"><p class="green"><b>SUA FILA ATUAL</b></p><h2>RANKED SOLO<br><span class="muted">CROSSFIRE</span></h2><div class="queue-circle"><div><span>POSIÇÃO NA FILA</span><strong>{{ $position ?? 12 }}</strong></div></div><p class="muted">TEMPO ESTIMADO</p><h2>02:45</h2><button class="btn red full">CANCELAR FILA</button></section>
 <section class="grid"><div class="panel pad"><h3 class="panel-title">Status da Fila</h3><div class="row"><span>Jogadores na fila</span><strong>{{ $queuePlayers ?? 156 }}</strong></div><div class="row"><span>Partidas em andamento</span><strong>{{ $activeMatches ?? 48 }}</strong></div><div class="row"><span>Tempo médio</span><strong>02:30</strong></div></div><div class="panel pad"><h3 class="panel-title">Distribuição por Modo</h3><div class="row"><span>Ranked Solo</span><b>56</b></div><div class="row"><span>Ranked Duo</span><b>34</b></div><div class="row"><span>Ranked Squad</span><b>42</b></div><div class="row"><span>Casual</span><b>24</b></div></div></section>
 <section class="panel pad"><h3 class="panel-title">Amigos Online (8)</h3>@foreach(['KruxDestroyer','KruxMVP','KruxSniper','KruxRusher','KruxLegend','KruxGhost','KruxKing','KruxBeast'] as $n)<div class="friend"><div class="avatar">{{ substr($n,4,1) }}</div><div><b>{{ $n }}</b><div class="green">Online</div></div></div>@endforeach</section>
</div>

@endsection