@thecodeblogs/blog 0.15.0 → 0.15.2

package/fesm2020/thecodeblogs-blog.mjs

@@ -23,24 +23,26 @@ import * as i1$1 from '@angular/platform-browser';
 import { ENTER, COMMA, TAB } from '@angular/cdk/keycodes';
 import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i6 from '@angular/forms';
-import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i6$1 from '@angular/material/divider';
+import * as i5 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i7 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
-import * as i7$1 from 'ng2-file-upload';
+import * as i6 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i7 from 'ng2-file-upload';
 import { FileUploader, FileUploadModule } from 'ng2-file-upload';
 import * as i1$3 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import * as i6$1 from '@angular/forms';
+import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i8 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i9 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i10 from '@angular/material/form-field';
 import * as i11 from '@angular/cdk/text-field';
+import * as i12 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
 import * as i13 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i14 from '@angular/material/core';
@@ -57,7 +59,7 @@ import * as i1$4 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import * as i3 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import * as i5 from '@angular/material/list';
+import * as i5$1 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i3$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -354,6 +356,9 @@ class EntryService extends DjangoRestFrameworkEndpointService {
         slug = slug.toLowerCase();
         return slug;
     }
+    delete(entity) {
+        return this.http.delete(this.adminEndpoint + entity.id + '/').pipe(map((val) => this.triggerCoreEvent(val, CoreEventType.DELETE)), map(this.handleResponse.bind(this)));
+    }
 }
 EntryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: EntryService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
 EntryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: EntryService, providedIn: 'root' });
