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


{{ block title }}
<div style="text-align:center;">
Round Number: {{ player.round_number }} out of {{ Constants.num_rounds }}<br/>
<b style="color: blue;">Practice</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" 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>
</div>

<p style="text-align: center;"><strong>Note:</strong></p>
<p style="text-align: center;">
    To start, you can start clicking on the boxes you would like to choose.
    After you are done, click 'stop' and then 'solve' to reveal what's behind the boxes you choose. <br/>
    You may undo your choice by clicking on the chosen box once again.
</p>

{{ endblock }}