import { bootstrap } from 'angular2/platform/browser';
import { Component } from 'angular2/core';
import {ArticleComponent, Article} from './articleapp'



@Component({
  selector: 'reddit',
  directives: [ArticleComponent],
  template: `
<form class="ui large form segment"> <h3 class="ui header">Add a Link</h3>
<div class="field">
<label for="title">Title:</label> <input name="title" #newtitle>
</div>
<div class="field">
<label for="link">Link:</label>
        <input name="link" #newlink>
      </div>
      <button (click)="addArticle(newtitle, newlink)"
              class="ui positive right floated button">
<div class="ui grid posts">
  <reddit-article *ngFor="#cle of sortedArticles()" [article]="cle">
  </reddit-article>
</div>
` })
class RedditApp {
  articles: Article[];
  constructor() {
    this.articles = [
      new Article('Angular 2', 'http://angula2.io'),
      new Article('Angular 3', 'http://angular3.io'),
      new Article('Angular 4', 'http://angular4.io'),
      new Article('Angular 5', 'http://angular5.io'),
      new Article('Angular 6', 'http://angula6r.io')
    ];
  }
  addArticle(title: HTMLInputElement, link: HTMLInputElement): void {
    console.log(`Adding article title: ${title.value} and link: ${link.value}`);
    this.articles.push(new Article(title.value, link.value));
    title.value = '';
    link.value = '';
  }

  sortedArticles(): Article[] {
    return this.articles.sort((a: Article, b: Article) => b.votes - a.votes);
  }
}


bootstrap(RedditApp);
Submit link
      </button>
    </form>