@extends('games.layout')



@section('content')
@php
    $safariRoundCount = is_array($wacSafari['questions'] ?? null) ? count($wacSafari['questions']) : 0;
@endphp

<div class="wac-app wac-app--escale-themed" style="--wac-escale-color: {{ $wacGameColor ?? '#6eb89a' }};">

    <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-safari-progress">
            @if ($safariRoundCount > 0)
                Manche 1 / {{ $safariRoundCount }}
            @else
                Safari
            @endif
        </span>

    </div>

    <div class="wac-game-column">

        <h1 class="wac-title">Safari identification</h1>

        <div id="wac-safari-play-column">

            <p class="wac-subtitle">Lisez l'indice, puis trouvez le bon animal parmi les photos prises par les mariés.</p>

            <div id="wac-safari-root"></div>

        </div>

    </div>



    <div id="wac-safari-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">Déjà terminé</h2>

        <p class="wac-guess__done-score" id="wac-safari-already-score"></p>

        <a class="wac-btn wac-btn--primary" id="wac-safari-already-hub" href="/games">Retour au menu</a>

    </div>



    <div id="wac-safari-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">Escale terminée !</h2>

        <p class="wac-guess__done-score" id="wac-safari-done-score"></p>

        <a class="wac-btn wac-btn--primary" id="wac-safari-done-hub" href="/games">Retour au menu</a>

    </div>

    <div class="wac-safari-result-overlay" id="wac-safari-result-overlay" hidden>
        <div
            class="wac-safari-result-modal"
            role="dialog"
            aria-modal="true"
            aria-labelledby="wac-safari-feedback-msg-live"
        >
            <div id="wac-safari-result-inner"></div>
        </div>
    </div>

</div>

<script type="application/json" id="wac-safari-config">{!! json_encode($wacSafari, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_APOS) !!}</script>

@endsection