{{ extends "global/Page.html" }}

{{ block title }}

<div style="text-align:center;">

    {{ if en }}
        Round: {{ player.round_number }} of {{ total_rounds_lucky_trial }}<br/>
        <b style="color: red;">Practice Rounds</b>
    {{ else }}
        Menghindari Bom!<br>
        <span style="color: red;">Ronde Latihan</span><br>
        Ronde {{ player.round_number }} dari {{ total_rounds_lucky_trial }}
    {{ endif }}

</div>

<div style="text-align: center; margin-bottom: 10px; font-size: 14px;">
    {{ if en }}
    <strong>Note:</strong> If the entire 10×10 grid is not visible on your device screen,
    please zoom out to view the entire grid.
    {{ else }}
    <strong>Catatan:</strong> Jika seluruh kotak 10×10 tidak terlihat pada layar perangkat Anda,
    silakan perkecil tampilan (zoom out) untuk melihat seluruh kotak.
    {{ endif }}
</div>

{{ endblock }}


{{ block content }}

<div id="game-container">
    <div id="timer-display"></div>

    <div id="info-panel">
        <p>
            <b>
                {{ if en }}
                    Boxes selected:
                {{ else }}
                    Kotak terpilih:
                {{ endif }}
            </b>
            <span id="boxes-count">0</span>
        </p>

        <p>
            <b>
                {{ if en }}
                    Earnings:
                {{ else }}
                    Nilai pendapatan:
                {{ endif }}
            </b>
            Rp<span id="earnings">0</span>
        </p>
    </div>

    <div id="grid-container"></div>

    <div id="controls">

        {{ if player.variant == C.VARIANT_STANDARD }}

            <button type="button" id="stop-button" class="btn btn-primary btn-lg">
                {{ if en }}
                    Stop and Collect
                {{ else }}
                    Berhenti dan Ambil
                {{ endif }}
            </button>

        {{ elif player.variant == C.VARIANT_STOPSTART or player.variant == C.VARIANT_LUCKY }}

            <button type="button" id="start-button" class="btn btn-success btn-lg">
                Start
            </button>

            <button type="button" id="pause-button" class="btn btn-warning btn-lg hidden">
                {{ if en }}
                    Pause
                {{ else }}
                    Pause
                {{ endif }}
            </button>

            <button type="button" id="restart-button" class="btn btn-success btn-lg hidden">
                {{ if en }}
                    Restart
                {{ else }}
                    Restart
                {{ endif }}
            </button>

        {{ else }}

            <button type="button" id="start-button" class="btn btn-success btn-lg">
                Start
            </button>

            <button type="button" id="stop-button" class="btn btn-danger btn-lg hidden">
                Stop
            </button>

        {{ endif }}

    </div>

    {{ if player.variant == C.VARIANT_STOPSTART or player.variant == C.VARIANT_LUCKY }}
    <div id="final-stop-container">
        <button type="button" id="final-stop-button" class="btn btn-danger btn-lg hidden">
            {{ if en }}
                Stop
            {{ else }}
                Berhenti
            {{ endif }}
        </button>
    </div>
    {{ endif }}
</div>

<dialog id="close-dialog" class="close-dialog">

    <div class="waiting-text">
        {{ if en }}
            ⚠ CLOSE TO THE BOMB!
        {{ else }}
            ⚠ HAMPIR KENA BOM!
        {{ endif }}
    </div>

    <div id="close-dialog-message" class="waiting-text"></div>

    <button id="close-dialog-ok">OK</button>

</dialog>

<dialog id="bonus-dialog">

    <h3 id="bonus-message"></h3>

    <p>
        {{ if en }}

            The result is ready! You survived the bomb!
            You may take <span id="extra-boxes-count"></span> additional boxes if you want.
            <br/>

            <b style="color: red;">Be careful!</b>
            You may lose everything if the bomb appears in one of these
            <span id="extra-boxes-count"></span> boxes!

        {{ else }}

            Hasil sudah siap! Anda berhasil lolos dari bom!
            Anda dapat mengambil
            <span id="extra-boxes-count"></span> kotak tambahan jika Anda mau.
            <br/>

            <b style="color: red;">Hati-hati!</b>
            Anda bisa kehilangan semuanya apabila bom terdapat pada salah satu dari
            <span id="extra-boxes-count"></span> kotak tambahan!

        {{ endif }}
    </p>

    <button type="button" id="bonus-accept" class="btn btn-success">

        {{ if en }}
            Take <span id="extra-boxes-accept"></span> more boxes
        {{ else }}
            Ambil <span id="extra-boxes-accept"></span> kotak lagi
        {{ endif }}

    </button>

    <button type="button" id="bonus-decline" class="btn btn-secondary">

        {{ if en }}
            Stop now
        {{ else }}
            Berhenti sekarang
        {{ endif }}

    </button>

</dialog>

<dialog id="waiting-dialog">
    <div class="waiting-text">LOADING!</div>
</dialog>

<dialog id="lucky-result-dialog">
    <h3 id="lucky-result-title"></h3>
    <p id="lucky-result-message"></p>
    <button type="button" id="lucky-result-ok" class="btn btn-primary">OK</button>
</dialog>

<script>{{ include_sibling 'task.js' }}</script>

{{ endblock }}