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

<div style = "text-align:center;">
Avoid the Bomb!<br>
<span style ="color : blue;">Ronde Sebenarnya</span> <br>
Round {{ player.round_number }} of {{ total_rounds_lucky }}
</div>
{{ endblock }}

{{ block content }}

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

  <div id="info-panel">
    <p><b>Kotak terkumpul:</b> <span id="boxes-count">0</span></p>
    <p><b>Nilai pendapatan:</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">Stop and Collect</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">Pause</button>
    <button type="button" id="restart-button" class="btn btn-success btn-lg hidden">Restart</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">Stop</button>
  </div>
  {{ endif }}
</div>

<dialog id="close-dialog" class="close-dialog">
    <div class="waiting-text">⚠ HAMPIR KENA BOM!</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>
    Hasil sudah siap! Anda berhasil lolos dari Bomb! 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 Bomb terdapat pada salah satu dari <span id="extra-boxes-count"></span> kotak tambahan!
  </p>
  <button type="button" id="bonus-accept" class="btn btn-success">Ambil <span id="extra-boxes-accept"></span> kotak lagi</button>
  <button type="button" id="bonus-decline" class="btn btn-secondary">Berhenti sekarang</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 }}