{{ block styles }}
    <link href="{{ static 'bret/css/bret.css' }}" rel="stylesheet"/>
    <link href="{{ static 'bret/css/custom.css' }}" rel="stylesheet"/>
    <link href="{{ static 'bret/css/fontawesome-all.css' }}" rel="stylesheet"/>
    <style type="text/css">.ng-cloak{display:none !important;}</style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
{{ endblock }}


{{ block scripts }}
    <script src="{{ static 'bret/js/angular.min.js' }}"></script>
    <script src="{{ static 'bret/js/bret.js' }}"></script>
    <script>(function(angular){
        let module = angular.module("bombTask");
        for (let key of Object.keys(js_vars)) {
            module.constant(key, js_vars[key]);
        }
    })(angular);
    </script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var maxWait = 50, waited = 0;
    var interval = setInterval(function () {
        var appEl = document.getElementById('bomb-task');
        var injector = appEl && angular.element(appEl).injector();
        if (injector || waited >= maxWait) {
            clearInterval(interval);
            if (!injector) return;

            var form = document.querySelector('form');
            form.addEventListener('submit', function () {
                var scope = angular.element(appEl).scope();
                var ctrl = scope.bombTaskController;
                if (!ctrl) return;

                scope.$apply();

                document.getElementById('bomb').value           = ctrl.hasBomb();
                document.getElementById('boxes_collected').value = ctrl.getCollectedBoxes();
                document.getElementById('boxes_scheme').value   = angular.toJson(ctrl.collection);
                document.getElementById('bomb_row').value       = ctrl.bomb.row;
                document.getElementById('bomb_col').value       = ctrl.bomb.col;
            });
        }
        waited++;
    }, 100);
});
</script>
{{ endblock }}


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

    {{ if is_en }}
        Round: {{ player.round_number }} of {{ Constants.num_rounds }}<br/>
        <b style="color: red;">Practice Rounds</b>
    {{ else }}
        Ronde Nomor: {{ player.round_number }} dari {{ Constants.num_rounds }}<br/>
        <b style="color: red;">Latihan</b>
    {{ endif }}
</div>

<div style="text-align: center; margin-bottom: 10px; font-size: 16px;">
    {{ if is_en }}
    <strong>Note:</strong> If the entire 10×10 grid is not visible on your device screen,
    please swipe horizontally to view the entire grid.
    {{ else }}
    <strong>Catatan:</strong> Jika seluruh kotak dalam susunan 10×10 tidak terlihat pada
    layar perangkat Anda, silakan geser layar ke samping untuk melihat seluruh kotak.
    {{ endif }}
</div>
{{ endblock }}


