@extends('games.layout')

@section('content')
<div class="wac-app wac-app--escale-themed" style="--wac-escale-color: {{ $wacGameColor ?? '#c9a227' }};">

    <div class="wac-header-bar wac-header-bar--escale">
        <a class="wac-back" href="/games" aria-label="Retour au terminal"><i class="fa-solid fa-chevron-left" aria-hidden="true"></i><span class="wac-back__text">Terminal</span></a>
        <span class="wac-guess__progress" id="wac-baggage-progress">Objet 1 / 7</span>
    </div>

    <div class="wac-game-column">
        <h1 class="wac-title">Inspection bagages</h1>

        <div id="wac-baggage-play-column">
            <p class="wac-subtitle">Chaque objet sur la <strong>table des souvenirs</strong> a une lettre : retrouvez d’abord le <strong>continent</strong>, puis le <strong>pays</strong> d’origine.</p>
            <div id="wac-baggage-root"></div>
        </div>
    </div>

    <div id="wac-baggage-already" class="wac-guess__already" hidden>
        <div class="wac-icon-wrap wac-icon-wrap--success" aria-hidden="true">
            <i class="fa-solid fa-circle-check"></i>
        </div>
        <h2 class="wac-guess__done-title">Escale déjà complétée</h2>
        <p class="wac-guess__done-score" id="wac-baggage-already-score"></p>
        <a class="wac-btn wac-btn--primary" id="wac-baggage-already-hub" href="/games">Retour au terminal</a>
    </div>

    <div id="wac-baggage-done" class="wac-guess__done" hidden>
        <div class="wac-icon-wrap wac-icon-wrap--success" aria-hidden="true">
            <i class="fa-solid fa-check"></i>
        </div>
        <h2 class="wac-guess__done-title">Inspection terminée !</h2>
        <p class="wac-guess__done-score" id="wac-baggage-done-score"></p>
        <a class="wac-btn wac-btn--primary" id="wac-baggage-done-hub" href="/games">Retour au terminal</a>
    </div>
</div>
<script type="application/json" id="wac-baggage-config">{!! json_encode($wacBaggage ?? [], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_APOS) !!}</script>
@endsection