
<p class="">
	<a class="link-unstyled"  data-content-template="views/popover-tpls/metadata.html" data-placement="bottom-left" data-animation="am-flip-x" data-auto-close="1" bs-popover><i class="fa fa-lg fa-map-marker"></i>&nbsp;<small>Mapped Commands</small></a>
</p>

<div class="btn-group" ng-model="ngModel.activeTab" bs-radio-group>
	<label class="btn btn-tab" ng-click="ngModel.selectedBtn = null;">
		<input type="radio" class="btn btn-default" value="menu">Menu Pages
	</label>
	<label class="btn btn-tab" ng-click="ngModel.selectedBtn = null;">
		<input type="radio" class="btn btn-default" value="hard">Hard Buttons
	</label>
</div>

<div ng-if="ngModel.activeTab === 'menu'">

	<ul class="list-unstyled lcd-grid menu" id="page" ng-model="ngModel.filteredMenuPage.btns" ui-sortable="sortableOptions">
		<li class="lcd-grid-item menu-btns" id="lcd-grid-item{{$index}}"
				ng-repeat="btn in ngModel.filteredMenuPage.btns track by btn.id" >
			<label
				class="btn btn-lcd btn-default" id="btn{{$index}}"
				ng-model="ngModel.selectedBtn"
				btn-radio="btn">
				{{btn.display_text}}
				<span class="fa fa-map-marker data-marker data-marker__pos2" ng-show="btn.func.id === ngModel.deviceData.meta_in_toggle"></span>
				<span class="fa fa-map-marker data-marker data-marker__pos2" ng-show="btn.func.id === ngModel.deviceData.meta_pwr_on"></span>
				<span class="fa fa-map-marker data-marker data-marker__pos2" ng-show="btn.func.id === ngModel.deviceData.meta_pwr_off"></span>
				<span class="fa fa-map-marker data-marker data-marker__pos2" ng-show="btn.func.id === ngModel.deviceData.meta_pwr_toggle"></span>

				<span class="fa fa-database data-marker data-marker__pos1" ng-if="btn.macro[0].type  === 1 && btn.func.type === 0"></span>
				<span class="fa fa-wifi data-marker data-marker__pos1" ng-if="btn.macro[0].type  === 1 && btn.func.type === 1"></span>
				<span class="fa fa-external-link-square data-marker data-marker__pos1" ng-if="btn.macro[0].type === 6"></span>
				<span class="fa fa-eye-slash data-marker data-marker__pos3" ng-if="btn.hidden"></span>

			</label>
		</li>
	</ul>

	<p ng-if="ngModel.filteredMenuPage.page_hidden == '1'" class="text-center" style="width:210px;">*Hidden Page*</p>

	<pagination class="pagination display-block overflow-hidden" boundary-links="false" items-per-page="1" total-items="ngModel.menu.pages.length" page="ngModel.currentMenuPage"  previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;" on-select-page="menuPageChanged(page)" rotate="false" max-size="3"></pagination>

	<button type="button" class="btn btn-menu display-inline-block" ng-if="hasPageBtn" ng-click="addPage()">Add a new page</button>
	<button type="button" class="btn btn-menu display-inline-block margin-left-md" ng-if="hasPageBtn" ng-click="hidePages()">Hide pages</button>
	<!-- <add-page></add-page> -->
</div>

<div ng-if="ngModel.activeTab === 'hard'">

	<ul class="list-unstyled lcd-grid hard" id="page"
			ng-class="{'padding-top-lg': ngModel.currentHardPage === 1,
								 'padding-top-md': ngModel.currentHardPage === 2
								}">
		<li class="lcd-grid-item hard-btns" id="lcd-grid-item{{$index}}" ng-repeat="hardBtn in ngModel.filteredHardPage.btns track by hardBtn.id" >
			<label
				class="btn btn-lcd btn-default" id="hard-btn{{$index}}"
				ng-model="ngModel.selectedBtn"
				btn-radio="hardBtn">
				<strong class="hard-btn-name bg-primary">{{hardBtn.name}}</strong>
				{{hardBtn.display_text}}
				<span class="fa fa-map-marker data-marker data-marker__pos2" ng-show="hardBtn.func.id === ngModel.deviceData.meta_in_toggle"></span>
				<span class="fa fa-map-marker data-marker data-marker__pos2" ng-show="hardBtn.func.id === ngModel.deviceData.meta_pwr_on"></span>
				<span class="fa fa-map-marker data-marker data-marker__pos2" ng-show="hardBtn.func.id === ngModel.deviceData.meta_pwr_off"></span>
				<span class="fa fa-map-marker data-marker data-marker__pos2" ng-show="hardBtn.func.id === ngModel.deviceData.meta_pwr_toggle"></span>

				<span class="fa fa-database data-marker data-marker__pos1" ng-if="hardBtn.func.type === 0"></span>
				<span class="fa fa-wifi data-marker data-marker__pos1" ng-if="hardBtn.func.type === 1"></span>
			</label>
		</li>
	</ul>


	<pagination class="pagination display-block overflow-hidden" boundary-links="false" items-per-page="1" total-items="4" page="ngModel.currentHardPage"  previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;" on-select-page="hardPageChanged(page)" rotate="false"></pagination>
</div>


