{{ 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>
{{ 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 — don't trust cached form value
                    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;">
Ronde Nomor: {{ player.round_number }} dari {{ Constants.num_rounds }}<br/>
<b style="color: blue;">Ronde Sebenarnya</b>
</div>
{{ endblock }}


{{ block content }}
<div style="max-width:800px; margin:auto; text-align:center; ">
    <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="row"
                        data-ng-repeat="(row,columns) in bombTaskController.matrix">
                        <div
                            class="col"
                            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-ng-style="{
                                    'width':bombTaskController.width,
                                    'height':bombTaskController.height
                                }"
                                data-card-is-clickable="!bombTaskController.dynamic && !bombTaskController.input"
                                data-card-is-disabled="(!bombTaskController.undoable && column.$$active) || !bombTaskController.started || bombTaskController.stopped">

                                <span
                                    class="front"
                                    data-ng-style="{
                                        'width':bombTaskController.width,
                                        'height':bombTaskController.height
                                    }">
                                    <i class="icon fas fa-check"></i>
                                </span>
                                <span
                                    class="back"
                                    data-ng-style="{
                                        'width':bombTaskController.width,
                                        'height':bombTaskController.height
                                    }">
                                    <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>Note:</strong></p>
<p style="text-align: center;">
    Untuk memulai, Anda dapat mulai mengklik kotak-kotak yang ingin Anda pilih.
    Setelah selesai, klik 'stop' lalu 'solve' untuk melihat apa yang ada di balik kotak yang Anda pilih. <br/>
    Anda dapat membatalkan pilihan Anda dengan mengklik kotak yang dipilih sekali lagi.
</p>


{{ endblock }}