{{ extends "global/Page.html" }}
{{ block title }}
<div style="text-align:center">
Avoid the Bomb!<br>
<span style="color: red;">Practice Round</span> <br>
Round {{ player.round_number }} of {{ total_rounds_trial }}
</div>
{{ endblock }}

{{ block content }}

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

  <div id="info-panel">
    <p><b>Selected boxes:</b> <span id="boxes-count">0</span></p>
    <p><b>Current earnings:</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">
  <h3>Close!</h3>
  <p>You were close to the bomb.</p>
  <button type="button" id="close-dialog-ok" class="btn btn-primary"></button>
</dialog>

<dialog id="bonus-dialog">
  <h3 id="bonus-message"></h3>
  <p>
    The result is ready! You successfully avoided the bomb! You may collect <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 located in one of the <span id="extra-boxes-count"></span> additional boxes!
  </p>
  <button type="button" id="bonus-accept" class="btn btn-success">Collect <span id="extra-boxes-accept"></span> more</button>
  <button type="button" id="bonus-decline" class="btn btn-secondary">Stop now</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 }}