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

{{ block title }}

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

    {{ if en }}

        Round: {{ player.round_number }} of {{ total_rounds }}<br/>
        <b style="color: red;">Main Rounds</b>

    {{ else }}

        Menghindari Bom!<br>
        <span style="color: blue;">Ronde Sebenarnya</span><br>
        {{ player.round_number }} dari {{ total_rounds }}

    {{ 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 collected:
                {{ else }}
                    Kotak terkumpul:
                {{ endif }}

            </b>

            <span id="boxes-count">0</span>
        </p>

        <p>
            <b>

                {{ if en }}
                    Current earnings:
                {{ else }}
                    Pendapatan saat ini:
                {{ 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">

                {{ if en }}
                    Start
                {{ else }}
                    Start
                {{ endif }}

            </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">

                {{ if en }}
                    Start
                {{ else }}
                    Start
                {{ endif }}

            </button>

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

                {{ if en }}
                    Stop
                {{ else }}
                    Stop
                {{ endif }}

            </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 }}
                Stop
            {{ endif }}

        </button>

    </div>

    {{ endif }}

</div>


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

    <div class="waiting-text">

        {{ if en }}
            ⚠ ALMOST HIT THE BOMB!
        {{ else }}
            ⚠ HAMPIR KENA BOM!
        {{ endif }}

    </div>

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

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

        {{ if en }}
            OK
        {{ else }}
            OK
        {{ endif }}

    </button>

</dialog>


<dialog id="bonus-dialog">

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

    <p>

        {{ if en }}

            The result is ready! You successfully avoided the bomb!
            You may choose to collect
            <span id="extra-boxes-count"></span>
            additional boxes if you wish.
            <br/>

            <b style="color: red;">Be careful!</b>
            You could lose everything if the bomb is in one of the
            <span id="extra-boxes-count"></span>
            additional 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 }}
            Collect <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">

        {{ if en }}
            LOADING!
        {{ else }}
            LOADING!
        {{ endif }}

    </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 }}