<div class="fluid-container">
  <div class="row">
    <div id="klingon" class="col-sm faction-column">
      <img src="../assets/img/Klingon_Banner.png" class="banner mx-auto d-block"/>
      <p class="points" *ngIf="factionPoints">{{factionPoints.klingon | number}}</p>
      <points [amount]="-1" (changeEvent)="changeKlingonPoints($event)"></points>
      <points [amount]="1" (changeEvent)="changeKlingonPoints($event)"></points>
      <points [amount]="5" (changeEvent)="changeKlingonPoints($event)"></points>
      <img src="../assets/img/Klingon_Crest.png" class="crest mx-auto d-block"/>
    </div>
    <div id="starfleet" class="col-sm faction-column">
      <img src="../assets/img/Starfleet_Banner.png" class="banner mx-auto d-block"/>
      <p class="points" *ngIf="factionPoints">{{factionPoints.starfleet | number}}</p>
      <points [amount]="-1" (changeEvent)="changeStarfleetPoints($event)"></points>
      <points [amount]="1" (changeEvent)="changeStarfleetPoints($event)"></points>
      <points [amount]="5" (changeEvent)="changeStarfleetPoints($event)"></points>
      <img src="../assets/img/Starfleet_Crest.png" class="crest mx-auto d-block"/>
    </div>
    <div id="romulan" class="col-sm faction-column">
      <img src="../assets/img/Romulan_Banner.png" class="banner mx-auto d-block"/>
      <p class="points" *ngIf="factionPoints">{{factionPoints.romulan | number}}</p>
      <points [amount]="-1" (changeEvent)="changeRomulanPoints($event)"></points>
      <points [amount]="1" (changeEvent)="changeRomulanPoints($event)"></points>
      <points [amount]="5" (changeEvent)="changeRomulanPoints($event)"></points>
      <img src="../assets/img/Romulan_Crest.png" class="crest mx-auto d-block"/>
    </div>
  </div>
  <!-- <button (click)="resetPoints()">Reset</button> -->
</div>
