noydb/oworms-ui

<ow-hero>
    <ow-random-top [word]="word$ | async"/>
</ow-hero>

<article *ngIf="word$ | async as word; else placeholder" id="word">
    <section id="main-detail">

        <div id="top">
            <div>
                <h2>{{word.theWord}}</h2>
                <ow-word-like [word]="word"/>
            </div>
            <div id="actions">
                <img alt="pencil in a circle with pink background"
                     src="/assets/image/pencil-circled.svg"
                     (click)="edit(word)" />
                <img alt="a white plus icon with a circular purple background"
                     src="/assets/image/plus-circled.svg" />
            </div>
        </div>

        <span *ngIf="word.pronunciation as pronunciation;">{{ pronunciation }}</span>

        <p id="part-of-speech">{{ word.partOfSpeech }}</p>

        <p id="definition">{{ word.definition }}</p>

        <div class="pair">
            <span>Origin:&nbsp;</span>
            <p>{{ word?.origin ? word.origin : 'N/A' }}</p>
        </div>
        <div class="pair" *ngIf="word.exampleUsage as example">
            <span>Example:&nbsp;</span>
            <p>{{ example }}</p>
        </div>
        <div class="pair" *ngIf="word.discoveredAt as discoveredAt">
            <span>Discovered In:&nbsp;</span>
            <p>{{ discoveredAt }}</p>
        </div>
        <div id="tags">
            <span>Associated Tags</span>
            <ow-tags [sTags]="tags"/>
        </div>
        <div id="synonyms">
            <span>Synonyms</span>
            <ow-tags [sTags]="[]"/>
        </div>
        <div id="note">
            <span>Note</span>
            <p>{{word.note ? word.note : 'N/A' }}</p>
        </div>
    </section>

    <section id="meta-data">
        <div class="column">
            <div class="pair">
                <span>Created By:&nbsp;</span>
                <p>{{ word.createdBy }}</p>
            </div>
            <div class="pair">
                <span>Times Viewed:&nbsp;</span>
                <p>{{ word.timesViewed }}</p>
            </div>
        </div>
        <div class="column">
            <div class="pair creation-date" (click)="navToStats(word)">
                <span>Creation Date:&nbsp;</span>
                <p>{{ word.creationDate | date:'EEEE d MMMM y' }}</p>
            </div>
            <div class="pair">
                <span>Creation Time:&nbsp;</span>
                <p>{{ word.creationDate | date:'h:mm:ss a' }}</p>
            </div>
        </div>
    </section>

</article>

<ng-template #placeholder>
    <ow-placeholder [state]="state" [errorMessage]="errorMessage"/>
</ng-template>