{{ load i18n }}

{{ block title }}
<div align="center">  <strong> Task 2 </strong> </div>
{{ endblock }}

{{ block content }}
<br/>
<p style="line-height:1.75;font-size:15px" align="left">
    <strong>Notes:</strong> You can choose the boxes to open by clicking on them (you are able to undo your choice by
    clicking on the same box again). Once you have chosen all the boxes you want to open, first click on the "Confirm"
    button, followed by the "Open boxes" button to find out where the bomb is and how much you can earn in Task 2.
</p>

   <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-yen-sign"></i>
                                    <i class="icon fas fa-bomb"></i>
                                </span>

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

                    <div class="counter">

                        <div data-ng-if="!bombTaskController.input">
                            <strong>
                                Number of boxes collected:
                            </strong>
                            <span data-ng-bind="bombTaskController.getCollectedBoxes()"></span>
                            <br>
                            <strong>
                                Number of boxes remaining:
                            </strong>
                            <span data-ng-bind="bombTaskController.getRemainingBoxes()"></span>
                        </div>
                        <div data-ng-if="bombTaskController.input">
                            <label>
                                Number of 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="{{ C.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>
                                    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>
                                    Confirm
                                </span>
                            </button>

                            <button
                                type="button"
                                href="javascript:void(0)"
                                class="btn btn-success btn-md resolve"
                                data-ng-if="bombTaskController.feedback"
                                data-ng-click="bombTaskController.resolve()"
                                data-ng-disabled="!bombTaskController.stopped">
                                <span>
                                    Open boxes
                                </span>
                            </button>
                        </div>
                        </br>
                        <div data-ng-if="bombTaskController.resolved">
                            {{ next_button }}
                        </div>

                    </div>
                </div>

                <input type="hidden" name="bomb" id="bomb" data-ng-value="bombTaskController.form.bomb"/>
                <input type="hidden" name="boxes_scheme" id="boxes_scheme" data-ng-value="bombTaskController.form.boxes_scheme"/>
                <input type="hidden" name="boxes_collected" id="boxes_collected" data-ng-value="bombTaskController.form.boxes_collected"/>
                <input type="hidden" name="bomb_row" id="bomb_row" value="" data-ng-value="bombTaskController.form.bomb_row"/>
                <input type="hidden" name="bomb_col" id="bomb_col" value="" data-ng-value="bombTaskController.form.bomb_col"/>

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


{{ endblock }}

{{ 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>(function(angular){
        let module = angular.module("bombTask");
        for (let key of Object.keys(js_vars)) {
            module.constant(key, js_vars[key]);
        }
    })(angular);
    </script>
{{ endblock }}