<!-- ANNOTATION TOOLBAR -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" >
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <div class="btn-group" uib-dropdown is-open="status.isopen">
                        <button id="single-button" type="button" class="btn btn-primary w-toggle-product-list-to-analyze" uib-dropdown-toggle ng-disabled="disabled">
                            {{$ctrl.CurrentSession.getCurrentProduct() ? ($ctrl.CurrentSession.getCurrentProduct().productName + ' - '+($ctrl.CurrentSession.getCurrentProduct().dataSource||'reviews')) : 'Pick a Product' }}<span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
                            <li role="presentation" ng-repeat="product in $ctrl.products track by $index" class="w-product-name-to-analyze">
                                <a role="menuitem" tabindex="-1" ng-click="$ctrl.changeProductFilter(product)">
      								{{product.productName}} - {{product.language}} - {{product.dataSource||'reviews'}}
      							</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="w-toggle-insights-editor"><a ng-click="$ctrl.toggleInsightsEditor()"><span class="glyphicon glyphicon-align-justify"></span></a></li>
            </ul>
        </div>
    </div>
</nav>
<!--END ANNOTATION TOOLBAR -->

<div class="container">

    <!--  ALERTS  -->
    <div>
        <alert ng-repeat="alert in $ctrl.alerts" type="{{alert.type}}" close="$ctrl.closeAlert($index)">
            {{alert.msg}}
        </alert>
    </div>

    <!-- TEXT OF REVIEW ROW -->
    <div class="row text-of-review" ng-show="$ctrl.review!=null">
        <div class="col-md-6 col-sm-10 review-column">
            <h2 class="review-title" ng-bind-html="$ctrl.review.review.subtitle|unsafe"></h2>
            <p class="review-data">
                from {{$ctrl.review.review.channel}} by {{$ctrl.review.review.authorName}} - <span class="saved-review" ng-show="$ctrl.review.analysis.hasBeenManuallyAnnotated">saved</span>
                <i tooltip="annotated by a machine" tooltip-placement="bottom" class="fa fa-cogs" ng-show="$ctrl.isReviewAnnotatedByHuman()"></i>
                <i tooltip="annotated by a human" tooltip-placement="bottom" class="fa fa-user" ng-show="$ctrl.isReviewAnnotatedByHuman()"></i>
                <i style="color: red" tooltip="review's annotations contains issues" class="fa fa-warning" ng-show="$ctrl.reviewContainsIssues()"></i>
                <br/>
                <rating-stars value="$ctrl.review.review.rating.value"></rating-stars>
            </p>
            <annotation-editor class="annotation-editor"  annotations="$ctrl.review.feature2sentiment" text="$ctrl.review.review.html" origin=" 'free-text' " currentOrigin="$ctrl.currentOrigin" selected-text="$ctrl.selectedText" ng-if="$ctrl.review.review.html && $ctrl.review.review.html !== ''">
            </annotation-editor>
            <h5>Pros</h5>
            <!-- new pros -->
            <div class="annotation-editor" annotation-editor annotations="$ctrl.review.feature2sentiment" text="$ctrl.review.review.pros" origin=" 'pros' " currentOrigin="$ctrl.currentOrigin" selected-text="$ctrl.selectedText" ng-if="$ctrl.review.review.pros && $ctrl.review.review.pros !== ''">
            </div>
            <!-- end /new pros -->
            <!-- new cons -->
            <h5>Cons</h5>
            <div class="annotation-editor" annotation-editor annotations="$ctrl.review.feature2sentiment" text="$ctrl.review.review.cons" origin=" 'cons' " currentOrigin="$ctrl.currentOrigin" selected-text="$ctrl.selectedText" ng-if="$ctrl.review.review.cons && $ctrl.review.review.cons !== ''">
            </div>
            <!-- end /new cons -->
        </div>

        <!-- ANNOTATION LIST -->
        <div class="col-md-3 col-sm-2 annotation-column">
            <!-- {{$ctrl.review.feature2sentiment}} -->
            <annotation-list review="$ctrl.review" annotations="$ctrl.review.feature2sentiment"></annotation-list>
        </div>

        <div class="col-md-3 col-sm-12 review-side">
            <!-- # OF MISSING REVIEWS -->
            <div class="advancement-progress">
                <p class="missing-counter">{{$ctrl.numberOfReviews - $ctrl.numberOfAnnotatedReviews}} reviews to go ( {{$ctrl.reviewIndex}}/{{$ctrl.reviewTotal}} )</p>
                <div class="progress">
                    <div class="progress-bar review-progress" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" ng-style="{width: $ctrl.calculatePercentageString( $ctrl.numberOfAnnotatedReviews, $ctrl.numberOfReviews)}">
                    </div>
                </div>
            </div>

            <!-- BACK, FORWARD, SAVE-->
            <div class="nav-box">
                <div class="nav-button-group">
                    <button class="btn btn-default" uib-tooltip="Go 50 reviews back" ng-click="$ctrl.previousReview(50)">
                        <span class="glyphicon glyphicon-backward"></span>
                    </button>
                    <button class="btn btn-default" uib-tooltip="Go 1 review back" ng-click="$ctrl.previousReview()">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </button>
                    <button class="btn btn-default" uib-tooltip="Go 1 review forward" ng-click="$ctrl.nextReview()">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </button>
                    <button class="btn btn-default" uib-tooltip="Go 50 review forward" ng-click="$ctrl.nextReview(50)">
                        <span class="glyphicon glyphicon-forward"></span>
                    </button>
                    <button class="btn btn-default" uib-tooltip="Go last unsaved review" ng-click="$ctrl.nextReviewToAnnotateByTitlesAndDataSource()">
                        <span class="glyphicon glyphicon-fast-forward"></span>
                    </button>
                </div>
                <div class="nav-button-group">
                    <button class="btn btn-default" uib-tooltip="Save current review and go to last unsaved" ng-click="$ctrl.saveAndGoToNextReviewToAnnotate($ctrl.review)">
                        SAVE & NEXT
                    </button>
                    <button class="btn btn-default" uib-tooltip="Save current review" ng-click="$ctrl.saveAnnotatedReview($ctrl.review)">
                        SAVE
                    </button>
                </div>
            </div>
            <!-- OVERALL SENTIMENT -->
            <div class="sentiment-box">
                <h3 class="box-title">Sentiment</h3>
                <div class="mood">
                    <button class="btn btn-info" uib-tooltip="Very negative sentiment" 
                        ng-click="$ctrl.setAggregatedSentiment(-2)" ng-class="{'-2':'active'}[$ctrl.review.aggregatedSentiment]">
                        <span class="sentiment-button sent-vnegative"></span>
                    </button>
                    <button class="btn btn-info" uib-tooltip="Negative sentiment" 
                        ng-click="$ctrl.setAggregatedSentiment(-1)" ng-class="{'-1':'active'}[$ctrl.review.aggregatedSentiment]">
                        <span class="sentiment-button sent-negative" ></span>
                    </button>
                    <button class="btn btn-info" uib-tooltip="Neutral sentiment" 
                        ng-click="$ctrl.setAggregatedSentiment(0)" ng-class="{'0':'active'}[$ctrl.review.aggregatedSentiment]">
                        <span class="sentiment-button sent-neutral"></span>
                    </button>
                    <button class="btn btn-info" uib-tooltip="Positive sentiment" 
                        ng-click="$ctrl.setAggregatedSentiment(1)" ng-class="{'1':'active'}[$ctrl.review.aggregatedSentiment]">
                        <span class="sentiment-button sent-positive"></span>
                    </button>
                    <button class="btn btn-info" uib-tooltip="Very positive sentiment" 
                        ng-click="$ctrl.setAggregatedSentiment(2)" ng-class="{'2':'active'}[$ctrl.review.aggregatedSentiment]">
                        <span class="sentiment-button sent-vpositive"></span>
                    </button>
                </div>
            </div>
            <!-- DICTIONARY - SEARCH FOR TAGS -->

            <ul class="tag-list" dnd-list="tagsToSuggest" ng-show="false">
                <li>
                    <a ng-click="addNewTag(keywordToFilterTagsBy)" class="clickable">
                        <i class="fa fa-plus-circle"></i> Add New tag
                    </a>
                </li>
                <li class="tag-text" ng-class="tag.type" 
                ng-repeat="tag in tags=($ctrl.tagsToSuggest|filterStringsByStartsWith:keywordToFilterTagsBy|excludeTagsThatAreBothPositiveAndNegative:$ctrl.review.feature2sentiment|orderBy:'name') track by $index" 
                dnd-draggable="tag" dnd-dragstart="$ctrl.startDraggingTag('Started to drag an item', event,tag)" 
                dnd-effect-allowed="move">
                    <span>{{tag.name}}</span><i class="fa fa-bars"></i>
                </li>
                <li class="add-tag" ng-show="tags.length===0">
                    <p>
                        The tag <i>{{keywordToFilterTagsBy}}</i> is not in the set of tags yet.
                        <br> Please click the button below to add this tag.
                    </p>
                    <a ng-click="$ctrl.addNewTag(keywordToFilterTagsBy)" class="clickable">
                        <i class="fa fa-plus-circle"></i> Add New tag
                    </a>
                </li>
            </ul>
            
        </div>
        <!-- END REVIEW SIDE-->
    </div>
    <!-- END REVIEW ROW -->

    <!-- <overall-insight-editor></overall-insight-editor> -->
    <!-- <ng-include src=" './components/overall-insight-editor/overall-insight-editor.html' "></ng-include> -->
    <overall-insights-editor review="$ctrl.review"></overall-insights-editor>

    <div class="tag-dictionary" ng-show="$ctrl.selectedText && $ctrl.selectedText !== ''">
        <tag-selection style="display: block; height: 100%;" tags-domain="$ctrl.tagsDomain" language="$ctrl.tagsLanguage" selected-text="$ctrl.selectedText" review="$ctrl.review">
        </tag-selection>
    </div>

</div>