<div class="product-info-side" ng-show="$ctrl.isInsightsEditorOpen">
	<nav class="info-side-nav">
		<i class="glyphicon glyphicon-remove clickable" ng-click=" $ctrl.isInsightsEditorOpen=false "></i>
		<span> Product title info</span>
	</nav>
	<div class="">
		<div class="info-side-head row">
			<div class="col-md-4 info-image-box">
				<img ng-src="{{$ctrl.currentSession.currentProduct.imageUrl}}"/>
			</div>
			<div class="col-md-8 info-data-box">
				<p class="product-brand">{{$ctrl.currentSession.currentProduct.brandName}}</p>
				<h3 class="product-name">{{$ctrl.currentSession.currentProduct.productName }}</h3>
				<div class="product-stats">
					<span class="product-range">{{$ctrl.currentSession.currentProduct.priceRange.min}}-{{$ctrl.currentSession.currentProduct.priceRange.max}} €</span>
				</div>
			</div>
		</div>
    <div style="margin: 0 10px;">
      <div ng-hide="$ctrl.isAddingAnInsight">
        <button type="button" class="btn btn-default secondary-back btn-block w-add-new-insight" ng-click="$ctrl.isAddingAnInsight=true">ADD INSIGHT</button>
      </div>
      <div class="" ng-show="$ctrl.isAddingAnInsight">
        <div>
          <textarea class="form-control new-insight w-new-insight-text" rows="3" ng-model="$ctrl.insightText" auto-focus="{{$ctrl.isAddingAnInsight}}"></textarea>
        </div>
        <div class="new-insight-actions-block">
          <button type="button" class="btn btn-default secondary-back new-insight-action w-save-new-insight" ng-click="$ctrl.addNewInsight($ctrl.insightText); insightText='';">SAVE</button>
          <button type="button" class="btn btn-default secondary-back new-insight-action" ng-click="$ctrl.isAddingAnInsight=false; insightText='';">CANCEL</button>
        </div>
      </div>
    </div>
    <div class="tab-insights">
      <div class="tab-insights-item" ng-click="$ctrl.activeSearch = 'search'" ng-class="{'active': $ctrl.activeSearch === 'search'}">
        <h5>All insights</h5>
      </div>
      <div class="tab-insights-item" ng-click="$ctrl.activeSearch = 'mine'" ng-class="{'active': $ctrl.activeSearch === 'mine'}">
        <h5>My insights</h5>
      </div>
    </div>
    <div class="search-insight-text-author form-group" ng-show="$ctrl.activeSearch === 'search'">
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
        <input type="text" class="form-control" placeholder="Search insights by author or keyword" ng-model="$ctrl.searchQuery" >
      </div>
    </div>
		<div class="info-side-body">
			<ul class="insight-list" vs-repeat >
				<li class="insight w-insight-item" 
            ng-repeat="insight in $ctrl.currentSession.currentProduct.insightsDraft|removeHiddenInsights|insightOwnership:($ctrl.activeSearch)|sortInsightsByLinkedReviewsDesc|substringAttributes:['author','text']:$ctrl.searchQuery:$ctrl.activeSearch track by $index" 
            ng-class="{true:'active'}[$ctrl.isLinked(insight,review._id)]">
					<p class="insight-text" ng-hide="$ctrl.editing">{{insight.text}}</p>
          <textarea type="text" ng-model="$ctrl.insightUnderEditing.text" ng-show="$ctrl.editing" style="color: black;"></textarea>
          <div class="edit-actions" ng-show="$ctrl.editing">
            <input class="btn btn-default secondary-back" type="button" value="SAVE" ng-click="$ctrl.saveEditInsight(insight); $ctrl.editing = false;">
            <input class="btn btn-default secondary-back" type="button" value="CANCEL" ng-click="$ctrl.editing = false">
          </div>
          <p class="insight-text author" ng-if="$ctrl.activeSearch !== 'mine'">{{insight.author}}</p>
          <p class="insight-text author" ng-show="$ctrl.activeSearch === 'mine' && !editing">
            <span ng-click="$ctrl.editInsight(insight); $ctrl.editing = true;">edit</span>
            <span>&nbsp;-&nbsp;</span>
            <span ng-click="$ctrl.removeInsight(insight)">delete</span>
          </p>
					<a class="insight-button" ng-click="$ctrl.toggleLink(insight)"><i class="glyphicon glyphicon-link "></i><span>{{insight.reviewIds.length}}</span></a>
				</li>
			</ul>
		</div>
	</div>
</div>