autowp/autowp-frontend

<ng-template #popover>
  @if (response$ | async; as response) {
    <div>
      @if ((response.items || []).length > 0) {
        @if (response.brand?.brandicon?.src) {
          <img alt="" [src]="response.brand?.brandicon?.src" style="float: right; margin: 0 0 5px 5px" />
        }
        @for (item of response.items; track item.id) {
          <p [innerHTML]="item.nameHtml"></p>
        }
        <br style="clear: both" />
      }
    </div>
  } @else {
    <div class="spinner-border" role="status"><span class="visually-hidden" i18n>Loading…</span></div>
  }
</ng-template>
 
@if (brand$ | async; as brand) {
  <a
    [routerLink]="['/', brand.catname]"
    class="brandicon"
    [ngClass]="'brandicon-' + cssClass(brand)"
    [ngStyle]="{'background-image': 'url(' + icons()?.image + ')'}"
  ></a>
  <h4>
    <a [routerLink]="['/', brand.catname]" [textContent]="brand.name"></a>
    <small class="badge bg-secondary-subtle text-secondary-emphasis">
      {{ brand.itemsCount - brand.newItemsCount
      }}<span
        *ngIf="brand.newItemsCount > 0"
        [ngbPopover]="popover"
        triggers="mouseenter:mouseleave"
        popoverTitle="New {{ brand.name }} vehicles"
        i18n-popoverTitle
        >+{{ brand.newItemsCount }}</span
      >
    </small>
  </h4>
  <p>
    <small><ng-container i18n>pictures:</ng-container> {{ brand.acceptedPicturesCount }}</small>
  </p>
} @else {
  <div class="spinner-border" role="status"><span class="visually-hidden" i18n>Loading…</span></div>
}