<ng-container *ngIf="!expandedArticle">
  <h1>Artikelliste</h1>
  <ui-slider [scrollDistance]="210">
    <div class="article" *ngFor="let article of articles$ | async">
      <img [src]="article?.ean | productImage: 190:310:true" alt="product-image" />
      <h2>{{ article?.ean }}</h2>
      <p>
        {{ article?.text | trim: 50 }}
        <button (click)="expandedArticle = article" *ngIf="article?.text?.length > 53" class="btn-cta-more" type="button">
          Mehr <ui-icon icon="arrow" size="16px"></ui-icon>
        </button>
      </p>
    </div>
  </ui-slider>
  <div class="actions">
    <button (click)="print()" class="btn-cta-secondary">
      Drucken
    </button>
    <button (click)="eanCopy()" class="btn-cta-secondary">
      EAN-Liste kopieren
    </button>
    <button (click)="articleSearch()" class="btn-cta">
      Liste in Artikelsuche anzeigen
    </button>
  </div>
</ng-container>
<ng-container *ngIf="!!expandedArticle">
  <page-article-list-details (closeDetails)="expandedArticle = undefined" [article]="expandedArticle"></page-article-list-details>
</ng-container>
