<div class="notification">
    <div *ngIf="notification.type === 'follow_request' && !followRequestProcessed">
        <div class="stream__notification--icon" title="{{notification.account.acct}}">
            <fa-icon class="followed" [icon]="faUserClock"></fa-icon>
        </div>
        <div class="stream__notification--label">
            <a href class="stream__link" title="{{notification.account.acct}}"
                (click)="openAccount(notification.account)" (auxclick)="openUrl(notification.account.url)"
                innerHTML="{{ notification.account | accountEmoji }}"></a>
            submitted a follow request
        </div>

        <a href (click)="openAccount(notification.account)" (auxclick)="openUrl(notification.account.url)"
            class="follow-account" title="{{notification.account.acct}}">
            <img class="follow-account__avatar" src="{{ notification.account.avatar }}" />
            <span class="follow-account__display-name" innerHTML="{{ notification.account | accountEmoji }}"></span>
            <span class="follow-account__acct">@{{ notification.account.acct }}</span>
        </a>

        <div class="follow_request">
            <a href title="Authorize" class="follow_request__link follow_request__link--check"
                (click)="acceptFollowRequest()">
                <fa-icon class="follow_request__icon" [icon]="faCheck"></fa-icon>
            </a>
            <a href title="Reject" class="follow_request__link follow_request__link--cross"
                (click)="refuseFollowRequest()">
                <fa-icon class="follow_request__icon" [icon]="faTimes"></fa-icon>
            </a>
        </div>
    </div>


    <div *ngIf="notification.type === 'follow'">
        <div class="stream__notification--icon" title="{{notification.account.acct}}">
            <fa-icon class="followed" [icon]="faUserPlus"></fa-icon>
        </div>
        <div class="stream__notification--label">
            <a href class="stream__link" title="{{notification.account.acct}}"
                (click)="openAccount(notification.account)" (auxclick)="openUrl(notification.account.url)"
                innerHTML="{{ notification.account | accountEmoji }}"></a>
            followed
            you!
        </div>

        <a href (click)="openAccount(notification.account)" (auxclick)="openUrl(notification.account.url)"
            class="follow-account" title="{{notification.account.acct}}">
            <img class="follow-account__avatar" src="{{ notification.account.avatar }}" />
            <span class="follow-account__display-name" innerHTML="{{ notification.account | accountEmoji }}"></span>
            <span class="follow-account__acct">@{{ notification.account.acct }}</span>
        </a>
    </div>

    <div *ngIf="notification.type === 'move'">
        <div class="stream__notification--icon" title="{{notification.account.acct}}">
            <fa-icon class="followed" [icon]="faTruckMoving"></fa-icon>
        </div>
        <div class="stream__notification--label">
            <a href class="stream__link" title="{{notification.account.acct}}"
                (click)="openAccount(notification.account)" (auxclick)="openUrl(notification.account.url)"
                innerHTML="{{ notification.account | accountEmoji }}"></a>
            migrated to
        </div>

        <a href (click)="openAccount(notification.target)" (auxclick)="openUrl(notification.target.url)"
            class="follow-account" title="{{notification.target.acct}}">
            <img class="follow-account__avatar" src="{{ notification.target.avatar }}" />
            <span class="follow-account__display-name" innerHTML="{{ notification.target | accountEmoji }}"></span>
            <span class="follow-account__acct">@{{ notification.target.acct }}</span>
        </a>
    </div>

    <app-status *ngIf="notification.status && notification.type === 'update'" class="stream__status"
        [statusWrapper]="notification.status" 
        [notificationAccount]="notification.account"
        [notificationType]="notification.type" 
        [context]="'notifications'"
        (browseAccountEvent)="browseAccount($event)"
        (browseHashtagEvent)="browseHashtag($event)" 
        (browseThreadEvent)="browseThread($event)"></app-status>

    <app-status *ngIf="notification.status && notification.type === 'mention'" class="stream__status"
        [statusWrapper]="notification.status" 
        [context]="'notifications'"
        (browseAccountEvent)="browseAccount($event)"
        (browseHashtagEvent)="browseHashtag($event)" 
        (browseThreadEvent)="browseThread($event)"></app-status>

    <app-status *ngIf="notification.status && notification.type !== 'mention' && notification.type !== 'update'"
        class="stream__status" 
        [statusWrapper]="notification.status" 
        [notificationAccount]="notification.account"
        [notificationType]="notification.type" 
        [context]="'notifications'"
        (browseAccountEvent)="browseAccount($event)"
        (browseHashtagEvent)="browseHashtag($event)" 
        (browseThreadEvent)="browseThread($event)"></app-status>

</div>