//START IMPORT
// import does not work in Codepen
// using const instead
const {Component} = ng.core;
const {bootstrap} = ng.platform.browser;
//END IMPORT

// START Components
// Please note: as we are not exporting/importing but everything is in a single file, we need to:
// inline the templates as strings, and
// list the components so that any subcomponents come before the component using them (i.e. app is last).

class DataItem {
  id: number;
  name: string;
  webpage: string;

  constructor(id, name, webpage){
    this.id = id;
    this.name = name;
    this.webpage = webpage;
  }
}

var DATAITEMS: DataItem[] = [
  {
      "id": 1, 
      "name": "DevU",
      "webpage": "https://www.devu.com/"
  },
  {
      "id": 2, 
      "name": "Stack Overflow",
      "webpage": "http://stackoverflow.com/"
  },
  {
      "id": 3,
      "name": "W3Schools",
      "webpage": "http://www.w3schools.com/"
  },
  {
      "id": 4,
      "name": "FreeCodeCamp",
      "webpage": "https://www.freecodecamp.com/",
  },
  {
      "id": 5,
      "name": "Pluralsight",
      "webpage": "https://www.pluralsight.com/"
  }
  ];

@Component({
    selector: 'my-app',
    template: `
        <h1>Whitney\'s List of Helpful Websites</h1>
        <h2>(An Angular 2 App)</h2><hr /><br />
        <ul class="list">
        <li *ngFor="#dataItem of dataItems">
            <span class="badge">{{dataItem.id}}</span>
            <a href="{{dataItem.webpage}}">{{dataItem.name}}</a>
        </li> 
        </ul>
        `
})
class AppComponent {
  dataItems = DATAITEMS;
}

//BOOT ANGULAR
bootstrap(AppComponent);