{{ 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>
    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;

                    // Force Angular to flush all pending watches first
                    scope.$apply();

                    // Read hasBomb() directly
                    document.getElementById('bomb_bret_real').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>

    <script>
    (function(angular){
        let module = angular.module("bombTask");

        for (let key of Object.keys(js_vars)) {
            module.constant(key, js_vars[key]);
        }
    })(angular);
    </script>
{{ endblock }}


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

    {{ if en }}
        Round: {{ player.round_number }} of {{ Constants.num_rounds }}<br/>
        <b style="color: blue;">Real Rounds</b>
    {{ else }}
        <b style="color: blue;">Ronde Sebenarnya</b><br/>
        {{ player.round_number }} dari {{ Constants.num_rounds }}
    {{ endif }}

</div>

<div style="text-align: center; margin-bottom: 10px; font-size: 16px;">
    {{ if 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"
                            href="javascript:void(0)"
                            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"
                            href="javascript:void(0)"
                            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"
                            href="javascript:void(0)"
                            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_bret_real"
                id="bomb_bret_real"
                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_bret_real' }}

    </div>
</div>


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

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

    {{ if en }}
        To begin, click on the boxes you want to select.
        Once you are done, click <b style="color: red">"Stop"</b> and then
        <b style="color: blue">"Solve"</b> to reveal what is behind your selected
        boxes.
        <br/>
        You can undo your selection by clicking on a selected box again.
    {{ else }}
        Untuk memulai, klik 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 dengan mengklik kembali kotak
        yang telah dipilih.
    {{ endif }}

</p>

{{ endblock }}