@@ -557,6 +562,7 @@ class EntrySelectorDialogComponent {
         this.dialogRef = dialogRef;
         this.data = data;
         this.entryService = entryService;
+        this.columnsToDisplay = ['title', 'create_date', 'actions'];
     }
     ngOnInit() {
         this.entryService.getUnpublishedEntries().subscribe((next) => {
@@ -566,21 +572,30 @@ class EntrySelectorDialogComponent {
     onNoClick() {
         this.dialogRef.close();
     }
-    onYesClick() {
-        this.entryService.getUnpublishedById(this.selectedId).subscribe((entry) => {
-            localStorage.setItem(EntrySelectorDialogComponent.CURRENT_ENTRY, JSON.stringify(entry));
-            entry.sort();
-            this.entryService.currentlyEditedEntry.next(entry);
-            this.dialogRef.close();
+    select(entry) {
+        this.entryService.getUnpublishedById(entry.id).subscribe((entry_new) => {
+            localStorage.setItem(EntrySelectorDialogComponent.CURRENT_ENTRY, JSON.stringify(entry_new));
+            entry_new.sort();
+            this.entryService.currentlyEditedEntry.next(entry_new);
+            this.dialogRef.close(entry_new.id);
+        });
+    }
+    delete(entry) {
+        this.entryService.delete(entry).subscribe((response) => {
+            this.entryService.getUnpublishedEntries().subscribe((next) => {
+                this.entries = next.results;
+            });
+        }, (error) => {
+            alert('NOT DELETED: ' + error);
         });
     }
 }
 EntrySelectorDialogComponent.CURRENT_ENTRY = 'current_entry';
 EntrySelectorDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: EntrySelectorDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: EntryService }], target: i0.ɵɵFactoryTarget.Component });
-EntrySelectorDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: EntrySelectorDialogComponent, selector: "app-entry-selector-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Select an Entry to Edit</h1>\n<!--<mat-radio-group aria-label=\"Select an option\">-->\n<!--    <mat-radio-button class=\"option\" value=\"unpublished\">Unpublished</mat-radio-button>-->\n<!--    <mat-radio-button class=\"option\" value=\"published\">Published</mat-radio-button>-->\n<!--</mat-radio-group>-->\n<mat-divider class=\"option-list-divider\"></mat-divider>\n<div mat-dialog-content>\n    <mat-radio-group [(ngModel)]=\"selectedId\">\n        <mat-radio-button *ngFor=\"let entry of entries\" class=\"option\" [value]=\"entry.id\">{{entry.title}}</mat-radio-button>\n    </mat-radio-group>\n    <div *ngIf=\"!entries?.length\">There are no unpublished entries</div>\n</div>\n<div mat-dialog-actions>\n    <button mat-button (click)=\"onNoClick()\">Cancel</button>\n    <button mat-button (click)=\"onYesClick()\" [mat-dialog-close]=\"this.selectedId\" cdkFocusInitial>Edit Selected Entry</button>\n</div>\n", styles: [".entry-checkbox-container{display:inline-block;width:100%;margin:5px 0}.option-list-divider{margin:10px 0}.option{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
+EntrySelectorDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: EntrySelectorDialogComponent, selector: "app-entry-selector-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Select an Entry to Edit</h1>\n<!--<mat-radio-group aria-label=\"Select an option\">-->\n<!--    <mat-radio-button class=\"option\" value=\"unpublished\">Unpublished</mat-radio-button>-->\n<!--    <mat-radio-button class=\"option\" value=\"published\">Published</mat-radio-button>-->\n<!--</mat-radio-group>-->\n<mat-divider class=\"option-list-divider\"></mat-divider>\n<div mat-dialog-content>\n\n  <table mat-table [dataSource]=entries>\n    <ng-container matColumnDef=\"id\">\n      <th mat-header-cell *matHeaderCellDef> Id </th>\n      <td mat-cell *matCellDef=\"let entry\"> {{entry.id}} </td>\n    </ng-container>\n    <ng-container matColumnDef=\"title\">\n      <th mat-header-cell *matHeaderCellDef> Title </th>\n      <td mat-cell *matCellDef=\"let entry\"> {{entry.title}} </td>\n    </ng-container>\n    <ng-container matColumnDef=\"create_date\">\n      <th mat-header-cell *matHeaderCellDef> Created </th>\n      <td mat-cell *matCellDef=\"let entry\"> {{entry.create_date}} </td>\n    </ng-container>\n    <ng-container matColumnDef=\"actions\">\n      <th mat-header-cell *matHeaderCellDef> Actions </th>\n      <td mat-cell *matCellDef=\"let entry\">\n        <button mat-button color=\"primary\" (click)=\"select(entry)\">Edit</button> | <button mat-button color=\"warn\" (click)=\"delete(entry)\">Delete</button>\n      </td>\n    </ng-container>\n    <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n    <tr mat-row *matRowDef=\"let myRowData; columns: columnsToDisplay\"></tr>\n  </table>\n  <div *ngIf=\"!entries?.length\">There are no unpublished entries</div>\n</div>\n<div mat-dialog-actions>\n  <button mat-button (click)=\"onNoClick()\">Cancel</button>\n</div>\n", styles: [".entry-checkbox-container{display:inline-block;width:100%;margin:5px 0}.option-list-divider{margin:10px 0}.option{margin-right:5px}.mat-column-actions{min-width:175px}.mat-column-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:365px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: EntrySelectorDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-entry-selector-dialog', template: "<h1 mat-dialog-title>Select an Entry to Edit</h1>\n<!--<mat-radio-group aria-label=\"Select an option\">-->\n<!--    <mat-radio-button class=\"option\" value=\"unpublished\">Unpublished</mat-radio-button>-->\n<!--    <mat-radio-button class=\"option\" value=\"published\">Published</mat-radio-button>-->\n<!--</mat-radio-group>-->\n<mat-divider class=\"option-list-divider\"></mat-divider>\n<div mat-dialog-content>\n    <mat-radio-group [(ngModel)]=\"selectedId\">\n        <mat-radio-button *ngFor=\"let entry of entries\" class=\"option\" [value]=\"entry.id\">{{entry.title}}</mat-radio-button>\n    </mat-radio-group>\n    <div *ngIf=\"!entries?.length\">There are no unpublished entries</div>\n</div>\n<div mat-dialog-actions>\n    <button mat-button (click)=\"onNoClick()\">Cancel</button>\n    <button mat-button (click)=\"onYesClick()\" [mat-dialog-close]=\"this.selectedId\" cdkFocusInitial>Edit Selected Entry</button>\n</div>\n", styles: [".entry-checkbox-container{display:inline-block;width:100%;margin:5px 0}.option-list-divider{margin:10px 0}.option{margin-right:5px}\n"] }]
+            args: [{ selector: 'app-entry-selector-dialog', template: "<h1 mat-dialog-title>Select an Entry to Edit</h1>\n<!--<mat-radio-group aria-label=\"Select an option\">-->\n<!--    <mat-radio-button class=\"option\" value=\"unpublished\">Unpublished</mat-radio-button>-->\n<!--    <mat-radio-button class=\"option\" value=\"published\">Published</mat-radio-button>-->\n<!--</mat-radio-group>-->\n<mat-divider class=\"option-list-divider\"></mat-divider>\n<div mat-dialog-content>\n\n  <table mat-table [dataSource]=entries>\n    <ng-container matColumnDef=\"id\">\n      <th mat-header-cell *matHeaderCellDef> Id </th>\n      <td mat-cell *matCellDef=\"let entry\"> {{entry.id}} </td>\n    </ng-container>\n    <ng-container matColumnDef=\"title\">\n      <th mat-header-cell *matHeaderCellDef> Title </th>\n      <td mat-cell *matCellDef=\"let entry\"> {{entry.title}} </td>\n    </ng-container>\n    <ng-container matColumnDef=\"create_date\">\n      <th mat-header-cell *matHeaderCellDef> Created </th>\n      <td mat-cell *matCellDef=\"let entry\"> {{entry.create_date}} </td>\n    </ng-container>\n    <ng-container matColumnDef=\"actions\">\n      <th mat-header-cell *matHeaderCellDef> Actions </th>\n      <td mat-cell *matCellDef=\"let entry\">\n        <button mat-button color=\"primary\" (click)=\"select(entry)\">Edit</button> | <button mat-button color=\"warn\" (click)=\"delete(entry)\">Delete</button>\n      </td>\n    </ng-container>\n    <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n    <tr mat-row *matRowDef=\"let myRowData; columns: columnsToDisplay\"></tr>\n  </table>\n  <div *ngIf=\"!entries?.length\">There are no unpublished entries</div>\n</div>\n<div mat-dialog-actions>\n  <button mat-button (click)=\"onNoClick()\">Cancel</button>\n</div>\n", styles: [".entry-checkbox-container{display:inline-block;width:100%;margin:5px 0}.option-list-divider{margin:10px 0}.option{margin-right:5px}.mat-column-actions{min-width:175px}.mat-column-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:365px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: EntrySelectorDialogData, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -720,7 +735,7 @@ class MediaUploadModalComponent {
     }
 }
 MediaUploadModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: MediaUploadModalComponent, deps: [{ token: i1$2.MatDialogRef }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
-MediaUploadModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: MediaUploadModalComponent, selector: "app-media-upload-modal", inputs: { allowedMimeTypes: "allowedMimeTypes", uploadUrlKey: "uploadUrlKey", file: "file" }, host: { listeners: { "document:paste": "onPaste($event)" } }, ngImport: i0, template: "<h1 mat-dialog-title>Upload an Image</h1>\n<!--<mat-radio-group aria-label=\"Select an option\">-->\n<!--    <mat-radio-button class=\"option\" value=\"unpublished\">Unpublished</mat-radio-button>-->\n<!--    <mat-radio-button class=\"option\" value=\"published\">Published</mat-radio-button>-->\n<!--</mat-radio-group>-->\n<mat-divider class=\"option-list-divider\"></mat-divider>\n<div mat-dialog-content>\n    <div *ngIf=\"uploading\">\n        <fa-icon [icon]=\"'spinner'\" [spin]=\"true\"></fa-icon>\n    </div>\n    <ng-container *ngIf=\"!imgLink && !uploading\">\n        <h4>Select a File</h4>\n        <div class=\"input-group\">\n            <div class=\"form-group\">\n                <!--                <label for=\"import_file\">Choose File</label>-->\n                <input type=\"file\" id=\"import_file\"\n                       *ngIf=\"uploader.queue.length==0 && !uploading\"\n                       ng2FileSelect\n                       [uploader]=\"uploader\"\n                       (onFileSelected)=\"onFileSelected($event)\"\n                >\n            </div>\n        </div>\n        <br>\n        <h3>Paste a File</h3>\n        <p>You can use the paste command to paste any image here</p>\n    </ng-container>\n    <div *ngIf=\"imgLink\">\n        <img *ngIf=\"imgLink\" [src]=\"imgLink\"/>\n    </div>\n    <div *ngIf=\"error\">\n        <div class=\"alert alert-danger\">\n            {{error}}\n        </div>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button mat-button [disabled]=\"!imgLink || uploading\" (click)=\"close()\">Attach</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i1$3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i7$1.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }] });
+MediaUploadModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: MediaUploadModalComponent, selector: "app-media-upload-modal", inputs: { allowedMimeTypes: "allowedMimeTypes", uploadUrlKey: "uploadUrlKey", file: "file" }, host: { listeners: { "document:paste": "onPaste($event)" } }, ngImport: i0, template: "<h1 mat-dialog-title>Upload an Image</h1>\n<!--<mat-radio-group aria-label=\"Select an option\">-->\n<!--    <mat-radio-button class=\"option\" value=\"unpublished\">Unpublished</mat-radio-button>-->\n<!--    <mat-radio-button class=\"option\" value=\"published\">Published</mat-radio-button>-->\n<!--</mat-radio-group>-->\n<mat-divider class=\"option-list-divider\"></mat-divider>\n<div mat-dialog-content>\n    <div *ngIf=\"uploading\">\n        <fa-icon [icon]=\"'spinner'\" [spin]=\"true\"></fa-icon>\n    </div>\n    <ng-container *ngIf=\"!imgLink && !uploading\">\n        <h4>Select a File</h4>\n        <div class=\"input-group\">\n            <div class=\"form-group\">\n                <!--                <label for=\"import_file\">Choose File</label>-->\n                <input type=\"file\" id=\"import_file\"\n                       *ngIf=\"uploader.queue.length==0 && !uploading\"\n                       ng2FileSelect\n                       [uploader]=\"uploader\"\n                       (onFileSelected)=\"onFileSelected($event)\"\n                >\n            </div>\n        </div>\n        <br>\n        <h3>Paste a File</h3>\n        <p>You can use the paste command to paste any image here</p>\n    </ng-container>\n    <div *ngIf=\"imgLink\">\n        <img *ngIf=\"imgLink\" [src]=\"imgLink\"/>\n    </div>\n    <div *ngIf=\"error\">\n        <div class=\"alert alert-danger\">\n            {{error}}\n        </div>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button mat-button [disabled]=\"!imgLink || uploading\" (click)=\"close()\">Attach</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i1$3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i7.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: MediaUploadModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-media-upload-modal', template: "<h1 mat-dialog-title>Upload an Image</h1>\n<!--<mat-radio-group aria-label=\"Select an option\">-->\n<!--    <mat-radio-button class=\"option\" value=\"unpublished\">Unpublished</mat-radio-button>-->\n<!--    <mat-radio-button class=\"option\" value=\"published\">Published</mat-radio-button>-->\n<!--</mat-radio-group>-->\n<mat-divider class=\"option-list-divider\"></mat-divider>\n<div mat-dialog-content>\n    <div *ngIf=\"uploading\">\n        <fa-icon [icon]=\"'spinner'\" [spin]=\"true\"></fa-icon>\n    </div>\n    <ng-container *ngIf=\"!imgLink && !uploading\">\n        <h4>Select a File</h4>\n        <div class=\"input-group\">\n            <div class=\"form-group\">\n                <!--                <label for=\"import_file\">Choose File</label>-->\n                <input type=\"file\" id=\"import_file\"\n                       *ngIf=\"uploader.queue.length==0 && !uploading\"\n                       ng2FileSelect\n                       [uploader]=\"uploader\"\n                       (onFileSelected)=\"onFileSelected($event)\"\n                >\n            </div>\n        </div>\n        <br>\n        <h3>Paste a File</h3>\n        <p>You can use the paste command to paste any image here</p>\n    </ng-container>\n    <div *ngIf=\"imgLink\">\n        <img *ngIf=\"imgLink\" [src]=\"imgLink\"/>\n    </div>\n    <div *ngIf=\"error\">\n        <div class=\"alert alert-danger\">\n            {{error}}\n        </div>\n    </div>\n</div>\n<div mat-dialog-actions>\n    <button mat-button [disabled]=\"!imgLink || uploading\" (click)=\"close()\">Attach</button>\n</div>\n" }]
@@ -757,7 +772,7 @@ class EntryCreatorComponent {
         this.dialog = dialog;
         this.ContentType = ContentType;
         this.Object = Object;
-        this.entry = new Entry();
+        this.entry = null;
         this.separatorKeysCodes = [ENTER, COMMA, TAB];
         this.removable = true;
         this.all_tags = ['Angular', 'Bash', 'MacOS', 'Typescript', 'NPM', 'Databases'];
@@ -876,7 +891,7 @@ class EntryCreatorComponent {
             }, 10);
         }
         else {
-            this.createNewEntry();
+            this.seeEntries();
         }
         this.uploader.onCompleteItem = (item, response) => {
             // const responseObj = JSON.parse(response)
@@ -955,7 +970,7 @@ class EntryCreatorComponent {
     }
     seeEntries() {
         const dialogRef = this.dialog.open(EntrySelectorDialogComponent, {
-            width: '500px',
+            width: '800px',
             data: { name: 'test', animal: 'test' }
         });
         dialogRef.afterClosed().subscribe((id) => {
@@ -970,16 +985,9 @@ class EntryCreatorComponent {
         });
     }
     postPublishCallback() {
-        this.entry = new Entry();
-        this.entry.title = EntryCreatorComponent.DEFAULT_NEW_ENTRY_TITLE;
-        this.entry.published = false;
-        this.entry.version = 1;
-        this.entryService.currentlyEditedEntry.next(this.entry);
-        localStorage.setItem(EntryCreatorComponent.CURRENT_ENTRY, JSON.stringify(this.entry));
-        this.entryService.create(this.entry).subscribe((next) => {
-            this.tags = [];
-            this.refreshTags();
-        });
+        this.entryService.currentlyEditedEntry.next(null);
+        this.entry = null;
+        this.seeEntries();
     }
     cancelScheduling() {
         this.entry.future_publish_date = null;
@@ -1010,6 +1018,8 @@ class EntryCreatorComponent {
         if (confirmDelete) {
             this.entryService.delete(this.entry).subscribe(() => {
                 this.entry = null;
+                this.entryService.currentlyEditedEntry.next(null);
+                localStorage.removeItem(EntryCreatorComponent.CURRENT_ENTRY);
             });
         }
     }
@@ -1034,10 +1044,10 @@ class EntryCreatorComponent {
 EntryCreatorComponent.CURRENT_ENTRY = 'current_entry';
 EntryCreatorComponent.DEFAULT_NEW_ENTRY_TITLE = 'A New Entry';
 EntryCreatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: EntryCreatorComponent, deps: [{ token: EntryService }, { token: TagService }, { token: IdentityService }, { token: i0.ChangeDetectorRef }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-EntryCreatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: EntryCreatorComponent, selector: "app-entry-creator", inputs: { allowedMimeTypes: "allowedMimeTypes", uploadUrlKey: "uploadUrlKey" }, viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["tagauto"], descendants: true }], ngImport: i0, template: "<div class=\"section creator fields\">\n    <form #createForm=\"ngForm\" (change)=\"onChange()\" *ngIf=\"this.entry\">\n        <div class=\"form-group\">\n            <mat-form-field class=\"full-width\">\n                <mat-label>Title</mat-label>\n                <input matInput\n                       [(ngModel)]=\"entry.title\"\n                       name=\"title\">\n            </mat-form-field>\n        </div>\n        <mat-card class=\"form-section tags\">\n            <div>\n                <mat-form-field class=\"full-width\" hintLabel=\"Use a comma to seperate different tags\">\n                    <mat-chip-listbox #tagList aria-label=\"Tags\">\n                        <mat-chip-option\n                            *ngFor=\"let tag of tags\"\n                            [selectable]=\"selectable\"\n                            [removable]=\"removable\"\n                            (removed)=\"remove(tag)\">\n                            {{tag}}\n                            <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n                        </mat-chip-option>\n                        <input\n                            matInput\n                            placeholder=\"Tags...\"\n                            #tagInput\n                            [formControl]=\"tagCtrl\"\n                            [matAutocomplete]=\"tagauto\"\n                            [matChipInputFor]=\"tagList\"\n                            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                            (matChipInputTokenEnd)=\"add($event)\">\n                    </mat-chip-listbox>\n                    <mat-autocomplete #tagauto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n                        <mat-option *ngFor=\"let tag of filtered_tags | async\" [value]=\"tag\">\n                            {{tag}}\n                        </mat-option>\n                    </mat-autocomplete>\n                </mat-form-field>\n            </div>\n        </mat-card>\n        <mat-card class=\"form-section\" *ngFor=\"let section of entry.sections\">\n            <div>\n                <mat-form-field class=\"full-width\">\n                    <mat-label>Subheading</mat-label>\n                    <input matInput\n                           [(ngModel)]=\"section.subheading\"\n                           name=\"{{section.id}}-subheading\">\n                </mat-form-field>\n                <div class=\"form-content\" *ngFor=\"let content of section.contents\">\n                    <div class=\"form-group\">\n                        <mat-radio-group\n                            aria-label=\"Select the Content Type\"\n                            name=\"{{content.id}}-content-type\"\n                            class=\"radio-group\"\n                            [(ngModel)]=\"content.type\">\n                            <mat-radio-button\n                                *ngFor=\"let value of Object.values(ContentType)\"\n                                class=\"radio-button\"\n                                [value]=\"value\">{{value}}\n                            </mat-radio-button>\n                        </mat-radio-group>\n                    </div>\n                    <ng-container [ngSwitch]=\"content.type\">\n                        <ng-container *ngSwitchCase=\"ContentType.URL\">\n                            <mat-form-field class=\"full-width\">\n                                <mat-label>Value</mat-label>\n                                <input\n                                    matInput\n                                    name=\"{{content.id}}-content-value\"\n                                    [(ngModel)]=\"content.value\">\n                            </mat-form-field>\n                            <mat-form-field class=\"full-width\">\n                                <mat-label>Title</mat-label>\n                                <input\n                                    matInput\n                                    name=\"{{content.id}}-content-title\"\n                                    [(ngModel)]=\"content.title\">\n                            </mat-form-field>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"ContentType.TEXT\">\n                            <mat-form-field class=\"full-width\">\n                                <mat-label>Value</mat-label>\n                                <textarea matInput\n                                          cdkTextareaAutosize\n                                          #autosize=\"cdkTextareaAutosize\"\n                                          cdkAutosizeMinRows=\"3\"\n                                          cdkAutosizeMaxRows=\"20\"\n                                          name=\"{{content.id}}-content-value\"\n                                          [(ngModel)]=\"content.value\"\n                                          ></textarea>\n                            </mat-form-field>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"ContentType.HTML\">\n                            <mat-form-field class=\"full-width\">\n                                <mat-label>Value</mat-label>\n                                <textarea matInput\n                                          cdkTextareaAutosize\n                                          #autosize=\"cdkTextareaAutosize\"\n                                          cdkAutosizeMinRows=\"3\"\n                                          cdkAutosizeMaxRows=\"20\"\n                                          name=\"{{content.id}}-content-value\"\n                                          [(ngModel)]=\"content.value\"\n                                          ></textarea>\n                            </mat-form-field>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"ContentType.CODE\">\n                            <mat-form-field class=\"full-width\">\n                                <mat-label>Value</mat-label>\n                                <textarea matInput\n                                          cdkTextareaAutosize\n                                          #autosize=\"cdkTextareaAutosize\"\n                                          cdkAutosizeMinRows=\"10\"\n                                          cdkAutosizeMaxRows=\"100\"\n                                          name=\"{{content.id}}-content-value\"\n                                          [(ngModel)]=\"content.value\"\n                                          ></textarea>\n                            </mat-form-field>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"ContentType.IMAGE\">\n                            <mat-form-field class=\"full-width\">\n                                <mat-label>Value</mat-label>\n                                <input\n                                    matInput\n                                    name=\"{{content.id}}-content-value\"\n                                    [(ngModel)]=\"content.value\">\n                            </mat-form-field>\n                            <mat-form-field class=\"full-width\">\n                                <mat-label>Value</mat-label>\n                                <input\n                                    matInput\n                                    name=\"{{content.id}}-content-source\"\n                                    [(ngModel)]=\"content.value\">\n                            </mat-form-field>\n                            <mat-form-field class=\"full-width\">\n                                <mat-label>Description</mat-label>\n                                <input\n                                    matInput\n                                    name=\"{{content.id}}-content-description\"\n                                    [(ngModel)]=\"content.description\">\n                            </mat-form-field>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"ContentType.MEDIA\">\n                            <div class=\"full-width\">\n                                <ng-container *ngIf=\"content.value\">\n                                    <mat-form-field class=\"full-width\">\n                                        <mat-label>Value</mat-label>\n                                        <input\n                                            matInput\n                                            name=\"{{content.id}}-content-value\"\n                                            [(ngModel)]=\"content.value\">\n                                    </mat-form-field>\n                                    <mat-form-field class=\"full-width\">\n                                        <mat-label>Description</mat-label>\n                                        <input\n                                            matInput\n                                            name=\"{{content.id}}-content-description\"\n                                            [(ngModel)]=\"content.description\">\n                                    </mat-form-field>\n                                </ng-container>\n                                <ng-container *ngIf=\"content.additional\">\n                                    <ng-container *ngFor=\"let add of content.additional\">\n                                        <mat-form-field class=\"full-width\">\n                                            <mat-label>{{add.key}}</mat-label>\n                                            <input\n                                                matInput\n                                                name=\"{{content.id}}-content-{{add.key}}\"\n                                                [(ngModel)]=\"add.value\"\n                                                [disabled]=\"true\"\n                                                >\n                                        </mat-form-field>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngIf=\"!content.value\">\n                                    <button mat-raised-button (click)=startUploader(content)>Upload</button>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                    <button mat-raised-button (click)=removeContent(content)>Remove Content</button>\n                    <button mat-raised-button (click)=\"addContent(section)\">+ Add Content</button>\n                </div>\n                <button mat-raised-button (click)=\"removeSection(section)\">Remove Section</button>\n                <button mat-raised-button (click)=\"addContent(section)\" *ngIf=\"section.contents.length === 0\">+ Add\n                    Content\n                </button>\n                <button mat-raised-button (click)=\"addSection()\">+ Add Section</button>\n            </div>\n\n        </mat-card>\n        <button mat-raised-button (click)=\"addSection()\" *ngIf=\"entry.sections?.length === 0\">+ Add Section</button>\n        <button mat-raised-button (click)=\"addSection()\" *ngIf=\"!entry.sections\">+ Add Section</button>\n\n        <div class=\"controls\">\n            <button mat-raised-button (click)=\"resetDate()\">Reset the Date</button>\n            <button mat-raised-button (click)=\"delete()\">Delete</button>\n            <button mat-raised-button [disabled]=\"scheduling\" (click)=\"publish()\">Publish</button>\n            <button mat-raised-button [disabled]=\"scheduling\" (click)=\"exposeScheduling()\">Schedule</button>\n            <button mat-raised-button (click)=\"startNew()\">New</button>\n        </div>\n        <p *ngIf=\"scheduling\">Publishing is disabled while scheduling is being used.</p>\n\n        <mat-card [hidden]=\"!scheduling\">\n            <h4>\n               Scheduling Options\n            </h4>\n\n            <div class=\"form-group\">\n                <mat-form-field class=\"full-width\">\n                    <mat-label>Date</mat-label>\n                    <input\n                        #futurePublishDate\n                        matInput\n                        [matDatepicker]=\"picker\"\n                        [min]=\"today\"\n                        (dateInput)=\"onDateChange()\"\n                        (dateChange)=\"onDateChange()\"\n                        [(ngModel)]=\"entry.future_publish_date\"\n                        name=\"future-publish-date\"\n                    >\n                                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                    <mat-datepicker\n                        #picker></mat-datepicker>\n                </mat-form-field>\n\n                <mat-label>Time</mat-label>\n                <ngx-timepicker-field\n                    [defaultTime]=\"customScheduleTime\"\n                    [format]=\"12\"\n                    [buttonAlign]=\"'left'\"\n                    (timeChanged)=\"setTime($event)\"\n                ></ngx-timepicker-field>\n                <p>Times are represented in your local time zone</p>\n            </div>\n\n            <div mat-dialog-actions>\n                <div class=\"controls\">\n                    <button mat-raised-button (click)=\"cancelScheduling()\">Cancel Scheduling</button>\n                </div>\n            </div>\n            <p>This post will be published as soon as its scheduled date and time arrive. No further action is needed by you. If you do not\n            want to use scheduling, you can cancel scheduling and manually publish.</p>\n        </mat-card>\n    </form>\n    <div class=\"controls\">\n        <button mat-raised-button (click)=\"seeEntries()\">See Entries</button>\n        <button *ngIf=\"!this.entry\" mat-raised-button (click)=\"startNew()\">New</button>\n    </div>\n</div>\n", styles: [".creator{min-height:calc(100vh - 100px)}form{padding:20px}.content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}button{margin:4px}.radio-group{display:flex;flex-direction:column;margin:15px 0}.radio-button{margin:4px}.full-width{width:100%}.content-card{margin:0 0 10px}.form-section{margin-bottom:10px}.form-content:not(:last-child){border-bottom:1px dotted #aaa;padding-bottom:10px}.controls{display:inline-block;width:100%;padding:10px}[hidden]{display:none!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i11.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i13.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i13.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i15.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i15.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "value"], outputs: ["change"] }, { kind: "component", type: i15.MatChipOption, selector: "mat-basic-chip-option, mat-chip-option", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i15.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i16.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i17.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i17.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i17.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6$2.NgxTimepickerFieldComponent, selector: "ngx-timepicker-field", inputs: ["buttonAlign", "format", "min", "max", "defaultTime", "disabled", "toggleIcon", "clockTheme", "controlOnly", "cancelBtnTmpl", "confirmBtnTmpl"], outputs: ["timeChanged"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] });
+EntryCreatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: EntryCreatorComponent, selector: "app-entry-creator", inputs: { allowedMimeTypes: "allowedMimeTypes", uploadUrlKey: "uploadUrlKey" }, viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["tagauto"], descendants: true }], ngImport: i0, template: "<div class=\"section creator fields\">\n  <form #createForm=\"ngForm\" (change)=\"onChange()\" *ngIf=\"this.entry\">\n    <div class=\"form-group\">\n      <mat-form-field class=\"full-width\">\n        <mat-label>Title</mat-label>\n        <input matInput\n               [(ngModel)]=\"entry.title\"\n               name=\"title\">\n      </mat-form-field>\n    </div>\n    <mat-card class=\"form-section tags\">\n      <div>\n        <mat-form-field class=\"full-width\" hintLabel=\"Use a comma to seperate different tags\">\n          <mat-chip-listbox #tagList aria-label=\"Tags\">\n            <mat-chip-option\n                *ngFor=\"let tag of tags\"\n                [selectable]=\"selectable\"\n                [removable]=\"removable\"\n                (removed)=\"remove(tag)\">\n              {{tag}}\n              <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n            </mat-chip-option>\n            <input\n                matInput\n                placeholder=\"Tags...\"\n                #tagInput\n                [formControl]=\"tagCtrl\"\n                [matAutocomplete]=\"tagauto\"\n                [matChipInputFor]=\"tagList\"\n                [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                (matChipInputTokenEnd)=\"add($event)\">\n          </mat-chip-listbox>\n          <mat-autocomplete #tagauto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n            <mat-option *ngFor=\"let tag of filtered_tags | async\" [value]=\"tag\">\n              {{tag}}\n            </mat-option>\n          </mat-autocomplete>\n        </mat-form-field>\n      </div>\n    </mat-card>\n    <mat-card class=\"form-section\" *ngFor=\"let section of entry.sections\">\n      <div>\n        <mat-form-field class=\"full-width\">\n          <mat-label>Subheading</mat-label>\n          <input matInput\n                 [(ngModel)]=\"section.subheading\"\n                 name=\"{{section.id}}-subheading\">\n        </mat-form-field>\n        <div class=\"form-content\" *ngFor=\"let content of section.contents\">\n          <div class=\"form-group\">\n            <mat-radio-group\n                aria-label=\"Select the Content Type\"\n                name=\"{{content.id}}-content-type\"\n                class=\"radio-group\"\n                [(ngModel)]=\"content.type\">\n              <mat-radio-button\n                  *ngFor=\"let value of Object.values(ContentType)\"\n                  class=\"radio-button\"\n                  [value]=\"value\">{{value}}\n              </mat-radio-button>\n            </mat-radio-group>\n          </div>\n          <ng-container [ngSwitch]=\"content.type\">\n            <ng-container *ngSwitchCase=\"ContentType.URL\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-value\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Title</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-title\"\n                    [(ngModel)]=\"content.title\">\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.TEXT\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"3\"\n                          cdkAutosizeMaxRows=\"20\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.HTML\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"3\"\n                          cdkAutosizeMaxRows=\"20\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.CODE\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"10\"\n                          cdkAutosizeMaxRows=\"100\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.IMAGE\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-value\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-source\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Description</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-description\"\n                    [(ngModel)]=\"content.description\">\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.MEDIA\">\n              <div class=\"full-width\">\n                <ng-container *ngIf=\"content.value\">\n                  <mat-form-field class=\"full-width\">\n                    <mat-label>Value</mat-label>\n                    <input\n                        matInput\n                        name=\"{{content.id}}-content-value\"\n                        [(ngModel)]=\"content.value\">\n                  </mat-form-field>\n                  <mat-form-field class=\"full-width\">\n                    <mat-label>Description</mat-label>\n                    <input\n                        matInput\n                        name=\"{{content.id}}-content-description\"\n                        [(ngModel)]=\"content.description\">\n                  </mat-form-field>\n                </ng-container>\n                <ng-container *ngIf=\"content.additional\">\n                  <ng-container *ngFor=\"let add of content.additional\">\n                    <mat-form-field class=\"full-width\">\n                      <mat-label>{{add.key}}</mat-label>\n                      <input\n                          matInput\n                          name=\"{{content.id}}-content-{{add.key}}\"\n                          [(ngModel)]=\"add.value\"\n                          [disabled]=\"true\"\n                          >\n                    </mat-form-field>\n                  </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!content.value\">\n                  <button mat-raised-button (click)=startUploader(content)>Upload</button>\n                </ng-container>\n              </div>\n            </ng-container>\n          </ng-container>\n          <button mat-raised-button (click)=removeContent(content)>Remove Content</button>\n          <button mat-raised-button (click)=\"addContent(section)\">+ Add Content</button>\n        </div>\n        <button mat-raised-button (click)=\"removeSection(section)\">Remove Section</button>\n        <button mat-raised-button (click)=\"addContent(section)\" *ngIf=\"section.contents.length === 0\">+ Add\n          Content\n        </button>\n        <button mat-raised-button (click)=\"addSection()\">+ Add Section</button>\n      </div>\n\n    </mat-card>\n    <button mat-raised-button (click)=\"addSection()\" *ngIf=\"entry.sections?.length === 0\">+ Add Section</button>\n    <button mat-raised-button (click)=\"addSection()\" *ngIf=\"!entry.sections\">+ Add Section</button>\n\n    <div class=\"controls\">\n      <button mat-raised-button (click)=\"resetDate()\">Reset the Date</button>\n      <button mat-raised-button (click)=\"delete()\">Delete</button>\n      <button mat-raised-button [disabled]=\"scheduling\" (click)=\"publish()\">Publish</button>\n      <button mat-raised-button [disabled]=\"scheduling\" (click)=\"exposeScheduling()\">Schedule</button>\n      <button mat-raised-button (click)=\"startNew()\">New</button>\n    </div>\n    <p *ngIf=\"scheduling\">Publishing is disabled while scheduling is being used.</p>\n\n    <mat-card [hidden]=\"!scheduling\">\n      <h4>\n        Scheduling Options\n      </h4>\n\n      <div class=\"form-group\">\n        <mat-form-field class=\"full-width\">\n          <mat-label>Date</mat-label>\n          <input\n              #futurePublishDate\n              matInput\n              [matDatepicker]=\"picker\"\n              [min]=\"today\"\n              (dateInput)=\"onDateChange()\"\n              (dateChange)=\"onDateChange()\"\n              [(ngModel)]=\"entry.future_publish_date\"\n              name=\"future-publish-date\"\n              >\n              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n              <mat-datepicker\n                  #picker></mat-datepicker>\n        </mat-form-field>\n\n        <mat-label>Time</mat-label>\n        <ngx-timepicker-field\n            [defaultTime]=\"customScheduleTime\"\n            [format]=\"12\"\n            [buttonAlign]=\"'left'\"\n            (timeChanged)=\"setTime($event)\"\n            ></ngx-timepicker-field>\n        <p>Times are represented in your local time zone</p>\n      </div>\n\n      <div mat-dialog-actions>\n        <div class=\"controls\">\n          <button mat-raised-button (click)=\"cancelScheduling()\">Cancel Scheduling</button>\n        </div>\n      </div>\n      <p>This post will be published as soon as its scheduled date and time arrive. No further action is needed by you. If you do not\n      want to use scheduling, you can cancel scheduling and manually publish.</p>\n    </mat-card>\n  </form>\n  <div class=\"controls\">\n    <button mat-raised-button (click)=\"seeEntries()\">See Entries</button>\n    <button *ngIf=\"!this.entry\" mat-raised-button (click)=\"startNew()\">New</button>\n  </div>\n</div>\n", styles: [".creator{min-height:calc(100vh - 100px)}form{padding:20px}.content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}button{margin:4px}.radio-group{display:flex;flex-direction:column;margin:15px 0}.radio-button{margin:4px}.full-width{width:100%}.content-card{margin:0 0 10px}.form-section{margin-bottom:10px}.form-content:not(:last-child){border-bottom:1px dotted #aaa;padding-bottom:10px}.controls{display:inline-block;width:100%;padding:10px}[hidden]{display:none!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i11.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i13.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i13.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i15.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i15.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "value"], outputs: ["change"] }, { kind: "component", type: i15.MatChipOption, selector: "mat-basic-chip-option, mat-chip-option", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i15.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i16.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i17.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i17.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i17.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6$2.NgxTimepickerFieldComponent, selector: "ngx-timepicker-field", inputs: ["buttonAlign", "format", "min", "max", "defaultTime", "disabled", "toggleIcon", "clockTheme", "controlOnly", "cancelBtnTmpl", "confirmBtnTmpl"], outputs: ["timeChanged"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: EntryCreatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-entry-creator', template: "<div class=\"section creator fields\">\n    <form #createForm=\"ngForm\" (change)=\"onChange()\" *ngIf=\"this.entry\">\n        <div class=\"form-group\">\n            <mat-form-field class=\"full-width\">\n                <mat-label>Title</mat-label>\n                <input matInput\n                       [(ngModel)]=\"entry.title\"\n                       name=\"title\">\n            </mat-form-field>\n        </div>\n        <mat-card class=\"form-section tags\">\n            <div>\n                <mat-form-field class=\"full-width\" hintLabel=\"Use a comma to seperate different tags\">\n                    <mat-chip-listbox #tagList aria-label=\"Tags\">\n                        <mat-chip-option\n                            *ngFor=\"let tag of tags\"\n                            [selectable]=\"selectable\"\n                            [removable]=\"removable\"\n                            (removed)=\"remove(tag)\">\n                            {{tag}}\n                            <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n                        </mat-chip-option>\n                        <input\n                            matInput\n                            placeholder=\"Tags...\"\n                            #tagInput\n                            [formControl]=\"tagCtrl\"\n                            [matAutocomplete]=\"tagauto\"\n                            [matChipInputFor]=\"tagList\"\n                            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                            (matChipInputTokenEnd)=\"add($event)\">\n                    </mat-chip-listbox>\n                    <mat-autocomplete #tagauto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n                        <mat-option *ngFor=\"let tag of filtered_tags | async\" [value]=\"tag\">\n                            {{tag}}\n                        </mat-option>\n                    </mat-autocomplete>\n                </mat-form-field>\n            </div>\n        </mat-card>\n        <mat-card class=\"form-section\" *ngFor=\"let section of entry.sections\">\n            <div>\n                <mat-form-field class=\"full-width\">\n                    <mat-label>Subheading</mat-label>\n                    <input matInput\n                           [(ngModel)]=\"section.subheading\"\n                           name=\"{{section.id}}-subheading\">\n                </mat-form-field>\n                <div class=\"form-content\" *ngFor=\"let content of section.contents\">\n                    <div class=\"form-group\">\n                        <mat-radio-group\n                            aria-label=\"Select the Content Type\"\n                            name=\"{{content.id}}-content-type\"\n                            class=\"radio-group\"\n                            [(ngModel)]=\"content.type\">\n                            <mat-radio-button\n                                *ngFor=\"let value of Object.values(ContentType)\"\n                                class=\"radio-button\"\n                                [value]=\"value\">{{value}}\n                            </mat-radio-button>\n                        </mat-radio-group>\n                    </div>\n                    <ng-container [ngSwitch]=\"content.type\">\n                        <ng-container *ngSwitchCase=\"ContentType.URL\">\n                            <mat-form-field class=\"full-width\">\n                                <mat-label>Value</mat-label>\n                                <input\n                                    matInput\n                                    name=\"{{content.id}}-content-value\"\n                                    [(ngModel)]=\"content.value\">\n                            </mat-form-field>\n                            <mat-form-field class=\"full-width\">\n                                <mat-label>Title</mat-label>\n                                <input\n                                    matInput\n                                    name=\"{{content.id}}-content-title\"\n                                    [(ngModel)]=\"content.title\">\n                            </mat-form-field>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"ContentType.TEXT\">\n                            <mat-form-field class=\"full-width\">\n                                <mat-label>Value</mat-label>\n                                <textarea matInput\n                                          cdkTextareaAutosize\n                                          #autosize=\"cdkTextareaAutosize\"\n                                          cdkAutosizeMinRows=\"3\"\n                                          cdkAutosizeMaxRows=\"20\"\n                                          name=\"{{content.id}}-content-value\"\n                                          [(ngModel)]=\"content.value\"\n                                          ></textarea>\n                            </mat-form-field>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"ContentType.HTML\">\n                            <mat-form-field class=\"full-width\">\n                                <mat-label>Value</mat-label>\n                                <textarea matInput\n                                          cdkTextareaAutosize\n                                          #autosize=\"cdkTextareaAutosize\"\n                                          cdkAutosizeMinRows=\"3\"\n                                          cdkAutosizeMaxRows=\"20\"\n                                          name=\"{{content.id}}-content-value\"\n                                          [(ngModel)]=\"content.value\"\n                                          ></textarea>\n                            </mat-form-field>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"ContentType.CODE\">\n                            <mat-form-field class=\"full-width\">\n                                <mat-label>Value</mat-label>\n                                <textarea matInput\n                                          cdkTextareaAutosize\n                                          #autosize=\"cdkTextareaAutosize\"\n                                          cdkAutosizeMinRows=\"10\"\n                                          cdkAutosizeMaxRows=\"100\"\n                                          name=\"{{content.id}}-content-value\"\n                                          [(ngModel)]=\"content.value\"\n                                          ></textarea>\n                            </mat-form-field>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"ContentType.IMAGE\">\n                            <mat-form-field class=\"full-width\">\n                                <mat-label>Value</mat-label>\n                                <input\n                                    matInput\n                                    name=\"{{content.id}}-content-value\"\n                                    [(ngModel)]=\"content.value\">\n                            </mat-form-field>\n                            <mat-form-field class=\"full-width\">\n                                <mat-label>Value</mat-label>\n                                <input\n                                    matInput\n                                    name=\"{{content.id}}-content-source\"\n                                    [(ngModel)]=\"content.value\">\n                            </mat-form-field>\n                            <mat-form-field class=\"full-width\">\n                                <mat-label>Description</mat-label>\n                                <input\n                                    matInput\n                                    name=\"{{content.id}}-content-description\"\n                                    [(ngModel)]=\"content.description\">\n                            </mat-form-field>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"ContentType.MEDIA\">\n                            <div class=\"full-width\">\n                                <ng-container *ngIf=\"content.value\">\n                                    <mat-form-field class=\"full-width\">\n                                        <mat-label>Value</mat-label>\n                                        <input\n                                            matInput\n                                            name=\"{{content.id}}-content-value\"\n                                            [(ngModel)]=\"content.value\">\n                                    </mat-form-field>\n                                    <mat-form-field class=\"full-width\">\n                                        <mat-label>Description</mat-label>\n                                        <input\n                                            matInput\n                                            name=\"{{content.id}}-content-description\"\n                                            [(ngModel)]=\"content.description\">\n                                    </mat-form-field>\n                                </ng-container>\n                                <ng-container *ngIf=\"content.additional\">\n                                    <ng-container *ngFor=\"let add of content.additional\">\n                                        <mat-form-field class=\"full-width\">\n                                            <mat-label>{{add.key}}</mat-label>\n                                            <input\n                                                matInput\n                                                name=\"{{content.id}}-content-{{add.key}}\"\n                                                [(ngModel)]=\"add.value\"\n                                                [disabled]=\"true\"\n                                                >\n                                        </mat-form-field>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngIf=\"!content.value\">\n                                    <button mat-raised-button (click)=startUploader(content)>Upload</button>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                    <button mat-raised-button (click)=removeContent(content)>Remove Content</button>\n                    <button mat-raised-button (click)=\"addContent(section)\">+ Add Content</button>\n                </div>\n                <button mat-raised-button (click)=\"removeSection(section)\">Remove Section</button>\n                <button mat-raised-button (click)=\"addContent(section)\" *ngIf=\"section.contents.length === 0\">+ Add\n                    Content\n                </button>\n                <button mat-raised-button (click)=\"addSection()\">+ Add Section</button>\n            </div>\n\n        </mat-card>\n        <button mat-raised-button (click)=\"addSection()\" *ngIf=\"entry.sections?.length === 0\">+ Add Section</button>\n        <button mat-raised-button (click)=\"addSection()\" *ngIf=\"!entry.sections\">+ Add Section</button>\n\n        <div class=\"controls\">\n            <button mat-raised-button (click)=\"resetDate()\">Reset the Date</button>\n            <button mat-raised-button (click)=\"delete()\">Delete</button>\n            <button mat-raised-button [disabled]=\"scheduling\" (click)=\"publish()\">Publish</button>\n            <button mat-raised-button [disabled]=\"scheduling\" (click)=\"exposeScheduling()\">Schedule</button>\n            <button mat-raised-button (click)=\"startNew()\">New</button>\n        </div>\n        <p *ngIf=\"scheduling\">Publishing is disabled while scheduling is being used.</p>\n\n        <mat-card [hidden]=\"!scheduling\">\n            <h4>\n               Scheduling Options\n            </h4>\n\n            <div class=\"form-group\">\n                <mat-form-field class=\"full-width\">\n                    <mat-label>Date</mat-label>\n                    <input\n                        #futurePublishDate\n                        matInput\n                        [matDatepicker]=\"picker\"\n                        [min]=\"today\"\n                        (dateInput)=\"onDateChange()\"\n                        (dateChange)=\"onDateChange()\"\n                        [(ngModel)]=\"entry.future_publish_date\"\n                        name=\"future-publish-date\"\n                    >\n                                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                    <mat-datepicker\n                        #picker></mat-datepicker>\n                </mat-form-field>\n\n                <mat-label>Time</mat-label>\n                <ngx-timepicker-field\n                    [defaultTime]=\"customScheduleTime\"\n                    [format]=\"12\"\n                    [buttonAlign]=\"'left'\"\n                    (timeChanged)=\"setTime($event)\"\n                ></ngx-timepicker-field>\n                <p>Times are represented in your local time zone</p>\n            </div>\n\n            <div mat-dialog-actions>\n                <div class=\"controls\">\n                    <button mat-raised-button (click)=\"cancelScheduling()\">Cancel Scheduling</button>\n                </div>\n            </div>\n            <p>This post will be published as soon as its scheduled date and time arrive. No further action is needed by you. If you do not\n            want to use scheduling, you can cancel scheduling and manually publish.</p>\n        </mat-card>\n    </form>\n    <div class=\"controls\">\n        <button mat-raised-button (click)=\"seeEntries()\">See Entries</button>\n        <button *ngIf=\"!this.entry\" mat-raised-button (click)=\"startNew()\">New</button>\n    </div>\n</div>\n", styles: [".creator{min-height:calc(100vh - 100px)}form{padding:20px}.content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}button{margin:4px}.radio-group{display:flex;flex-direction:column;margin:15px 0}.radio-button{margin:4px}.full-width{width:100%}.content-card{margin:0 0 10px}.form-section{margin-bottom:10px}.form-content:not(:last-child){border-bottom:1px dotted #aaa;padding-bottom:10px}.controls{display:inline-block;width:100%;padding:10px}[hidden]{display:none!important}\n"] }]
+            args: [{ selector: 'app-entry-creator', template: "<div class=\"section creator fields\">\n  <form #createForm=\"ngForm\" (change)=\"onChange()\" *ngIf=\"this.entry\">\n    <div class=\"form-group\">\n      <mat-form-field class=\"full-width\">\n        <mat-label>Title</mat-label>\n        <input matInput\n               [(ngModel)]=\"entry.title\"\n               name=\"title\">\n      </mat-form-field>\n    </div>\n    <mat-card class=\"form-section tags\">\n      <div>\n        <mat-form-field class=\"full-width\" hintLabel=\"Use a comma to seperate different tags\">\n          <mat-chip-listbox #tagList aria-label=\"Tags\">\n            <mat-chip-option\n                *ngFor=\"let tag of tags\"\n                [selectable]=\"selectable\"\n                [removable]=\"removable\"\n                (removed)=\"remove(tag)\">\n              {{tag}}\n              <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n            </mat-chip-option>\n            <input\n                matInput\n                placeholder=\"Tags...\"\n                #tagInput\n                [formControl]=\"tagCtrl\"\n                [matAutocomplete]=\"tagauto\"\n                [matChipInputFor]=\"tagList\"\n                [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                (matChipInputTokenEnd)=\"add($event)\">\n          </mat-chip-listbox>\n          <mat-autocomplete #tagauto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n            <mat-option *ngFor=\"let tag of filtered_tags | async\" [value]=\"tag\">\n              {{tag}}\n            </mat-option>\n          </mat-autocomplete>\n        </mat-form-field>\n      </div>\n    </mat-card>\n    <mat-card class=\"form-section\" *ngFor=\"let section of entry.sections\">\n      <div>\n        <mat-form-field class=\"full-width\">\n          <mat-label>Subheading</mat-label>\n          <input matInput\n                 [(ngModel)]=\"section.subheading\"\n                 name=\"{{section.id}}-subheading\">\n        </mat-form-field>\n        <div class=\"form-content\" *ngFor=\"let content of section.contents\">\n          <div class=\"form-group\">\n            <mat-radio-group\n                aria-label=\"Select the Content Type\"\n                name=\"{{content.id}}-content-type\"\n                class=\"radio-group\"\n                [(ngModel)]=\"content.type\">\n              <mat-radio-button\n                  *ngFor=\"let value of Object.values(ContentType)\"\n                  class=\"radio-button\"\n                  [value]=\"value\">{{value}}\n              </mat-radio-button>\n            </mat-radio-group>\n          </div>\n          <ng-container [ngSwitch]=\"content.type\">\n            <ng-container *ngSwitchCase=\"ContentType.URL\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-value\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Title</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-title\"\n                    [(ngModel)]=\"content.title\">\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.TEXT\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"3\"\n                          cdkAutosizeMaxRows=\"20\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.HTML\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"3\"\n                          cdkAutosizeMaxRows=\"20\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.CODE\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"10\"\n                          cdkAutosizeMaxRows=\"100\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.IMAGE\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-value\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-source\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Description</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-description\"\n                    [(ngModel)]=\"content.description\">\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.MEDIA\">\n              <div class=\"full-width\">\n                <ng-container *ngIf=\"content.value\">\n                  <mat-form-field class=\"full-width\">\n                    <mat-label>Value</mat-label>\n                    <input\n                        matInput\n                        name=\"{{content.id}}-content-value\"\n                        [(ngModel)]=\"content.value\">\n                  </mat-form-field>\n                  <mat-form-field class=\"full-width\">\n                    <mat-label>Description</mat-label>\n                    <input\n                        matInput\n                        name=\"{{content.id}}-content-description\"\n                        [(ngModel)]=\"content.description\">\n                  </mat-form-field>\n                </ng-container>\n                <ng-container *ngIf=\"content.additional\">\n                  <ng-container *ngFor=\"let add of content.additional\">\n                    <mat-form-field class=\"full-width\">\n                      <mat-label>{{add.key}}</mat-label>\n                      <input\n                          matInput\n                          name=\"{{content.id}}-content-{{add.key}}\"\n                          [(ngModel)]=\"add.value\"\n                          [disabled]=\"true\"\n                          >\n                    </mat-form-field>\n                  </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!content.value\">\n                  <button mat-raised-button (click)=startUploader(content)>Upload</button>\n                </ng-container>\n              </div>\n            </ng-container>\n          </ng-container>\n          <button mat-raised-button (click)=removeContent(content)>Remove Content</button>\n          <button mat-raised-button (click)=\"addContent(section)\">+ Add Content</button>\n        </div>\n        <button mat-raised-button (click)=\"removeSection(section)\">Remove Section</button>\n        <button mat-raised-button (click)=\"addContent(section)\" *ngIf=\"section.contents.length === 0\">+ Add\n          Content\n        </button>\n        <button mat-raised-button (click)=\"addSection()\">+ Add Section</button>\n      </div>\n\n    </mat-card>\n    <button mat-raised-button (click)=\"addSection()\" *ngIf=\"entry.sections?.length === 0\">+ Add Section</button>\n    <button mat-raised-button (click)=\"addSection()\" *ngIf=\"!entry.sections\">+ Add Section</button>\n\n    <div class=\"controls\">\n      <button mat-raised-button (click)=\"resetDate()\">Reset the Date</button>\n      <button mat-raised-button (click)=\"delete()\">Delete</button>\n      <button mat-raised-button [disabled]=\"scheduling\" (click)=\"publish()\">Publish</button>\n      <button mat-raised-button [disabled]=\"scheduling\" (click)=\"exposeScheduling()\">Schedule</button>\n      <button mat-raised-button (click)=\"startNew()\">New</button>\n    </div>\n    <p *ngIf=\"scheduling\">Publishing is disabled while scheduling is being used.</p>\n\n    <mat-card [hidden]=\"!scheduling\">\n      <h4>\n        Scheduling Options\n      </h4>\n\n      <div class=\"form-group\">\n        <mat-form-field class=\"full-width\">\n          <mat-label>Date</mat-label>\n          <input\n              #futurePublishDate\n              matInput\n              [matDatepicker]=\"picker\"\n              [min]=\"today\"\n              (dateInput)=\"onDateChange()\"\n              (dateChange)=\"onDateChange()\"\n              [(ngModel)]=\"entry.future_publish_date\"\n              name=\"future-publish-date\"\n              >\n              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n              <mat-datepicker\n                  #picker></mat-datepicker>\n        </mat-form-field>\n\n        <mat-label>Time</mat-label>\n        <ngx-timepicker-field\n            [defaultTime]=\"customScheduleTime\"\n            [format]=\"12\"\n            [buttonAlign]=\"'left'\"\n            (timeChanged)=\"setTime($event)\"\n            ></ngx-timepicker-field>\n        <p>Times are represented in your local time zone</p>\n      </div>\n\n      <div mat-dialog-actions>\n        <div class=\"controls\">\n          <button mat-raised-button (click)=\"cancelScheduling()\">Cancel Scheduling</button>\n        </div>\n      </div>\n      <p>This post will be published as soon as its scheduled date and time arrive. No further action is needed by you. If you do not\n      want to use scheduling, you can cancel scheduling and manually publish.</p>\n    </mat-card>\n  </form>\n  <div class=\"controls\">\n    <button mat-raised-button (click)=\"seeEntries()\">See Entries</button>\n    <button *ngIf=\"!this.entry\" mat-raised-button (click)=\"startNew()\">New</button>\n  </div>\n</div>\n", styles: [".creator{min-height:calc(100vh - 100px)}form{padding:20px}.content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}button{margin:4px}.radio-group{display:flex;flex-direction:column;margin:15px 0}.radio-button{margin:4px}.full-width{width:100%}.content-card{margin:0 0 10px}.form-section{margin-bottom:10px}.form-content:not(:last-child){border-bottom:1px dotted #aaa;padding-bottom:10px}.controls{display:inline-block;width:100%;padding:10px}[hidden]{display:none!important}\n"] }]
         }], ctorParameters: function () { return [{ type: EntryService }, { type: TagService }, { type: IdentityService }, { type: i0.ChangeDetectorRef }, { type: i1$2.MatDialog }]; }, propDecorators: { tagInput: [{
                 type: ViewChild,
                 args: ['tagInput']
@@ -1252,10 +1262,10 @@ class EntryRendererComponent {
     }
 }
 EntryRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: EntryRendererComponent, deps: [{ token: PrismService }, { token: i0.NgZone }, { token: IdentityService }, { token: CommentService }, { token: i1$4.Router }, { token: EntryService }], target: i0.ɵɵFactoryTarget.Component });
-EntryRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: EntryRendererComponent, selector: "app-entry-renderer", inputs: { entry: "entry", editMode: "editMode" }, ngImport: i0, template: "<div>\n    <h2>{{entry?.title}}</h2>\n    <a *ngIf=\"me?.id === entry?.getProp('author_id')\" href=\"javascript:void(0)\" (click)=\"edit(entry)\"><h4>[Edit]</h4></a>\n    <h3>Posted {{entry?.create_date.toString() | timeAgo}} on {{entry?.create_date?.getMonth() + 1}}/{{entry?.create_date?.getDate()}}/{{entry?.create_date?.getFullYear()}}</h3>\n    <h5 *ngIf=\"entry?.showEditInformation()\">Article was last edited {{entry?.edit_date.toString() | timeAgo}}</h5>\n    <br>\n    <p *ngIf=\"entry?.tags?.length > 0\">Tags: <span *ngFor=\"let tag of entry?.tags; let last = last\">{{tag}}<ng-container *ngIf=\"!last\"> |\n        </ng-container></span><span *ngIf=\"entry?.views\">, {{entry._friendly_views}} views</span></p>\n    <br>\n\n    <ng-container *ngFor=\"let section of entry?.sections\">\n        <h4>{{section?.subheading}}</h4>\n        <ng-container *ngFor=\"let content of section?.contents\">\n            <ng-container [ngSwitch]=\"content.type\">\n                <ng-container *ngSwitchCase=\"ContentType.CODE\">\n                    <pre><code class=\"language-ts\">{{content?.value}}</code></pre>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"ContentType.URL\">\n                    <a [href]=\"content?.value\" target=\"_blank\">{{content.title}}</a><br>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"ContentType.IMAGE\">\n                    <div class=\"restrict\">\n                        <div class=\"image\">\n                            <img [src]=\"content?.value\"/>\n                        </div>\n                        <div class=\"description\" *ngIf=\"content?.description\">{{content?.description}}</div>\n                        <div class=\"source\" *ngIf=\"content?.source\">\n                            <a [href]=\"content?.source\" [target]=\"'_blank'\">Source: {{content?.source}}</a>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngSwitchCase=\"ContentType.MEDIA\">\n                    <ng-container *ngIf=\"mediaIsZip(content)\">\n                        <div class=\"download\">\n                            <a href=\"content?.value\">{{content?.description}}</a>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"!mediaIsZip(content)\">\n                        <div class=\"restrict\">\n                            <div class=\"image\">\n                                <img [src]=\"content?.value\"/>\n                            </div>\n                            <div class=\"description\" *ngIf=\"content?.description\">{{content?.description}}</div>\n                            <div class=\"source\" *ngIf=\"content?.source\">\n                                <a [href]=\"content?.source\" [target]=\"'_blank'\">Source: {{content?.source}}</a>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"ContentType.HTML\">\n                    <app-static-html\n                        [value]=\"content?.value\"\n                        >\n                    </app-static-html>\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                    <p>{{content?.value}}</p>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n    <ng-container>\n        <h2>Comments</h2>\n        <p *ngIf=\"comments?.length == 0\">There are no comments yet.</p>\n        <ng-container *ngIf=\"comments?.length > 0\">\n            <div *ngFor=\"let comment of comments\">\n                <mat-card style=\"margin-bottom: 20px;\" class=\"restrict\">\n                    <mat-card-title><img class=\"gravatar\" src=\"{{comment.gravatar_url}} + ?s=30\"> {{comment.user_display_name}}</mat-card-title>\n                    <mat-card-subtitle>{{comment.date_obj | timeAgo}}</mat-card-subtitle>\n                    <mat-card-content>\n                        <p>{{comment.content}}</p>\n                        <ng-container *ngIf=\"me?.id === entry?.__server_generated_properties?.author_id\">\n                            <a href=\"javascript:void(0);\" *ngIf=\"!comment?.approved\" (click)=\"approve(comment)\">Approve</a>\n                            <a href=\"javascript:void(0);\" *ngIf=\"comment?.approved\" (click)=\"unapprove(comment)\">Unapprove</a>\n                        </ng-container>\n                    </mat-card-content>\n                </mat-card>\n            </div>\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!me\">\n        <a href=\"/signup\">Signup</a> or <a href=\"/login\">login</a> to join the conversation!\n    </ng-container>\n    <ng-container *ngIf=\"me && !me?.comments_public\">\n        <p>Note, your comments will not be public be default. It is possible I will make your comments public, but for now comments are just between you and me.</p>\n    </ng-container>\n    <ng-container *ngIf=\"me\">\n        <h2 style=\"width: 100%;\">Leave a Comment</h2>\n        <br>\n        <mat-form-field class=\"restrict\" style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Comment</mat-label>\n            <textarea [(ngModel)]=\"commentText\" (keydown.enter)=\"postComment($event)\" matInput></textarea>\n        </mat-form-field>\n        <br>\n        <button (click)=\"postComment($event)\" style=\"text-align: right;\" mat-button>Submit</button>\n    </ng-container>\n    <div style=\"margin-bottom: 30px;\"></div>\n</div>\n\n", styles: [".image{width:100%;text-align:center;justify-content:center}.source,.description{text-align:center;font-size:12px}.gravatar{margin-right:20px}.smaller{text-size:12px;text-color:gray}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i8.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i8.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "component", type: StaticHtmlComponent, selector: "app-static-html", inputs: ["value"] }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }] });
+EntryRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: EntryRendererComponent, selector: "app-entry-renderer", inputs: { entry: "entry", editMode: "editMode" }, ngImport: i0, template: "<div *ngIf=\"entry\">\n    <h2>{{entry?.title}}</h2>\n    <a *ngIf=\"me?.id === entry?.getProp('author_id')\" href=\"javascript:void(0)\" (click)=\"edit(entry)\"><h4>[Edit]</h4></a>\n    <h3>Posted {{entry?.create_date.toString() | timeAgo}} on {{entry?.create_date?.getMonth() + 1}}/{{entry?.create_date?.getDate()}}/{{entry?.create_date?.getFullYear()}}</h3>\n    <h5 *ngIf=\"entry?.showEditInformation()\">Article was last edited {{entry?.edit_date.toString() | timeAgo}}</h5>\n    <br>\n    <p *ngIf=\"entry?.tags?.length > 0\">Tags: <span *ngFor=\"let tag of entry?.tags; let last = last\">{{tag}}<ng-container *ngIf=\"!last\"> |\n        </ng-container></span><span *ngIf=\"entry?.views\">, {{entry._friendly_views}} views</span></p>\n    <br>\n\n    <ng-container *ngFor=\"let section of entry?.sections\">\n        <h4>{{section?.subheading}}</h4>\n        <ng-container *ngFor=\"let content of section?.contents\">\n            <ng-container [ngSwitch]=\"content.type\">\n                <ng-container *ngSwitchCase=\"ContentType.CODE\">\n                    <pre><code class=\"language-ts\">{{content?.value}}</code></pre>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"ContentType.URL\">\n                    <a [href]=\"content?.value\" target=\"_blank\">{{content.title}}</a><br>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"ContentType.IMAGE\">\n                    <div class=\"restrict\">\n                        <div class=\"image\">\n                            <img [src]=\"content?.value\"/>\n                        </div>\n                        <div class=\"description\" *ngIf=\"content?.description\">{{content?.description}}</div>\n                        <div class=\"source\" *ngIf=\"content?.source\">\n                            <a [href]=\"content?.source\" [target]=\"'_blank'\">Source: {{content?.source}}</a>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngSwitchCase=\"ContentType.MEDIA\">\n                    <ng-container *ngIf=\"mediaIsZip(content)\">\n                        <div class=\"download\">\n                            <a href=\"content?.value\">{{content?.description}}</a>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"!mediaIsZip(content)\">\n                        <div class=\"restrict\">\n                            <div class=\"image\">\n                                <img [src]=\"content?.value\"/>\n                            </div>\n                            <div class=\"description\" *ngIf=\"content?.description\">{{content?.description}}</div>\n                            <div class=\"source\" *ngIf=\"content?.source\">\n                                <a [href]=\"content?.source\" [target]=\"'_blank'\">Source: {{content?.source}}</a>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"ContentType.HTML\">\n                    <app-static-html\n                        [value]=\"content?.value\"\n                        >\n                    </app-static-html>\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                    <p>{{content?.value}}</p>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n    <ng-container>\n        <h2>Comments</h2>\n        <p *ngIf=\"comments?.length == 0\">There are no comments yet.</p>\n        <ng-container *ngIf=\"comments?.length > 0\">\n            <div *ngFor=\"let comment of comments\">\n                <mat-card style=\"margin-bottom: 20px;\" class=\"restrict\">\n                    <mat-card-title><img class=\"gravatar\" src=\"{{comment.gravatar_url}} + ?s=30\"> {{comment.user_display_name}}</mat-card-title>\n                    <mat-card-subtitle>{{comment.date_obj | timeAgo}}</mat-card-subtitle>\n                    <mat-card-content>\n                        <p>{{comment.content}}</p>\n                        <ng-container *ngIf=\"me?.id === entry?.__server_generated_properties?.author_id\">\n                            <a href=\"javascript:void(0);\" *ngIf=\"!comment?.approved\" (click)=\"approve(comment)\">Approve</a>\n                            <a href=\"javascript:void(0);\" *ngIf=\"comment?.approved\" (click)=\"unapprove(comment)\">Unapprove</a>\n                        </ng-container>\n                    </mat-card-content>\n                </mat-card>\n            </div>\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!me\">\n        <a href=\"/signup\">Signup</a> or <a href=\"/login\">login</a> to join the conversation!\n    </ng-container>\n    <ng-container *ngIf=\"me && !me?.comments_public\">\n        <p>Note, your comments will not be public be default. It is possible I will make your comments public, but for now comments are just between you and me.</p>\n    </ng-container>\n    <ng-container *ngIf=\"me\">\n        <h2 style=\"width: 100%;\">Leave a Comment</h2>\n        <br>\n        <mat-form-field class=\"restrict\" style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Comment</mat-label>\n            <textarea [(ngModel)]=\"commentText\" (keydown.enter)=\"postComment($event)\" matInput></textarea>\n        </mat-form-field>\n        <br>\n        <button (click)=\"postComment($event)\" style=\"text-align: right;\" mat-button>Submit</button>\n    </ng-container>\n    <div style=\"margin-bottom: 30px;\"></div>\n</div>\n\n", styles: [".image{width:100%;text-align:center;justify-content:center}.source,.description{text-align:center;font-size:12px}.gravatar{margin-right:20px}.smaller{text-size:12px;text-color:gray}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i8.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i8.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "component", type: StaticHtmlComponent, selector: "app-static-html", inputs: ["value"] }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: EntryRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-entry-renderer', template: "<div>\n    <h2>{{entry?.title}}</h2>\n    <a *ngIf=\"me?.id === entry?.getProp('author_id')\" href=\"javascript:void(0)\" (click)=\"edit(entry)\"><h4>[Edit]</h4></a>\n    <h3>Posted {{entry?.create_date.toString() | timeAgo}} on {{entry?.create_date?.getMonth() + 1}}/{{entry?.create_date?.getDate()}}/{{entry?.create_date?.getFullYear()}}</h3>\n    <h5 *ngIf=\"entry?.showEditInformation()\">Article was last edited {{entry?.edit_date.toString() | timeAgo}}</h5>\n    <br>\n    <p *ngIf=\"entry?.tags?.length > 0\">Tags: <span *ngFor=\"let tag of entry?.tags; let last = last\">{{tag}}<ng-container *ngIf=\"!last\"> |\n        </ng-container></span><span *ngIf=\"entry?.views\">, {{entry._friendly_views}} views</span></p>\n    <br>\n\n    <ng-container *ngFor=\"let section of entry?.sections\">\n        <h4>{{section?.subheading}}</h4>\n        <ng-container *ngFor=\"let content of section?.contents\">\n            <ng-container [ngSwitch]=\"content.type\">\n                <ng-container *ngSwitchCase=\"ContentType.CODE\">\n                    <pre><code class=\"language-ts\">{{content?.value}}</code></pre>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"ContentType.URL\">\n                    <a [href]=\"content?.value\" target=\"_blank\">{{content.title}}</a><br>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"ContentType.IMAGE\">\n                    <div class=\"restrict\">\n                        <div class=\"image\">\n                            <img [src]=\"content?.value\"/>\n                        </div>\n                        <div class=\"description\" *ngIf=\"content?.description\">{{content?.description}}</div>\n                        <div class=\"source\" *ngIf=\"content?.source\">\n                            <a [href]=\"content?.source\" [target]=\"'_blank'\">Source: {{content?.source}}</a>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngSwitchCase=\"ContentType.MEDIA\">\n                    <ng-container *ngIf=\"mediaIsZip(content)\">\n                        <div class=\"download\">\n                            <a href=\"content?.value\">{{content?.description}}</a>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"!mediaIsZip(content)\">\n                        <div class=\"restrict\">\n                            <div class=\"image\">\n                                <img [src]=\"content?.value\"/>\n                            </div>\n                            <div class=\"description\" *ngIf=\"content?.description\">{{content?.description}}</div>\n                            <div class=\"source\" *ngIf=\"content?.source\">\n                                <a [href]=\"content?.source\" [target]=\"'_blank'\">Source: {{content?.source}}</a>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"ContentType.HTML\">\n                    <app-static-html\n                        [value]=\"content?.value\"\n                        >\n                    </app-static-html>\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                    <p>{{content?.value}}</p>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n    <ng-container>\n        <h2>Comments</h2>\n        <p *ngIf=\"comments?.length == 0\">There are no comments yet.</p>\n        <ng-container *ngIf=\"comments?.length > 0\">\n            <div *ngFor=\"let comment of comments\">\n                <mat-card style=\"margin-bottom: 20px;\" class=\"restrict\">\n                    <mat-card-title><img class=\"gravatar\" src=\"{{comment.gravatar_url}} + ?s=30\"> {{comment.user_display_name}}</mat-card-title>\n                    <mat-card-subtitle>{{comment.date_obj | timeAgo}}</mat-card-subtitle>\n                    <mat-card-content>\n                        <p>{{comment.content}}</p>\n                        <ng-container *ngIf=\"me?.id === entry?.__server_generated_properties?.author_id\">\n                            <a href=\"javascript:void(0);\" *ngIf=\"!comment?.approved\" (click)=\"approve(comment)\">Approve</a>\n                            <a href=\"javascript:void(0);\" *ngIf=\"comment?.approved\" (click)=\"unapprove(comment)\">Unapprove</a>\n                        </ng-container>\n                    </mat-card-content>\n                </mat-card>\n            </div>\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!me\">\n        <a href=\"/signup\">Signup</a> or <a href=\"/login\">login</a> to join the conversation!\n    </ng-container>\n    <ng-container *ngIf=\"me && !me?.comments_public\">\n        <p>Note, your comments will not be public be default. It is possible I will make your comments public, but for now comments are just between you and me.</p>\n    </ng-container>\n    <ng-container *ngIf=\"me\">\n        <h2 style=\"width: 100%;\">Leave a Comment</h2>\n        <br>\n        <mat-form-field class=\"restrict\" style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Comment</mat-label>\n            <textarea [(ngModel)]=\"commentText\" (keydown.enter)=\"postComment($event)\" matInput></textarea>\n        </mat-form-field>\n        <br>\n        <button (click)=\"postComment($event)\" style=\"text-align: right;\" mat-button>Submit</button>\n    </ng-container>\n    <div style=\"margin-bottom: 30px;\"></div>\n</div>\n\n", styles: [".image{width:100%;text-align:center;justify-content:center}.source,.description{text-align:center;font-size:12px}.gravatar{margin-right:20px}.smaller{text-size:12px;text-color:gray}\n"] }]
+            args: [{ selector: 'app-entry-renderer', template: "<div *ngIf=\"entry\">\n    <h2>{{entry?.title}}</h2>\n    <a *ngIf=\"me?.id === entry?.getProp('author_id')\" href=\"javascript:void(0)\" (click)=\"edit(entry)\"><h4>[Edit]</h4></a>\n    <h3>Posted {{entry?.create_date.toString() | timeAgo}} on {{entry?.create_date?.getMonth() + 1}}/{{entry?.create_date?.getDate()}}/{{entry?.create_date?.getFullYear()}}</h3>\n    <h5 *ngIf=\"entry?.showEditInformation()\">Article was last edited {{entry?.edit_date.toString() | timeAgo}}</h5>\n    <br>\n    <p *ngIf=\"entry?.tags?.length > 0\">Tags: <span *ngFor=\"let tag of entry?.tags; let last = last\">{{tag}}<ng-container *ngIf=\"!last\"> |\n        </ng-container></span><span *ngIf=\"entry?.views\">, {{entry._friendly_views}} views</span></p>\n    <br>\n\n    <ng-container *ngFor=\"let section of entry?.sections\">\n        <h4>{{section?.subheading}}</h4>\n        <ng-container *ngFor=\"let content of section?.contents\">\n            <ng-container [ngSwitch]=\"content.type\">\n                <ng-container *ngSwitchCase=\"ContentType.CODE\">\n                    <pre><code class=\"language-ts\">{{content?.value}}</code></pre>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"ContentType.URL\">\n                    <a [href]=\"content?.value\" target=\"_blank\">{{content.title}}</a><br>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"ContentType.IMAGE\">\n                    <div class=\"restrict\">\n                        <div class=\"image\">\n                            <img [src]=\"content?.value\"/>\n                        </div>\n                        <div class=\"description\" *ngIf=\"content?.description\">{{content?.description}}</div>\n                        <div class=\"source\" *ngIf=\"content?.source\">\n                            <a [href]=\"content?.source\" [target]=\"'_blank'\">Source: {{content?.source}}</a>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngSwitchCase=\"ContentType.MEDIA\">\n                    <ng-container *ngIf=\"mediaIsZip(content)\">\n                        <div class=\"download\">\n                            <a href=\"content?.value\">{{content?.description}}</a>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"!mediaIsZip(content)\">\n                        <div class=\"restrict\">\n                            <div class=\"image\">\n                                <img [src]=\"content?.value\"/>\n                            </div>\n                            <div class=\"description\" *ngIf=\"content?.description\">{{content?.description}}</div>\n                            <div class=\"source\" *ngIf=\"content?.source\">\n                                <a [href]=\"content?.source\" [target]=\"'_blank'\">Source: {{content?.source}}</a>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"ContentType.HTML\">\n                    <app-static-html\n                        [value]=\"content?.value\"\n                        >\n                    </app-static-html>\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                    <p>{{content?.value}}</p>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n    <ng-container>\n        <h2>Comments</h2>\n        <p *ngIf=\"comments?.length == 0\">There are no comments yet.</p>\n        <ng-container *ngIf=\"comments?.length > 0\">\n            <div *ngFor=\"let comment of comments\">\n                <mat-card style=\"margin-bottom: 20px;\" class=\"restrict\">\n                    <mat-card-title><img class=\"gravatar\" src=\"{{comment.gravatar_url}} + ?s=30\"> {{comment.user_display_name}}</mat-card-title>\n                    <mat-card-subtitle>{{comment.date_obj | timeAgo}}</mat-card-subtitle>\n                    <mat-card-content>\n                        <p>{{comment.content}}</p>\n                        <ng-container *ngIf=\"me?.id === entry?.__server_generated_properties?.author_id\">\n                            <a href=\"javascript:void(0);\" *ngIf=\"!comment?.approved\" (click)=\"approve(comment)\">Approve</a>\n                            <a href=\"javascript:void(0);\" *ngIf=\"comment?.approved\" (click)=\"unapprove(comment)\">Unapprove</a>\n                        </ng-container>\n                    </mat-card-content>\n                </mat-card>\n            </div>\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!me\">\n        <a href=\"/signup\">Signup</a> or <a href=\"/login\">login</a> to join the conversation!\n    </ng-container>\n    <ng-container *ngIf=\"me && !me?.comments_public\">\n        <p>Note, your comments will not be public be default. It is possible I will make your comments public, but for now comments are just between you and me.</p>\n    </ng-container>\n    <ng-container *ngIf=\"me\">\n        <h2 style=\"width: 100%;\">Leave a Comment</h2>\n        <br>\n        <mat-form-field class=\"restrict\" style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Comment</mat-label>\n            <textarea [(ngModel)]=\"commentText\" (keydown.enter)=\"postComment($event)\" matInput></textarea>\n        </mat-form-field>\n        <br>\n        <button (click)=\"postComment($event)\" style=\"text-align: right;\" mat-button>Submit</button>\n    </ng-container>\n    <div style=\"margin-bottom: 30px;\"></div>\n</div>\n\n", styles: [".image{width:100%;text-align:center;justify-content:center}.source,.description{text-align:center;font-size:12px}.gravatar{margin-right:20px}.smaller{text-size:12px;text-color:gray}\n"] }]
         }], ctorParameters: function () { return [{ type: PrismService }, { type: i0.NgZone }, { type: IdentityService }, { type: CommentService }, { type: i1$4.Router }, { type: EntryService }]; }, propDecorators: { entry: [{
                 type: Input
             }], editMode: [{
@@ -1287,19 +1297,19 @@ class JsonRendererComponent {
     constructor(entryService) {
         this.entryService = entryService;
         this.JSON = JSON;
-        this.entry = new Entry();
     }
     ngOnInit() {
         this.entryService.currentlyEditedEntry.subscribe((entry) => {
+            console.log(entry);
             this.entry = entry;
         });
     }
 }
 JsonRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: JsonRendererComponent, deps: [{ token: EntryService }], target: i0.ɵɵFactoryTarget.Component });
-JsonRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: JsonRendererComponent, selector: "app-json-renderer", inputs: { entry: "entry" }, ngImport: i0, template: "<div class=\"section json-render json\">\n    <app-entry-renderer [editMode]=\"true\" [entry]=\"entry\"></app-entry-renderer>\n    <pre>{{JSON.stringify(entry)}}</pre>\n</div>\n", styles: [".json pre{white-space:pre-wrap;word-wrap:anywhere}.json-render{padding:0 20px}\n"], dependencies: [{ kind: "component", type: EntryRendererComponent, selector: "app-entry-renderer", inputs: ["entry", "editMode"] }] });
+JsonRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: JsonRendererComponent, selector: "app-json-renderer", inputs: { entry: "entry" }, ngImport: i0, template: "<div class=\"section json-render json\">\n    <app-entry-renderer [editMode]=\"true\" [entry]=\"entry\"></app-entry-renderer>\n    <pre *ngIf=\"entry\">{{JSON.stringify(entry)}}</pre>\n</div>\n", styles: [".json pre{white-space:pre-wrap;word-wrap:anywhere}.json-render{padding:0 20px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EntryRendererComponent, selector: "app-entry-renderer", inputs: ["entry", "editMode"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: JsonRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-json-renderer', template: "<div class=\"section json-render json\">\n    <app-entry-renderer [editMode]=\"true\" [entry]=\"entry\"></app-entry-renderer>\n    <pre>{{JSON.stringify(entry)}}</pre>\n</div>\n", styles: [".json pre{white-space:pre-wrap;word-wrap:anywhere}.json-render{padding:0 20px}\n"] }]
+            args: [{ selector: 'app-json-renderer', template: "<div class=\"section json-render json\">\n    <app-entry-renderer [editMode]=\"true\" [entry]=\"entry\"></app-entry-renderer>\n    <pre *ngIf=\"entry\">{{JSON.stringify(entry)}}</pre>\n</div>\n", styles: [".json pre{white-space:pre-wrap;word-wrap:anywhere}.json-render{padding:0 20px}\n"] }]
         }], ctorParameters: function () { return [{ type: EntryService }]; }, propDecorators: { entry: [{
                 type: Input
             }] } });
