<ng-container *ngIf="entry$ | async as entry">
    <ng-container *ngIf="savingDescription$ | async; else descriptionSaved">
        <span trans>Saving...</span>
    </ng-container>
    <ng-template #descriptionSaved>
        <div class="input-container" *ngIf="editingDescription$ | async; else descriptionEl">
            <label for="description" class="hidden" trans>Description</label>
            <textarea
                    rows="4"
                    id="description"
                    #textArea
                    [value]="entry.description"
                    (enterKeybind)="textArea.blur()"
                    (blur)="updateDescription(entry, textArea.value)"
            ></textarea>
        </div>
        <ng-template #descriptionEl>
            <div class="description-text" (click)="editDescription()">{{entry.description || ('Add a description' | trans)}}</div>
            <button mat-icon-button (click)="editDescription()" [matTooltip]="'Edit description' | trans">
                <mat-icon svgIcon="edit"></mat-icon>
            </button>
        </ng-template>
    </ng-template>
</ng-container>