@if (actor) {
  <div class="actor">
    <div class="position-relative me-3">
      <my-actor-avatar [actor]="actor" [actorType]="actorType()" [previewImage]="previewUrl" size="100"></my-actor-avatar>
      @if (editable()) {
        @if (hasAvatar()) {
          <div ngbDropdown placement="right">
            <button type="button" class="actor-img-edit-button button-file primary-button" i18n-arialLabel aria-label="Change your avatar" ngbDropdownToggle>
              <my-global-icon iconName="edit"></my-global-icon>
            </button>
            <div ngbDropdownMenu>
              <div class="dropdown-item dropdown-file button-focus-within" [ngbTooltip]="avatarFormat">
                <my-global-icon iconName="upload"></my-global-icon>
                <label for="avatarfile" i18n>Upload a new avatar</label>
                <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/>
              </div>
              <button type="button" class="dropdown-item" (click)="deleteAvatar()" (key.enter)="deleteAvatar()">
                <my-global-icon iconName="delete"></my-global-icon>
                <span i18n>Remove avatar</span>
              </button>
            </div>
          </div>
        } @else {
          <div class="actor-img-edit-button button-file primary-button button-focus-within" [ngbTooltip]="avatarFormat" placement="right" container="body">
            <my-global-icon iconName="upload"></my-global-icon>
            <label class="visually-hidden" for="avatarfile" i18n>Upload a new avatar</label>
            <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/>
          </div>
        }
      }
    </div>
    <div class="actor-info">
      @if (displayName()) {
        <div class="actor-info-display-name">{{ displayName() }}</div>
      }
      @if (displayUsername() && username()) {
        <div class="actor-info-username">{{ username() }}</div>
      }
      @if (subscribers()) {
        <div i18n class="actor-info-followers">{{ subscribers() }} subscribers</div>
      }
    </div>
  </div>
}