<div class="margin-content mt-5">

  <div class="subscriptions me-3 mb-3">
    <div class="block-header mb-4 d-flex">
      <div class="flex-grow-1 me-2">
        <h3 i18n>{{ subscriptionsPagination.totalItems }} {subscriptionsPagination.totalItems, plural, =1 {subscription} other {subscriptions}}</h3>

        <div i18n class="text-content">
          This is content to which we have subscribed. This allows us to display their videos directly on {{ instanceName }}.
        </div>
      </div>

      <my-subscription-image></my-subscription-image>
    </div>

    <div class="follows">
      @if (subscriptionsPagination.totalItems === 0) {
        <div i18n class="no-results">{{ instanceName }} does not have subscriptions.</div>
      }

      @for (subscription of subscriptions; track subscription) {
        <div class="follow-block">
          <my-actor-avatar [actor]="subscription" actorType="instance" size="32"></my-actor-avatar>
          <div class="ellipsis">
            <a class="follow-name" [href]="subscription.url" target="_blank" rel="noopener noreferrer">{{ subscription.name }}</a>
          </div>
        </div>
      }

    </div>

    <div class="text-center">
      @if (canLoadMoreSubscriptions()) {
        <my-button class="mt-3 mx-auto" (click)="loadMoreSubscriptions()" theme="secondary" i18n>Show more subscriptions</my-button>
      }
    </div>

    @if (serverStats) {
      <div class="stats mt-4">
        <h4 i18n>Our network in figures</h4>

        <div myPluginSelector pluginSelectorId="about-instance-network-statistics">
          <div class="stat">
            <strong>{{ serverStats.totalVideos | number }}</strong>
            <a routerLink="/videos/browse" [queryParams]="{ scope: 'federated' }" i18n>total videos</a>
            <my-global-icon iconName="videos"></my-global-icon>
          </div>

          <div class="stat">
            <strong>{{ serverStats.totalVideoComments | number }}</strong>
            <div i18n>total comments</div>
            <my-global-icon iconName="message-circle"></my-global-icon>
          </div>
        </div>
      </div>
    }
  </div>

  <div class="followers">
    <div class="block-header mb-4 d-flex">
      <div class="flex-grow-1 me-2">
        <h3 i18n>{{ followersPagination.totalItems }} {followersPagination.totalItems, plural, =1 {follower} other {followers}}</h3>

        <div i18n class="text-content">
          Our subscribers automatically display videos of {{ instanceName }} on their platforms.
        </div>
      </div>

      <my-follower-image></my-follower-image>
    </div>

    <div class="follows">
      @if (followersPagination.totalItems === 0) {
        <div i18n class="no-results">{{ instanceName }} does not have followers.</div>
      }

      @for (follower of followers; track follower) {
        <div class="follow-block">
          <my-actor-avatar [actor]="follower" actorType="instance" size="32"></my-actor-avatar>

          <div class="ellipsis">
            <a class="follow-name" [href]="follower.url" target="_blank" rel="noopener noreferrer">{{ follower.name }}</a>
          </div>
        </div>
      }

      <div class="text-center">
        @if (canLoadMoreFollowers()) {
          <my-button class="mt-3 mx-auto" (click)="loadMoreFollowers()" theme="secondary" i18n>Show more followers</my-button>
        }
      </div>
    </div>
  </div>
</div>
