path: root/client/src/app/shared/user-subscription/subscribe-button.component.html

<div class="btn-group-subscribe btn-group"
    [ngClass]="{'subscribe-button': subscribed !== true, 'unsubscribe-button': subscribed === true}">
  <button *ngIf="subscribed === false && isUserLoggedIn()" type="button"
          class="btn btn-sm" role="button"
          (click)="subscribe()" i18n>
    <span>
      Subscribe
    </span>
    <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
      {{ videoChannel.followersCount | myNumberFormatter }}
    </span>
  </button>

  <button
    *ngIf="subscribed === true" type="button"
    class="btn btn-sm" role="button"
    (click)="unsubscribe()" i18n
  >
    Unsubscribe
  </button>

  <div class="btn-group" ngbDropdown autoClose="outside"
       placement="bottom-right" role="group"
       aria-label="Multiple ways to subscribe to the current channel">
    <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle>
      <span *ngIf="!isUserLoggedIn()">
        Subscribe
      </span>
      <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
        {{ videoChannel.followersCount | myNumberFormatter }}
      </span>
    </button>

    <div class="dropdown-menu" ngbDropdownMenu>

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

      <button class="dropdown-item" (click)="subscribe()">
        <span *ngIf="!isUserLoggedIn()" i18n>Subscribe with an account on {{ videoChannel.host }}</span>
        <span *ngIf="isUserLoggedIn()" i18n>Subscribe with your local account</span>
      </button>

      <button class="dropdown-item" i18n>Subscribe with a Mastodon account:</button>
      <my-remote-subscribe showHelp="true" [uri]="channelUri"></my-remote-subscribe>

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

      <h6 class="dropdown-header" i18n>Using a syndication feed</h6>
      <button (click)="rssOpen()" class="dropdown-item" i18n>Subscribe via RSS</button>

    </div>
  </div>
</div>