Sengi-Windows-MacOS-Linux/src/app/components/create-status/create-status.component.html

<form class="status-form" (ngSubmit)="onSubmit()">
    <input [(ngModel)]="title" type="text" class="form-control form-control-sm status-editor__title" name="title"
        autocomplete="off" placeholder="Title, Content Warning (optional)" title="title, content warning (optional)" />

    <textarea #reply [(ngModel)]="status" name="status"
        class="form-control form-control-sm status-form__status status-editor__content" rows="5" required
        title="content" placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"
        (keydown)="handleKeyDown($event)"
        (blur)="statusTextEditorLostFocus()"></textarea> <!-- flexcroll  (keyup)="autoGrow($event)" -->

    <app-autosuggest class="status-editor__autosuggest" *ngIf="autosuggestData" 
        [pattern]="autosuggestData"
        [autoSuggestUserActionsStream]="autoSuggestUserActionsStream"
        (suggestionSelectedEvent)="suggestionSelected($event)" (hasSuggestionsEvent)="suggestionsChanged($event)">
    </app-autosuggest>

    <div class="status-editor__footer">
        <button type="submit" title="reply" class="status-editor__footer--send-button" *ngIf="statusReplyingToWrapper">
            <span *ngIf="!isSending">REPLY!</span>
            <app-waiting-animation class="waiting-icon" *ngIf="isSending"></app-waiting-animation>
        </button>
        <button type="submit" title="post" class="status-editor__footer--send-button" *ngIf="!statusReplyingToWrapper">
            <span *ngIf="!isSending">POST!</span>
            <app-waiting-animation class="waiting-icon" *ngIf="isSending"></app-waiting-animation>
        </button>
        <div class="status-editor__footer__counter">
            <div class="status-editor__footer__counter--posts" title="number of statuses">
                {{postCounts - 1}}/{{postCounts}}</div>
            <div class="status-editor__footer__counter--count" title="chars left">{{charCountLeft}}</div>
        </div>

        <a href class="status-editor__footer--link" title="add media" (click)="addMedia()">
            <fa-icon [icon]="faPaperclip"></fa-icon>
        </a>
        <input #fileInput type="file" id="file" style="display: none;" (change)="handleFileInput($event.target.files)">

        <a href class="status-editor__footer--link" title="{{ selectedPrivacy }}" (click)="onContextMenu($event)">
            <fa-icon [icon]="faGlobeAmericas" *ngIf="selectedPrivacy === 'Public'"></fa-icon>
            <fa-icon [icon]="faLockOpen" *ngIf="selectedPrivacy === 'Unlisted'"></fa-icon>
            <fa-icon [icon]="faLock" *ngIf="selectedPrivacy === 'Follows-only'"></fa-icon>
            <fa-icon [icon]="faEnvelope" *ngIf="selectedPrivacy === 'DM'"></fa-icon>
        </a>
    </div>

    <div class="status-form__mention-error" *ngIf="mentionTooFarAwayError">Error: mentions must be placed closer to the
        start in order to use multiposting.</div>

    <context-menu #contextMenu>
        <ng-template contextMenuItem
            (execute)="changePrivacy('Public')">
            <fa-icon [icon]="faGlobeAmericas" class="context-menu-icon"></fa-icon> Public
        </ng-template>
        <ng-template contextMenuItem
            (execute)="changePrivacy('Unlisted')">
            <fa-icon [icon]="faLockOpen" class="context-menu-icon"></fa-icon> Unlisted
        </ng-template>
        <ng-template contextMenuItem
            (execute)="changePrivacy('Follows-only')">
            <fa-icon [icon]="faLock" class="context-menu-icon"></fa-icon> Followers-only
        </ng-template>
        <ng-template contextMenuItem
            (execute)="changePrivacy('DM')">
            <fa-icon [icon]="faEnvelope" class="context-menu-icon"></fa-icon> Direct
        </ng-template>
    </context-menu>
    <app-media></app-media>
</form>