<div layout="row" class="wrap-top-gap">
	<div flex="90" layout="column">
		<filter-bar selected-rows-key="selectedRows" list-keys="listIds" list="lists" full-list="fullList" search-by="pixel_name" type-by="pixel_type" search-placeholder="Search pixels..."></filter-bar>
	</div>
	<div flex="10" layout="column" layout-align="center end" ng-if="dataLoadComplete == true">
	    <flat-button-directive url='#/pixel-setup' title='Pixel' type='add'  ></flat-button-directive>
	</div>
</div>


<div layout = "row" layout-align="center" md-whiteframe="3" layout-padding layout-margin  style="background: white">
    <md-content flex class="list-tab-wraper">
        <div layout = "row" layout-align="start center">
            <div flex="5" flex-md="5" class=""></div>
            <div flex="5" flex-md="5" class="right-padding-20 small-width-table text-align-right"><b>#</b></div>
            <div flex="15" class="right-padding-20"><b>Pixel Name</b></div>
            <div flex="10" class="right-padding-20"><b>Type</b></div>
            <div flex="10" class="right-padding-20"><b>Triggers</b></div>
            <div flex="10" class="right-padding-20"><b>Network</b></div>
            <div flex="10" class="right-padding-20"><b>Affiliate</b></div>
<!--            <div flex="10" class="right-padding-20"><b>Sub-Affiliate</b></div>-->
            <div flex="10" class="right-padding-20"><b>Device</b></div>
            <div flex class="right-padding-20"><b>Last Edited</b></div>
            <div flex="5" class="text-right-align right-padding-10"></div>
        </div>
        <md-divider></md-divider>
        <div ng-click="editPixel(data.id)" layout = "row" layout-align="end center" ng-repeat-start="data in lists" class="list-repeated-item">
            <div ng-click="$event.stopPropagation();"  flex="5" flex-md="10" class="right-padding-20 text-align-right small-width-table">
            	<md-checkbox ng-checked="exists(data.id)" ng-click="toggle(data.id)" aria-label="Checkbox 1"></md-checkbox>
            </div>
            <div flex="5" flex-md="10" class="right-padding-20 text-align-right small-width-table">
            	{{data.id}}
            </div>
            <div flex="15" class="right-padding-20">
            	<span class="setting-link">
            		{{data.pixel_name}}
				</span>
			</div>
            <div flex="10" class="right-padding-20">{{data.pixel_type}}</div>
            <div flex="10" class="right-padding-20 word-limits">
            	<span ng-if="data.enable_page">
					<span ng-if="data.page.length"> {{ data.page }} </span>
					<span ng-if="!data.page.length"> All </span>
                </span>
            	<span ng-if="!data.enable_page">
                    <i class="material-icons gray-dott">fiber_manual_record</i>
                </span>
            </div>
            <div flex="10" class="right-padding-20 word-limits">
            	<span ng-if="data.network_id_value">
                    {{data.network_id_value}}
                </span>
            	<span ng-if="!data.network_id_value">
                    <i class="material-icons gray-dott">fiber_manual_record</i>
                </span>
        	</div>
            <div flex="10" class="right-padding-20 word-limits">
            	<span ng-if="data.affiliate_id_value">
                    {{data.affiliate_id_value}}
                </span>
            	<span ng-if="!data.affiliate_id_value">
                    <i class="material-icons gray-dott">fiber_manual_record</i>
                </span>
        	</div>
            <div flex="10" class="right-padding-20 word-limits">
            	<span ng-if="data.device.length">
            		{{getDevices(data.device);}}
            	</span>
            	<span ng-if="!data.device.length">
                    <i class="material-icons gray-dott">fiber_manual_record</i>
                </span>
        	</div>
            <div flex class="right-padding-20">{{data.last_edited}}</div>
            <div flex="5" class="text-right-align right-padding-20">
                <md-menu>
                    <md-button aria-label="Open demo menu" class="md-icon-button"
                             ng-click="$mdOpenMenu($event)">
                    	<i class="material-icons">more_vert</i>
                    </md-button>
                    <md-menu-content>
	                  	<md-menu-item>
	                    	<md-button ng-click="editPixel(data.id)">
	                      		<span md-menu-align-target>Edit</span>
	                      	</md-button>
	                    </md-menu-item>

	                    <md-menu-item ng-repeat="action in filterActions">
	                      	<md-button ng-click="this[action.method](data.id)">
	                      		<span md-menu-align-target>{{action.val}}</span>
	                      	</md-button>
	                    </md-menu-item>
                    </md-menu-content>
                </md-menu>
            </div>
        </div>
        <md-divider ng-repeat-end ng-show='{{$last ? false : true}}'></md-divider>
        <div layout = "row" layout-padding ng-show="!lists.length" class="no-data-text">
            <div flex layout="row" layout-align="center center"><no-data-text></no-data-text></div>
        </div>
    </md-content>
</div>
