@let currentPublisherValue = currentPublisher();
@let nextPublisherValue = nextPublisher();

@if (currentPublisherValue) {
  <div class="publisher-wrapper">
    <div class="publisher-flipper" [class.is-flipped]="isFlipped()">
      <div class="publisher-side publisher-front">
        <div class="publisher-img-container d-inline-flex align-items-center me-2 position-relative">
          <app-image [imageUrl]="imageService.getPublisherImage(currentPublisherValue.name)"
            [classes]="'me-2'"
            [hideOnError]="true"
            width="32px"
            height="32px"
            aria-hidden="true" />
          <div class="position-relative d-inline-block"
               (click)="openPublisher(currentPublisher()!.id)">
            {{currentPublisherValue.name}}
          </div>
        </div>
      </div>
      @if (nextPublisherValue) {
        <div class="publisher-side publisher-back">
          <div class="publisher-img-container d-inline-flex align-items-center me-2 position-relative">
            <app-image [imageUrl]="imageService.getPublisherImage(nextPublisherValue.name)"
                       [classes]="'me-2'"
                       [hideOnError]="true"
                       width="32px"
                       height="32px"
                       aria-hidden="true" />
            <div class="position-relative d-inline-block" (click)="openPublisher(nextPublisherValue.id)">
              {{nextPublisherValue.name}}
            </div>
          </div>
        </div>
      }
    </div>
  </div>
}