import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';

<% if (directory) { %>
import { fuseAnimations } from '../../../../../../core/animations';
import { FuseUtils } from '../../../../../../core/fuseUtils';
<% } else { %>
import { fuseAnimations } from '../../../../../core/animations';
import { FuseUtils } from '../../../../../core/fuseUtils';
<% } %>

import { <%= Pages %>Service } from '../<%= pages %>.service';
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'fuse-<%= page %>-list',
  templateUrl: './<%= page %>-list.component.html',
  styleUrls: ['./<%= page %>-list.component.scss'],
  animations : fuseAnimations
})
export class <%= Page %>ListComponent implements OnInit {

  <%= pages %>: any;
  selected: any;
  dataSource: FilesDataSource | null;
  displayedColumns = [
   <% for(var i=0; i<tableCols.length; i++) { %>'<%= tableCols[i] %>'<%= i+1 != tableCols.length ? ', ' : '' %><% } %>  
  ];

  constructor(private <%= pages %>Service: <%= Pages %>Service) { 
    this.<%= pages %>Service.on<%= Page %>Changed.subscribe(<%= pages %> => {
      this.<%= pages %> = <%= pages %>;
    });
    this.<%= pages %>Service.on<%= Page %>Selected.subscribe(selected => {
      this.selected = selected;
    });    
  }
      
  ngOnInit() {
    this.dataSource = new FilesDataSource(this.<%= pages %>Service);
  }
  
  onSelect(selected) {
    this.<%= pages %>Service.on<%= Page %>Selected.next(selected);
  }  
}

export class FilesDataSource extends DataSource<any> {
  constructor(private <%= pages %>Service: <%= Pages %>Service) {
    super();
  }

  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable<any[]> {
    return this.<%= pages %>Service.on<%= Page %>Changed;
  }

  disconnect() {
  }
}