<!--TODO MIGHT CHANGE THIS TO CHARACTER COMPONENT-->
<div class="modal-backdrop fade show ng-hide" ng-show="$ctrl.showStory"></div>
<div id="exampleModalLong" class="modal fade show d-flex justify-content-center scroll-y ng-hide" ng-show="$ctrl.showStory" ng-click="$ctrl.toggleStory()">
    <div class="col col-md-10 col-lg-8">
        <div class="modal-content" ng-click="$event.stopPropagation()">
            <div class="modal-header">
                <h5 class="modal-title">{{$ctrl.story.name}}</h5>
                <button type="button" class="close" ng-click="$ctrl.toggleStory()">
                    <i class="material-icons v-align-middle">cancel</i>
                </button>
            </div>
            <div class="modal-body">
                <div ng-include="$ctrl.story.templateUrl"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" ng-click="$ctrl.toggleStory()">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

<div>
    <div>
        <h3>{{$ctrl.story.name}} Character Activity</h3>
        <p>Complete the activity below! Drag the words in the word bank on the left into the proper box on the right.</p>
    </div>
    <!--<button class="btn btn-primary" ng-click="$ctrl.toggleStory()">View Story</button>-->
    <hr />
    <div class="row">
        <!--STORY-->
        <div class="col scroll-y" style="height: 450px;">
            <h4>{{$ctrl.story.name}}</h4>
            <div ng-include="$ctrl.story.templateUrl"></div>
        </div>

        <!--WORD BANK-->
        <div class="col">
            <h4>Word Bank</h4>
            <ul dnd-list="$ctrl.map.wordbank" class="word-bank">
                <!-- The dnd-draggable directive makes an element draggable and will
                transfer the object that was assigned to it. If an element was
                dragged away, you have to remove it from the original list
                yourself using the dnd-moved attribute -->
                <li ng-repeat="w in $ctrl.map.wordbank"
                    dnd-draggable="w"
                    dnd-moved="$ctrl.map.wordbank.splice($index, 1)"
                    dnd-effect-allowed="move"
                    dnd-selected="$ctrl.selected = w"
                    ng-class="{'selected': $ctrl.selected === w}">
                    {{w.word}}
                </li>
            </ul>
        </div>

        <!--ANSWERS-->
        <div class="col">
            <h4>Activity</h4>
            <div ng-repeat="p in $ctrl.map.prompts">
                <span>
                    {{p.title}} 
                    <i class="material-icons align-middle" title="{{p.tooltip}}">help</i>
                    <span>
                        {{p.answer.length}} / at least {{p.required}} required
                    </span>
                </span>
                <ul dnd-list="p.answer" 
                    class="word-spot"
                    dnd-drop="$ctrl.moveWordToPrompt(p, item)"
                    dnd-dragover="$ctrl.canDragToPrompt(p)"
                    ng-class="{'invalid' : p.invalid && !p.complete, 'complete': p.complete}">
                    <li ng-repeat="item in p.answer"
                        dnd-draggable="item"
                        dnd-moved="p.answer.splice($index, 1)"
                        dnd-effect-allowed="move"
                        dnd-selected="$ctrl.selected = item"
                        ng-class="{'selected': $ctrl.selected === item}">
                        {{item.word}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="mb-3 text-center" style="position: fixed; top: 9px; margin: 0 35%; width: 30%; z-index: 1000000">
     <!-- <span class="text-muted">You must fill in all the boxes before you can continue. All boxes should be colored green.</span> 
    <br /> -->
    <app-footer></app-footer>
    <button style="float: right" class="btn btn-primary btn-lg" ng-disabled="!$ctrl.isComplete" ng-click="$ctrl.next()">Next</button>
</div>
