@if (account) {
  <div class="root">
    <div class="margin-content account-info d-md-grid d-block">
      <div class="account-avatar-row">
        <my-actor-avatar [size]="getAccountAvatarSize()" actorType="account" [actor]="account"></my-actor-avatar>

        <div>
          <div class="section-label" i18n>ACCOUNT</div>

          <div class="actor-info">
            <div>
              <div class="actor-display-name align-items-center">
                <h1>{{ account.displayName }}</h1>

                <my-user-moderation-dropdown
                  class="mx-3"
                  [prependActions]="prependModerationActions"
                  buttonSize="small"
                  [account]="account"
                  [user]="accountUser"
                  placement="bottom-left auto"
                  (userChanged)="onUserChanged()"
                  (userDeleted)="onUserDeleted()"
                ></my-user-moderation-dropdown>

                @if (accountUser?.blocked) {
                  <span tabindex="0" [ngbTooltip]="accountUser.blockedReason" class="pt-badge badge-danger" i18n>Banned</span>
                }

                <my-account-block-badges [account]="account"></my-account-block-badges>
              </div>

              <div class="actor-handle">
                <span>&#64;{{ account.nameWithHost }}</span>

                <my-copy-button
                  [value]="account.nameWithHostForced"
                  i18n-notification
                  notification="Username copied"
                  title="Copy account handle"
                  i18n-title
                ></my-copy-button>
              </div>

              <div class="actor-counters">
                <span i18n>
                  {naiveAggregatedSubscribers(), plural, =0 {No subscribers} =1 {1 subscriber} other {{{ naiveAggregatedSubscribers () }} subscribers }}
                </span>

                @if (accountVideosCount !== undefined) {
                  <span class="videos-count" i18n>
                    {accountVideosCount, plural, =0 {No videos} =1 {1 video} other {{{ accountVideosCount }} videos }}
                  </span>
                }
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="description" [ngClass]="{ expanded: accountDescriptionExpanded }">
        <div class="description-html" [innerHTML]="accountDescriptionHTML"></div>
      </div>

      @if (hasShowMoreDescription()) {
        <button
          class="show-more peertube-button-like-link d-md-none d-block"
          (click)="accountDescriptionExpanded = !accountDescriptionExpanded"
          title="Show the complete description"
          i18n-title
          i18n
        >
          Show more...
        </button>
      }
      <div class="buttons">
        @if (isManageable()) {
          <a routerLink="/my-account" class="peertube-button-link primary-button" i18n>Manage account</a>
        }

        @if (hasVideoChannels() && !isManageable()) {
          <my-subscribe-button [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
        }
      </div>
    </div>
    <div class="margin-content horizontal-menu mb-3">
      <ng-template #linkTemplate let-item="item">
        <a [routerLink]="item.routerLink" routerLinkActive="active" class="sub-menu-entry">{{ item.label }}</a>
      </ng-template>

      <my-horizontal-menu [hidden]="hideMenu" [menuEntries]="links"></my-horizontal-menu>

      <my-simple-search-input
        class="ms-auto"
        [initialValue]="search"
        [alwaysShow]="!isInSmallView()"
        (searchChanged)="searchChanged($event)"
        (inputDisplayChanged)="onSearchInputDisplayChanged($event)"
        name="search-videos"
        i18n-iconTitle
        icon-title="Search account videos"
        i18n-placeholder
        placeholder="Search account videos"
      ></my-simple-search-input>
    </div>

    <router-outlet></router-outlet>
  </div>
}

@if (prependModerationActions) {
  <my-account-report #accountReportModal></my-account-report>
}