status.component.html

<div *ngIf="!hideStatus" class="status-wrapper" [class.direct-message]="isDirectMessage" [class.status-selected]="isSelected">
    <div class="reblog" *ngIf="reblog">
        <a class="reblog__profile-link" href title="{{ status.account.acct }}" 
            (click)="openAccount(status.account)"
            (auxclick)="openUrl(status.account.url)"><span innerHTML="{{ status.account | accountEmoji }}"></span> <img *ngIf="reblog" class="reblog__avatar" src="{{ getAvatar(status.account) | ensureHttps }}" /></a> boosted
    </div>
    <div *ngIf="statusWrapper.status.pinned && !notificationType" class="pinned">
        <div class="notification--icon">
            <fa-icon class="pinned__icon" [icon]="faThumbtack"></fa-icon>
        </div>
        <div class="notification--label pinned__label">
            Pinned
        </div>
    </div>
    <div *ngIf="notificationType === 'favourite'">
        <div class="notification--icon">
            <fa-icon class="favorite" [icon]="faStar"></fa-icon>
        </div>
        <div class="notification--label">
            <a href class="notification--link" title="{{ notificationAccount.acct }}" 
                (click)="openAccount(notificationAccount)"
                (auxclick)="openUrl(notificationAccount.url)" innerHTML="{{ notificationAccount  | accountEmoji }}"></a>
            favorited your status
        </div>
    </div>
    <div *ngIf="notificationType === 'reblog'">
        <div class="notification--icon">
            <fa-icon class="boost" [icon]="faRetweet"></fa-icon>
        </div>
        <div class="notification--label">
            <a href class="notification--link" title="{{ notificationAccount.acct }}" 
                (click)="openAccount(notificationAccount)"
                (auxclick)="openUrl(notificationAccount.url)" innerHTML="{{ notificationAccount | accountEmoji }}"></a>
            boosted your status
        </div>
    </div>
    <div *ngIf="notificationType === 'update'">
        <div class="notification--icon">
            <fa-icon class="update" [icon]="faEdit"></fa-icon>
        </div>
        <div class="notification--label">
            <a href class="notification--link" title="{{ notificationAccount.acct }}" 
                (click)="openAccount(notificationAccount)"
                (auxclick)="openUrl(notificationAccount.url)" innerHTML="{{ notificationAccount | accountEmoji }}"></a>
            edited the status you boosted
        </div>
    </div>
    <div *ngIf="notificationType === 'poll'">
        <div class="notification--icon">
            <fa-icon class="boost" [icon]="faList"></fa-icon>
        </div>
        <div class="notification--label">
            A poll you have voted in has ended
        </div>
    </div>
    <div class="status">
        <a href class="status__navigation" title="open status" (click)="textSelected()">

        </a>
        <div [ngClass]="{'notification--status': notificationAccount }">
            <a href class="status__profile-link" title="{{displayedStatus.account.acct}}"
                (click)="openAccount(displayedStatus.account)" (auxclick)="openUrl(displayedStatus.account.url)">
                <img [class.status__avatar--boosted]="reblog || notificationAccount" class="status__avatar" src="{{ getAvatar(displayedStatus.account) | ensureHttps }}" />
                <!-- <img *ngIf="reblog" class="status__avatar--reblog" src="{{ status.account.avatar }}" /> -->
                <img *ngIf="notificationAccount" class="notification--avatar" src="{{ getAvatar(notificationAccount) | ensureHttps }}" />
                <span class="status__name">
                    <span class="status__name--displayname"
                        innerHTML="{{displayedStatus.account | accountEmoji}}"></span><span
                        class="status__name--username">{{displayedStatus.account.acct}}</span>
                </span>
            </a>
            <div class="status__created-at" title="{{ displayedStatus.created_at | date: 'full' }}">
                <a href class="status__created-at--link" (click)="textSelected()"
                    (auxclick)="openUrl(displayedStatus.url)">
                    {{ displayedStatus.created_at | timeAgo | async }}
                </a>
            </div>
            <div class="status__labels">
                <div class="status__labels--label status__labels--bot" title="bot" *ngIf="displayedStatus.account.bot">
                    bot
                </div>
                <div class="status__labels--label status__labels--xpost" title="this status was cross-posted"
                    *ngIf="isCrossPoster">
                    x-post
                </div>
                <div class="status__labels--label status__labels--thread" title="thread" *ngIf="isThread">
                    thread
                </div>
                <div class="status__labels--label status__labels--discuss" title="this status has a discussion"
                    *ngIf="hasReply">
                    replies
                </div>
                <div class="status__labels--label status__labels--old" title="this status is old" *ngIf="isOld && !statusWrapper.status.pinned">
                    old
                </div>
                <div class="status__labels--label status__labels--remote" title="this status isn't federated with this instance" *ngIf="isRemote">
                    remote
                </div>
                <div class="status__labels--label status__labels--edited" title="this status was edited" *ngIf="statusWrapper.status.edited_at">
                    edited
                </div>
            </div>


            <!-- <div #content class="status__content" innerHTML="{{displayedStatus.content}}"></div> -->

            <a href class="status__content-warning" *ngIf="isContentWarned" title="show content"
                (click)="removeContentWarning()">
                <span class="status__content-warning--title">sensitive content</span>
                <span innerHTML="{{ contentWarningText }}"></span>
            </a>

            <div class="status__content-warning__closed" *ngIf="!isContentWarned && contentWarningText" title="content warning">
                <span innerHTML="{{ contentWarningText }}"></span>
            </div>

            <app-databinded-text #databindedtext class="status__content" *ngIf="!isContentWarned" [text]="statusContent" [selected]="isSelected"
                (accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"
                (textSelected)="textSelected()"></app-databinded-text>

            <app-status-translate [status]="displayedStatusWrapper" (translation)="onTranslation($event)"></app-status-translate>

            <app-poll class="status__poll" *ngIf="!isContentWarned && displayedStatus.poll"
                [poll]="displayedStatus.poll" [statusWrapper]="displayedStatusWrapper"></app-poll>

            <app-card class="status__card" *ngIf="!isContentWarned && displayedStatus.card && !hasAttachments"
                [card]="displayedStatus.card"></app-card>

            <app-attachements *ngIf="!isContentWarned && hasAttachments" class="attachments"
                [attachments]="displayedStatus.media_attachments">
            </app-attachements>

            <app-quote *ngIf="!isContentWarned && displayedStatus.quote" 
                [quote]="displayedStatus.quote"
                [accountInfo]="displayedStatusWrapper.provider"
                (browseAccountEvent)="accountSelected($event)" 
                (browseHashtagEvent)="hashtagSelected($event)"
                (browseThreadEvent)="browseThread($event)"></app-quote>

            <app-action-bar #appActionBar [statusWrapper]="displayedStatusWrapper"
                (browseThreadEvent)="browseThread($event)" (cwIsActiveEvent)="changeCw($event)"
                (replyEvent)="openReply()"></app-action-bar>
        </div>        
        <app-create-status *ngIf="replyingToStatus" [statusReplyingToWrapper]="displayedStatusWrapper"
            (onClose)="closeReply()">
        </app-create-status>
    </div>
</div>