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

{{ block title }}
<div style="text-align:center;">

    {{ if en }}
        Round: {{ player.round_number }} of {{ total_rounds_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_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 }}
          Selected boxes:
        {{ 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 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 }}
          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 }}
          Resume
        {{ else }}
          Resume
        {{ 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">
        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">
      Stop
    </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"></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 those
      <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 }}
      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 }}