<div *ngIf="selectedHero">
  <h2>{{ selectedHero.name | uppercase }} Details</h2>
  <div><span>id: </span>{{ selectedHero.id }}</div>
  <div><span>name: </span>{{ selectedHero.name }}</div>
  <div><span>hp: </span>{{ selectedHero.hp }}</div>
  <br />
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="ชื่อ">
    </label>
  </div>
  <div>
    <label>name:
      <input type="number" [(ngModel)]="selectedHero.hp" placeholder="พลัง">
    </label>
  </div>
</div>

<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let h of heroes" [class.selected]="h === selectedHero" (click)="onSelect(h)">
    <span class="badge">{{h.id}}</span>
    {{h.name}} - {{h.hp}}HP
  </li>
</ul>

<app-messages></app-messages>