{{ block content }}
<div style="max-width:800px; margin:auto; text-align:center; overflow-x: auto;">
    <div class="panel panel-primary">

        <div
            id="bomb-task"
            class="ng-cloak"
            data-ng-app="bombTask"
            data-ng-controller="BombTaskController as bombTaskController">

            <div class="matrix">

                <div
                    class="bret-row"
                    style="display:flex; flex-direction:row;"
                    data-ng-repeat="(row,columns) in bombTaskController.matrix">

                    <div
                        class="bret-col"
                        style="display:inline-block;"
                        data-ng-repeat="(col,column) in columns">

                        <div
                            class="holder"
                            data-card="column"
                            data-card-is-active="column.$$active"
                            data-card-on-toggle="bombTaskController.update(column,state)"
                            data-ng-class="{
                                'resolved':bombTaskController.resolved && column.$$resolved,
                                'bomb':bombTaskController.resolved && bombTaskController.isBomb(column)
                            }"
                            data-card-is-clickable="!bombTaskController.dynamic && !bombTaskController.input"
                            data-card-is-disabled="(!bombTaskController.undoable && column.$$active) || !bombTaskController.started || bombTaskController.stopped">

                            <span class="front">
                                <i class="icon fas fa-check"></i>
                            </span>
                            <span class="back">
                                <i class="icon fas fa-dollar-sign"></i>
                                <i class="icon fas fa-bomb"></i>
                            </span>

                        </div>
                    </div>
                </div>

                <div class="counter">

                    <div data-ng-if="!bombTaskController.input">
                        <strong>
                            {{ Lexicon.boxes_collected }}
                        </strong>
                        <span data-ng-bind="bombTaskController.getCollectedBoxes()"></span>
                        <br>
                        <strong>
                            {{ Lexicon.boxes_remaining }}
                        </strong>
                        <span data-ng-bind="bombTaskController.getRemainingBoxes()"></span>
                    </div>

                    <div data-ng-if="bombTaskController.input">
                        <label>
                            {{ Lexicon.boxes_to_collect }}

                            <input
                                min="0"
                                type="number"
                                class="form-control"
                                data-ng-change="bombTaskController.select()"
                                data-ng-disabled="bombTaskController.stopped"
                                data-ng-model="bombTaskController.input_value"
                                max="{{ num_boxes }}"/>
                        </label>
                    </div>
                </div>

                <div class="buttons">

                    <div data-ng-if="!bombTaskController.resolved">

                        <button
                            type="button"
                            class="btn btn-success btn-md start"
                            data-ng-if="bombTaskController.dynamic"
                            data-ng-click="bombTaskController.start()"
                            data-ng-disabled="bombTaskController.started">
                            <span>{{ Lexicon.start }}</span>
                        </button>

                        <button
                            type="button"
                            class="btn btn-danger btn-md stop"
                            data-ng-click="bombTaskController.stop()"
                            data-ng-disabled="!bombTaskController.getCollectedBoxes() || !bombTaskController.started || bombTaskController.stopped">
                            <span>{{ Lexicon.stop }}</span>
                        </button>

                        <button
                            type="button"
                            class="btn btn-primary btn-md resolve"
                            data-ng-if="bombTaskController.feedback"
                            data-ng-click="bombTaskController.resolve()"
                            data-ng-disabled="!bombTaskController.stopped">
                            <span>{{ Lexicon.solve }}</span>
                        </button>

                    </div>

                    <div data-ng-if="bombTaskController.resolved">
                        {{ next_button }}
                    </div>

                </div>
            </div>

            <input type="hidden" name="bomb"            id="bomb"            value="0"/>
            <input type="hidden" name="boxes_scheme"    id="boxes_scheme"    value="[]"/>
            <input type="hidden" name="boxes_collected" id="boxes_collected" value="0"/>
            <input type="hidden" name="bomb_row"        id="bomb_row"        value="1"/>
            <input type="hidden" name="bomb_col"        id="bomb_col"        value="1"/>

            <script id="/card.html" type="text/ng-template">
                <a
                    class="card"
                    data-ng-transclude=""
                    href="javascript:void(0)"
                    data-ng-click="cardController.toggle()"
                    data-ng-class="{
                        'active':cardController.isActive,
                        'disabled':cardController.isDisabled,
                        'clickable':cardController.isClickable
                    }">
                </a>
            </script>

        </div>

        {{ formfield_errors 'bomb' }}

    </div>
</div>


<p style="text-align: center;"><strong>
    {{ if is_en }}Note{{ else }}Catatan{{ endif }}:
</strong></p>

<p style="text-align: center;">
    {{ if is_en }}
        To begin, click on the boxes you would like to select.
        Once you are finished, click <b style="color: red">"Stop"</b> and then <b style="color: blue">"Solve"</b> to reveal what is behind the selected boxes.
        <br/>
        You can undo your selection by clicking on a selected box again.
    {{ else }}
        Untuk memulai, Anda dapat mulai mengklik kotak-kotak yang ingin Anda pilih.
    Setelah selesai, klik <b style="color: red">"Stop"</b> lalu <b style="color: blue">"Solve"</b> untuk melihat apa yang ada di balik kotak yang Anda pilih.
        <br/>
        Anda dapat membatalkan pilihan Anda dengan mengklik kotak yang dipilih sekali lagi.
    {{ endif }}
</p>

{{ endblock }}