<header class="admin-nav">
    <a class="nav-back" ng-click="$ctrl.back()"> <i class="fa fa-chevron-left"></i> Back</a>
    <p class="nav-title">Insight list</p>
</header>
<alert class="navbar-alert alert-ok" ng-show="$ctrl.activeOps>0">SAVING</alert>


<div class="sub-navbar sub-navbar">
    <div class="container">
        <div class="subnav-box left">
            <img class="product-image" ng-src="{{$ctrl.product.imageUrl}}">
        </div>
        <div class="subnav-box left product-info" >
            <p class="product-brand brand-name">{{$ctrl.product.brandName||'BRAND'}}</p>
            <h3 class="product-name">{{$ctrl.product.productName||'PRODUCT TITLE'}}</h3>
        </div>
        <div class="subnav-box right" ng-class="{'active merge':merge.status=='MergeOn'}">
            <!-- <a class="subnav-button first"><i class="glyphicon glyphicon-resize-small"></i></a> -->
            <!-- this should be a switch button but I was not able to integrate the ui plug in due to bower issues-->
            <form class="subnav-button"  name="merge-mode">
                <input type="radio" ng-model="$ctrl.isMergeModeActive" ng-value="false" class="w-disable-merge-mode-button" >
                <input type="radio" ng-model="$ctrl.isMergeModeActive" ng-value="true" class="w-enable-merge-mode-button">
            </form>
            <p class="subnavbtn-text">Merge <span ng-show="$ctrl.isMergeModeActive">On</span> <span ng-show="!$ctrl.isMergeModeActive">Off</span></p>
        </div>
        <div class="subnav-box right">
            <a class="subnav-button w-openModal-insight-preview" ng-click="$ctrl.openInsightPreviewModal($ctrl.product)" href=""><i class="glyphicon glyphicon-list">
                </i><span class="badge button-badge w-number-of-published-insights">{{($ctrl.product.insightsDraft|filter:{state:2}).length}}</span>
            </a>
        </div>
        <div class="subnav-box right">
          <div class="input-group search-insight">
            <span class="input-group-addon"><i class="fa fa-search"></i></span>
            <input type="text" class="form-control" placeholder="Type a keyword to filter..." ng-model="filterKey">
            <span class="input-group-addon" ng-click="filterKey = ''"><i class="fa fa-times-circle"></i></span>
          </div>
        </div>
    </div>
</div>

<div class="container filter-on-container">
  <div class="alert alert-warning" role="alert" ng-show="filterKey">Filter insights on</div>
</div>

<!--INSIGHT CONTAINER -->
<div class="container insights-container">

    <!-- ng-class="{'active-insight':insight.published}" -->
    <div class="row insight-item insight-container w-insight-item"  ng-repeat="insight in ($ctrl.product.insightsDraft|enrichArrayElementsWithIndex|sortInsightsByLinkedReviewsDesc|unique:'_index'|substringAttributes:['author','text']:filterKey:'search') track by $index" ng-class="{'w-insight-to-merge':$ctrl.isMergeModeActive && insight.isToMerge,'active-insight':insight.published }">

        <!-- checkbox for merge mode -->
        <div class="col-sm-1 col-md-1" ng-if="$ctrl.isMergeModeActive">
            <div class="checkbox checkbox-merge">
                <input type="checkbox" ng-model="insight.isToMerge" class="w-insight-to-merge-checkbox">
            </div>
        </div>
        <!-- no merge mode merge mode -->
        <div class="col-sm-1 col-md-1" ng-if="!$ctrl.isMergeModeActive">
            <a class="btn btn-xs wide-side-button pale w-number-of-linked-reviews w-go-to-linked-reviews"
             ui-sref="linked({ productId: $ctrl.product._id, createdAt: insight.createdAt, fieldName: 'reviewIds' })"
             tooltip="Number of linked reviews">{{insight.reviewIds.length}} - R&R</a>
            <a class="btn btn-xs wide-side-button pale w-number-of-linked-call-center-data w-go-to-linked-reviews" 
            ui-sref="linked({ productId: $ctrl.product._id, createdAt: insight.createdAt, fieldName: 'callCenterDataIds' })"
            tooltip="Number of linked call center data">{{insight.callCenterDataIds.length||0}} - CC</a>
            <a class="btn btn-xs wide-side-button w-insight-state w-publish-insight" ng-click="$ctrl.publishInsight(insight)" ng-if="!insight.state ">PUBLISH</a>
            <a class="btn btn-xs wide-side-button w-insight-state w-unpublish-insight" ng-click="$ctrl.unpublishInsight(insight)" ng-if="insight.state===2">HIDE</a>
        </div>


        <div class="col-sm-10 col-md-10">
            <div class="form-group">
                <!-- ng-disabled="$ctrl.isMergeModeActive" -->
                <textarea  ng-focus="$ctrl.setIndexOfCurrentInsightToEdit($index)"  type="text" ng-model="insight.newInsightText" class="form-control insight-text-input w-insight-text-input"></textarea>
                <p class="w-insight-author" style="text-align:right;color:#aaa;">{{insight.author}}</p>
            </div>
        </div>
        <div class="col-sm-1 col-md-1">
            <a class="btn btn-go save-text-insight-button" ng-show="$ctrl.indexOfCurrentInsightToEdit===$index" ng-click="$ctrl.updateInsightTextByInsightAndNewText(insight._index, insight.newInsightText); $ctrl.setIndexOfCurrentInsightToEdit(-1);$ctrl.addAlert()">SAVE</a>
        </div>
    </div>

    </div>
    <button ng-show="$ctrl.isMergeModeActive" type="button" class="floating-action-button merge-button w-merge-insights-button" ng-click="$ctrl.mergeInsights($ctrl.product.insightsDraft)">Merge!</button>
