<header class="admin-nav">
    <a class="nav-back" ng-click="back()">
        <i class="fa fa-chevron-left">
        </i>
        Back
    </a>
    <p class="nav-title">
        Keyword tag links
    </p>
</header>




<div class="container keyword2tag-table" style="margin-top:100px;">
	<span class="dropdown pull-left" uib-dropdown is-open="status.isopen">
      <a href class="dropdown-toggle" uib-dropdown-toggle>
        {{$ctrl.currentDomain}} <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" uib-dropdown-menu >
        <li ng-repeat="domain in $ctrl.domains">
          <a href ng-click="$ctrl.changeCurrentDomain(domain)">{{domain}}</a>
        </li>
      </ul>
    </span>
	<div class="pull-right btn-group btn-group-sm" >
		<button type="button" class="btn" ng-class="{'btn-info': !statusFilter}" ng-click="removeStatusFilter()">All ({{$ctrl.totalCnt}})</button>
		<button type="button" class="btn" ng-class="{'btn-primary': statusFilter === 'new'}" ng-click="setStatusFilter('new')">New ({{$ctrl.newCnt}})</button>
		<button type="button" class="btn" ng-class="{'btn-success': statusFilter === 'approved'}" ng-click="setStatusFilter('approved')">Approved ({{$ctrl.approvedCnt}})</button>
		<button type="button" class="btn" ng-class="{'btn-danger': statusFilter === 'rejected'}" ng-click="setStatusFilter('rejected')">Rejected ({{$ctrl.rejectedCnt}})</button>
	</div>
	<div class="table-responsive">
		<table class="table">
			<thead>
				<tr>
					<th>Keyword</th>
					<th>Tag</th>
					<th>Status</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="keyword2tag in $ctrl.tmpKeyword2tags | filterByKeyword2tagStatus:statusFilter">
					<td>{{keyword2tag.keyword}}</td>
					<td>
						<select ng-disabled="keyword2tag.status && keyword2tag.status === 'rejected'" class="form-control" ng-model="keyword2tag.tag" ng-change="$ctrl.saveKeyword2tag(keyword2tag)">
							<option ng-repeat="tag in $ctrl.domainRelatedTagUids"
									ng-selected="keyword2tag.tag && keyword2tag.tag === tag">{{tag}}</option>
						</select>
					</td>
					<td>
						<span class="label label-success" ng-if="keyword2tag.tag && keyword2tag.status !== 'rejected'">Approved</span>
						<span class="label label-primary" ng-if="!keyword2tag.tag && keyword2tag.status !== 'rejected'">New</span>
						<span class="label label-danger" ng-if="keyword2tag.status && keyword2tag.status === 'rejected'">Rejected</span>
					</td>
					<td>
						<button ng-disabled="keyword2tag.status && keyword2tag.status === 'rejected'" type="button" class="btn btn-danger" ng-click="$ctrl.rejectKeyword(keyword2tag)">Reject</button>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="text-center">
			<button ng-show="keyword2tags && keyword2tags.length && !$ctrl.loading && $ctrl.keyword2tags.length < $ctrl.totalCnt" class="btn btn-default" ng-click="$ctrl.addPage()">Load more</button>
			<i ng-show="loading" class="fa fa-spinner faa-spin animated"></i>
		</div>
	</div>
</div>