import { Component, AfterViewInit } from '@angular/core';
import { TdMediaService } from '@covalent/core';


const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

@Component({
  selector: 'pack-list',
  templateUrl: 'src/app/pack.list.component.html'
})

  /*`
   <h2>My Heroes</h2>
    <ul class="heroes">
    <li *ngFor="let hero of heroes"
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
    </ul>
<div *ngIf="selectedHero">
  <my-hero-detail [hero]="selectedHero"></my-hero-detail>
</div>

    `*/

export class PackListComponent implements AfterViewInit {
  routes: Object[] = [
      {
        title: 'Dashboard',
        route: '/',
        icon: 'dashboard',
      }, {
        title: 'Product Dashboard',
        route: '/',
        icon: 'view_quilt',
      }, {
        title: 'Product Logs',
        route: '/',
        icon: 'receipt',
      }, {
        title: 'Manage Users',
        route: '/',
        icon: 'people',
      }, {
        title: 'Covalent Templates',
        route: '/',
        icon: 'view_module',
      },
    ];

  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero: Hero;
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor(public media: TdMediaService) {
                
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

  ngAfterViewInit(): void {
      this.media.broadcast();
  }
}