@vendasta/store/header-container/header-container.component.html

<div class="header-container">
    <div class="product-overview">
      <div class="product-id">

        <va-icon [iconUrl]="iconUrl" [name]="title" [diameter]="120"></va-icon>

        <div class="product-id-text">

          <h1 [ngClass]="{'stencil-title stencil-shimmer': !title, 'product-title': title}">
            {{ title }}
          </h1>

          <span [ngClass]="{'stencil-tagline stencil-shimmer': !title && !tagline, 'tagline': tagline}">
            {{ tagline }}
          </span>

          <div *ngIf="prerequisite" class="prerequisite">
            <span class="requires-text">Requires </span>
            <span>{{ prerequisite }}</span>
          </div>

          <mat-chip-list>
            <mat-chip *ngFor="let chip of chipLabels">{{ chip }}</mat-chip>
          </mat-chip-list>

        </div>
      </div>

      <div class="pricing">

        <button *ngIf="showAction" mat-raised-button class="app-enable-button" [disabled]="!actionEnabled" (click)="onActionSelected()">
          {{ actionLabel }}
        </button>

        <div *ngIf="prerequisiteLabel" class="addon-enable" (click)="onPrerequisiteSelected()">
          Enabled with {{prerequisiteLabel}}
        </div>

        <div *ngIf="showPricing" class="price-box">
          <div *ngIf="pricing?.prices?.length" class="wholesale-price">{{ pricingLabel }}
              <div *ngIf="showPricingModel(billedProduct) && hasVerifiedContract"
                   class="pricing-model"
                   matTooltip="{{getPricingModelTooltips(billedProduct.billingModel)}}">({{ billedProduct.billingModel }})
              </div>
          </div>
          <va-pricing [pricing]="pricing" [billedProduct]="billedProduct" [hasVerifiedContract]="hasVerifiedContract" [loaded]="loaded"></va-pricing>
        </div>

        <p *ngIf="pricingActionEnabled" class="pricing-action-container">
          <a (click)="pricingActionSelected.emit()"><mat-icon>local_offer</mat-icon>{{ pricingActionLabel }}</a>
        </p>

      </div>

    </div>
</div>