<div class="fluid-container">
  <div class="row">
    <div id="gryffindor" class="col-sm house-column">
      <img src="../assets/img/Gryffindor_Banner.png" class="banner mx-auto d-block"/>
      <p class="points" *ngIf="housePoints">{{housePoints.gryffindor | number}}</p>
      <points [amount]="-5" (changeEvent)="changeGryffindorPoints($event)"></points>
      <points [amount]="10" (changeEvent)="changeGryffindorPoints($event)"></points>
      <points [amount]="50" (changeEvent)="changeGryffindorPoints($event)"></points>
      <img src="../assets/img/Gryffindor_Crest.png" class="crest mx-auto d-block"/>
    </div>
    <div id="ravenclaw" class="col-sm house-column">
      <img src="../assets/img/Ravenclaw_Banner.png" class="banner mx-auto d-block"/>
      <p class="points" *ngIf="housePoints">{{housePoints.ravenclaw | number}}</p>
      <points [amount]="-5" (changeEvent)="changeRavenclawPoints($event)"></points>
      <points [amount]="10" (changeEvent)="changeRavenclawPoints($event)"></points>
      <points [amount]="50" (changeEvent)="changeRavenclawPoints($event)"></points>
      <img src="../assets/img/Ravenclaw_Crest.png" class="crest mx-auto d-block"/>
    </div>
    <div id="hufflepuff" class="col-sm house-column">
      <img src="../assets/img/Hufflepuff_Banner.png" class="banner mx-auto d-block"/>
      <p class="points" *ngIf="housePoints">{{housePoints.hufflepuff | number}}</p>
      <points [amount]="-5" (changeEvent)="changeHufflepuffPoints($event)"></points>
      <points [amount]="10" (changeEvent)="changeHufflepuffPoints($event)"></points>
      <points [amount]="50" (changeEvent)="changeHufflepuffPoints($event)"></points>
      <img src="../assets/img/Hufflepuff_Crest.png" class="crest mx-auto d-block"/>
    </div>
    <div id="slytherin" class="col-sm house-column">
      <img src="../assets/img/Slytherin_Banner.png" class="banner mx-auto d-block"/>
      <p class="points" *ngIf="housePoints">{{housePoints.slytherin | number}}</p>
      <points [amount]="-5" (changeEvent)="changeSlytherinPoints($event)"></points>
      <points [amount]="10" (changeEvent)="changeSlytherinPoints($event)"></points>
      <points [amount]="50" (changeEvent)="changeSlytherinPoints($event)"></points>
      <img src="../assets/img/Slytherin_Crest.png" class="crest mx-auto d-block"/>
    </div>
  </div>
  <!-- <button (click)="resetPoints()">Reset</button> -->
</div>