@@ -1334,7 +1344,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 class OutlineViewComponent {
     constructor(entryService) {
         this.entryService = entryService;
-        this.entry = new Entry();
         this.Math = Math;
     }
     ngOnInit() {
@@ -1358,10 +1367,10 @@ class OutlineViewComponent {
     }
 }
 OutlineViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: OutlineViewComponent, deps: [{ token: EntryService }], target: i0.ɵɵFactoryTarget.Component });
-OutlineViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: OutlineViewComponent, selector: "app-outline-view", ngImport: i0, template: "<div class=\"section outline\">\n    <h1 *ngIf=\"entry?.sections?.length === 0\">Outline View</h1>\n    <div cdkDropList class=\"sections\" (cdkDropListDropped)=\"sectionDrop($event)\">\n        <mat-card class=\"card\" cdkDrag *ngFor=\"let section of entry.sections\">\n            <h3>Section {{Math.ceil(section.order / 10) + 1}}</h3>\n            {{section.subheading}}\n            <div cdkDropList class=\"contents\" (cdkDropListDropped)=\"contentDrop($event, section)\">\n                <h3>Contents for {{section.subheading}}</h3>\n                <div class=\"content-card\" *ngFor=\"let content of section.contents\" cdkDrag>\n                    <div class=\"content\">{{content.value}}</div>\n                    <div class=\"content-placeholder\" *cdkDragPlaceholder></div>\n                </div>\n            </div>\n        </mat-card>\n        <div class=\"custom-placeholder\" *cdkDragPlaceholder></div>\n    </div>\n</div>\n", styles: [".outline{padding:0 20px}.content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.card,.content-card{margin:4px;cursor:pointer}.content-card:not(:last-child){border-bottom:1px dotted #aaa}.custom-placeholder{background:#ccc;border:dotted 3px #999;transition:transform .25s cubic-bezier(0,0,.2,1);min-height:60px}.content-placeholder{background:#ccc;border:dotted 3px #999;transition:transform .25s cubic-bezier(0,0,.2,1);min-height:30px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }] });
+OutlineViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: OutlineViewComponent, selector: "app-outline-view", ngImport: i0, template: "<div *ngIf=\"entry\" class=\"section outline\">\n    <h1 *ngIf=\"entry?.sections?.length === 0\">Outline View</h1>\n    <div cdkDropList class=\"sections\" (cdkDropListDropped)=\"sectionDrop($event)\">\n        <mat-card class=\"card\" cdkDrag *ngFor=\"let section of entry.sections\">\n            <h3>Section {{Math.ceil(section.order / 10) + 1}}</h3>\n            {{section.subheading}}\n            <div cdkDropList class=\"contents\" (cdkDropListDropped)=\"contentDrop($event, section)\">\n                <h3>Contents for {{section.subheading}}</h3>\n                <div class=\"content-card\" *ngFor=\"let content of section.contents\" cdkDrag>\n                    <div class=\"content\">{{content.value}}</div>\n                    <div class=\"content-placeholder\" *cdkDragPlaceholder></div>\n                </div>\n            </div>\n        </mat-card>\n        <div class=\"custom-placeholder\" *cdkDragPlaceholder></div>\n    </div>\n</div>\n", styles: [".outline{padding:0 20px}.content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.card,.content-card{margin:4px;cursor:pointer}.content-card:not(:last-child){border-bottom:1px dotted #aaa}.custom-placeholder{background:#ccc;border:dotted 3px #999;transition:transform .25s cubic-bezier(0,0,.2,1);min-height:60px}.content-placeholder{background:#ccc;border:dotted 3px #999;transition:transform .25s cubic-bezier(0,0,.2,1);min-height:30px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: OutlineViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-outline-view', template: "<div class=\"section outline\">\n    <h1 *ngIf=\"entry?.sections?.length === 0\">Outline View</h1>\n    <div cdkDropList class=\"sections\" (cdkDropListDropped)=\"sectionDrop($event)\">\n        <mat-card class=\"card\" cdkDrag *ngFor=\"let section of entry.sections\">\n            <h3>Section {{Math.ceil(section.order / 10) + 1}}</h3>\n            {{section.subheading}}\n            <div cdkDropList class=\"contents\" (cdkDropListDropped)=\"contentDrop($event, section)\">\n                <h3>Contents for {{section.subheading}}</h3>\n                <div class=\"content-card\" *ngFor=\"let content of section.contents\" cdkDrag>\n                    <div class=\"content\">{{content.value}}</div>\n                    <div class=\"content-placeholder\" *cdkDragPlaceholder></div>\n                </div>\n            </div>\n        </mat-card>\n        <div class=\"custom-placeholder\" *cdkDragPlaceholder></div>\n    </div>\n</div>\n", styles: [".outline{padding:0 20px}.content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.card,.content-card{margin:4px;cursor:pointer}.content-card:not(:last-child){border-bottom:1px dotted #aaa}.custom-placeholder{background:#ccc;border:dotted 3px #999;transition:transform .25s cubic-bezier(0,0,.2,1);min-height:60px}.content-placeholder{background:#ccc;border:dotted 3px #999;transition:transform .25s cubic-bezier(0,0,.2,1);min-height:30px}\n"] }]
+            args: [{ selector: 'app-outline-view', template: "<div *ngIf=\"entry\" class=\"section outline\">\n    <h1 *ngIf=\"entry?.sections?.length === 0\">Outline View</h1>\n    <div cdkDropList class=\"sections\" (cdkDropListDropped)=\"sectionDrop($event)\">\n        <mat-card class=\"card\" cdkDrag *ngFor=\"let section of entry.sections\">\n            <h3>Section {{Math.ceil(section.order / 10) + 1}}</h3>\n            {{section.subheading}}\n            <div cdkDropList class=\"contents\" (cdkDropListDropped)=\"contentDrop($event, section)\">\n                <h3>Contents for {{section.subheading}}</h3>\n                <div class=\"content-card\" *ngFor=\"let content of section.contents\" cdkDrag>\n                    <div class=\"content\">{{content.value}}</div>\n                    <div class=\"content-placeholder\" *cdkDragPlaceholder></div>\n                </div>\n            </div>\n        </mat-card>\n        <div class=\"custom-placeholder\" *cdkDragPlaceholder></div>\n    </div>\n</div>\n", styles: [".outline{padding:0 20px}.content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.card,.content-card{margin:4px;cursor:pointer}.content-card:not(:last-child){border-bottom:1px dotted #aaa}.custom-placeholder{background:#ccc;border:dotted 3px #999;transition:transform .25s cubic-bezier(0,0,.2,1);min-height:60px}.content-placeholder{background:#ccc;border:dotted 3px #999;transition:transform .25s cubic-bezier(0,0,.2,1);min-height:30px}\n"] }]
         }], ctorParameters: function () { return [{ type: EntryService }]; } });
 
 class SideNavigationComponent {
@@ -1499,7 +1508,7 @@ class SideNavigationComponent {
     }
 }
 SideNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SideNavigationComponent, deps: [{ token: EntryService }, { token: i1$4.Router }, { token: IdentityService }], target: i0.ɵɵFactoryTarget.Component });
-SideNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SideNavigationComponent, selector: "app-side-navigation", ngImport: i0, template: "<div class=\"sidenav no-scrollbar\">\n    <mat-nav-list *ngFor=\"let container of entriesByMonthAndYear\">\n        <h3>{{getMonthAndYearFromKey(container.month_year)}}</h3>\n        <a mat-list-item *ngFor=\"let entry of container.entries\" href=\"javascript:void(0)\" (click)=\"routeTo(entry)\">{{entry.title}}</a>\n    </mat-nav-list>\n\n    <ng-container *ngIf=\"identity?.id === 1\">\n        <h2>Misc</h2>\n\n        <mat-nav-list>\n            <a mat-list-item href=\"javascript:void(0);\" (click)=\"routeTo(null)\">Create</a>\n        </mat-nav-list>\n    </ng-container>\n    <h3 *ngIf=\"identity\">Logged in as {{identity?.email}}</h3>\n</div>\n\n", styles: [".sidenav{max-height:calc(100vh - 100px)}@media screen and (max-height: 560px){.sidenav{max-height:100vh}}h2,h3{margin-left:10px;justify-content:right}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] });
+SideNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SideNavigationComponent, selector: "app-side-navigation", ngImport: i0, template: "<div class=\"sidenav no-scrollbar\">\n    <mat-nav-list *ngFor=\"let container of entriesByMonthAndYear\">\n        <h3>{{getMonthAndYearFromKey(container.month_year)}}</h3>\n        <a mat-list-item *ngFor=\"let entry of container.entries\" href=\"javascript:void(0)\" (click)=\"routeTo(entry)\">{{entry.title}}</a>\n    </mat-nav-list>\n\n    <ng-container *ngIf=\"identity?.id === 1\">\n        <h2>Misc</h2>\n\n        <mat-nav-list>\n            <a mat-list-item href=\"javascript:void(0);\" (click)=\"routeTo(null)\">Create</a>\n        </mat-nav-list>\n    </ng-container>\n    <h3 *ngIf=\"identity\">Logged in as {{identity?.email}}</h3>\n</div>\n\n", styles: [".sidenav{max-height:calc(100vh - 100px)}@media screen and (max-height: 560px){.sidenav{max-height:100vh}}h2,h3{margin-left:10px;justify-content:right}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SideNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-side-navigation', template: "<div class=\"sidenav no-scrollbar\">\n    <mat-nav-list *ngFor=\"let container of entriesByMonthAndYear\">\n        <h3>{{getMonthAndYearFromKey(container.month_year)}}</h3>\n        <a mat-list-item *ngFor=\"let entry of container.entries\" href=\"javascript:void(0)\" (click)=\"routeTo(entry)\">{{entry.title}}</a>\n    </mat-nav-list>\n\n    <ng-container *ngIf=\"identity?.id === 1\">\n        <h2>Misc</h2>\n\n        <mat-nav-list>\n            <a mat-list-item href=\"javascript:void(0);\" (click)=\"routeTo(null)\">Create</a>\n        </mat-nav-list>\n    </ng-container>\n    <h3 *ngIf=\"identity\">Logged in as {{identity?.email}}</h3>\n</div>\n\n", styles: [".sidenav{max-height:calc(100vh - 100px)}@media screen and (max-height: 560px){.sidenav{max-height:100vh}}h2,h3{margin-left:10px;justify-content:right}\n"] }]
@@ -1713,6 +1722,7 @@ CoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15
         MatIconModule,
         MatDatepickerModule,
         MatNativeDateModule,
+        MatTableModule,
         FontAwesomeModule,
         FileUploadModule,
         NgxMaterialTimepickerModule], exports: [EntryRendererComponent,
@@ -1756,6 +1766,7 @@ CoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15
         MatIconModule,
         MatDatepickerModule,
         MatNativeDateModule,
+        MatTableModule,
         FontAwesomeModule,
         FileUploadModule,
         NgxMaterialTimepickerModule] });
@@ -1799,6 +1810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                         MatIconModule,
                         MatDatepickerModule,
                         MatNativeDateModule,
+                        MatTableModule,
                         FontAwesomeModule,
                         FileUploadModule,
                         NgxMaterialTimepickerModule,