<div class="pdfHeader">
  <img class="headerProfPic" src= {{profUrl}}  (error)="onError($event, userName)">
  <div class="feed-ownerName" [innerHTML]= "userName"></div>
  <div class="selectAllFiles">
  	  <span class="select-all-txt">Select All</span>
      <mat-slide-toggle class="select-all-toggle"
      	  [checked] = " selectedPages  == totalPages "	
          (change)="selectAll($event)" >
      </mat-slide-toggle>
      <div class="totalSelectedPages"> Selected Pages ( {{selectedPages}}/{{totalPages}} ) </div>
  </div>
</div>

<div class=" small-12 medium-12 large-12 column cardDetails">
     <div class=" small-12 medium-4 large-3 column cardPage" *ngFor="let page of pages" style="display:inline-block;margin-top: 8px;" >
         <div class="card">
             <div 
                 class="layer"
                 (click)="onPageSelect($event)"
                 [attr.data-page-identity]="page.identity" >
             </div>
             <img 
                 src="!0!"
                 style="display:none;"
                 (error)="loadHTMLPage($event)"
                 [attr.data-page-url]="page.url"
                 [attr.data-page-identity]="page.identity"/>
             <iframe class="webPageWrapper"></iframe>
         </div>
         <div style="width: 100%;padding-right: 8px;padding-left: 8px;height: 35px;">
			<div [ngClass]="page.isSelected ? 'pageNameChecked' : 'pageName'">
	             <span style="vertical-align: top;color: white;font-size: 15px;">
		               Page {{ page.identity }}
	             </span>
             </div>
             <div style="width: 14px;display: inline-block;vertical-align: top;">
	             <span *ngIf="page.isSelected">
		               	<i class="material-icons checkIcons">check_circle</i>
		         </span>
	         </div>
	         <div style="width: 86px; display: inline-block; float: right;">
		          <span *ngIf="page.isSelected" (click)="onImportantClicked(page.identity)" style="color: white;cursor: pointer;font-size: 15px;" > Important
<!-- 	                   <b [style.color]="page.isImportant ? 'red' : 'white'" style="position: relative;top: 3px;">*</b>  -->
						<i class="material-icons" [style.color]="page.isImportant ? '#ff720d' : 'white'" style="position: relative;top: 3px;font-size: 15px;width: 12px;">star_rate</i>
	              </span> 
             </div>  
         </div>
     </div>
</div>
    
