Acme.HeroShop - app.component.html - 4

app.component.html

<header>
  <div class="navbar navbar-dark bg-dark box-shadow">
    <div class="container d-flex justify-content-between">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <strong>Acme.HeroShop</strong>
      </a>
    </div>
  </div>
</header>

<main role="main">
  <div class="album py-5 bg-light">
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <ul class="list-group">
            <li class="list-group-item">
              <a href="#" (click)="filterHeroes(null)">All</a>
            </li>
            <li class="list-group-item" *ngFor="let heroCompany of heroCompanies">
              <a href="#" (click)="filterHeroes(heroCompany.id)">{{heroCompany.name}}</a>
            </li>
          </ul>
        </div>
        <div class="col-md-9">
          <div class="row">
            <div class="col-md-12">
              <h3 class="mb-3">{{selectedHeroCompany}} Heroes</h3>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4" *ngFor="let hero of displayHeroes">
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" style="height: 225px; width: 100%; display: block;" [src]="'/HeroApp/dist-server/assets/images/heroes/' + hero.name + '.png'">
                <div class="card-body">
                  <p class="card-text">{{hero.name}}</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                      <button type="button" class="btn btn-sm btn-outline-secondary">Like</button>
                      <button type="button" class="btn btn-sm btn-outline-secondary">Buy</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</main>