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

{{ block title }}

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

    {{ if en }}

        Avoid the Bomb!<br>
        <span style="color: blue;">Main Rounds</span><br>
        Round {{ player.round_number }} of {{ total_rounds_lucky }}

    {{ else }}

        Hindari Bom!<br>
        <span style="color: blue;">Ronde Utama</span><br>
        Ronde {{ player.round_number }} dari {{ total_rounds_lucky }}

    {{ 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 Hasil
                {{ 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 }}Mulai{{ endif }}

            </button>

            <button type="button"
                    id="pause-button"
                    class="btn btn-warning btn-lg hidden">

                {{ if en }}Pause{{ else }}Jeda{{ endif }}

            </button>

            <button type="button"
                    id="restart-button"
                    class="btn btn-success btn-lg hidden">

                {{ if en }}Restart{{ else }}Lanjutkan{{ endif }}

            </button>

        {{ else }}

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

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

            </button>

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

                {{ if en }}Stop{{ else }}Berhenti{{ 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 }}
                Berhenti
            {{ 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">OK</button>

</dialog>


<dialog id="bonus-dialog">

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

    <p>

        {{ if en }}

            Your result is ready!
            You successfully avoided the bomb!

            You may choose to open
            <span id="extra-boxes-count"></span>
            additional boxes if you wish.

            <br/>

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

        {{ else }}

            Hasil Anda sudah siap!
            Anda berhasil menghindari bom!

            Anda dapat memilih untuk membuka
            <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 berada pada salah satu dari
            <span id="extra-boxes-count"></span>
            kotak tambahan tersebut!

        {{ endif }}

    </p>

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

        {{ if en }}

            Open
            <span id="extra-boxes-accept"></span>
            more boxes

        {{ else }}

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