Chocobozzz/PeerTube

<div
  class="btn-group" role="group"
  [ngClass]="{ 'big': isBigButton }"
  ngbDropdown="dropdown" autoClose="outside" placement="bottom-right bottom-left bottom auto"
  role="group" aria-label="Multiple ways to subscribe to the current channel" i18n-aria-label
>

  <ng-template #subscribeContent>
    <div class="d-inline-block" [ngClass]="{ 'extra-text': isAtLeastOneChannelSubscribed }">
      @if (isSingleSubscribe) {
        <ng-container i18n>Subscribe</ng-container>
      } @else {
        <div i18n>Subscribe to all channels</div>

        <div class="fs-8 fw-normal lh-1" *ngIf="isAtLeastOneChannelSubscribed" i18n>
          {{ subscribeStatus(true).length }}/{{ subscribed.size }} channels subscribed
        </div>
      }
    </div>
  </ng-template>

  @if (isUserLoggedIn()) {
    @if (isAllChannelsSubscribed) {
      <button type="button" [ngClass]="buttonClasses" class="btn" (click)="unsubscribe()">
        <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
      </button>
    } @else {
      <button type="button" [ngClass]="buttonClasses" class="btn" (click)="subscribe()">
        <ng-template [ngTemplateOutlet]="subscribeContent"></ng-template>
      </button>

      <button type="button" [ngClass]="buttonClasses" class="btn dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-ariaLabel></button>
    }
  } @else {
    <button ngbDropdownToggle [ngClass]="buttonClasses" type="button" class="btn">
      <ng-template [ngTemplateOutlet]="subscribeContent"></ng-template>
    </button>
  }

  <div class="dropdown-menu" ngbDropdownMenu>

    <h6 class="dropdown-header" i18n>Using an ActivityPub account</h6>

    <button type="button" class="dropdown-item" (click)="subscribe()">
      @if (isUserLoggedIn()) {
        <span i18n>Subscribe with your local account</span>
      } @else {
        <span i18n>Subscribe with an account on this instance</span>
      }
    </button>

    <div type="button" *ngIf="isRemoteSubscribeAvailable()" class="dropdown-item dropdown-item-neutral">
      <div class="mb-1" i18n>Subscribe with a remote account:</div>
      <my-remote-subscribe [showHelp]="true" [uri]="uri"></my-remote-subscribe>
    </div>

    <div class="dropdown-divider"></div>

    <h6 class="dropdown-header" i18n>Using a syndication feed</h6>
    <a [href]="rssUri" target="_blank" class="dropdown-item" i18n>Subscribe via RSS</a>

  </div>
</div>