@taon-dev/cms 21.0.16 → 21.0.18

package/html/lib/taon-posts/taon-cms-post/taon-cms-post.component.html

@@ -1,59 +1,116 @@
 @if (mode() !== 'view-clean') {
   <header class="post-actions">
-    <span class="post-status">{{ mode() === 'add' ? 'New draft' : currentPost()?.status }}</span>
+    <span class="post-status">{{
+      mode() === 'add' ? t.gettext('New draft') : currentPost()?.status
+    }}</span>
     <div class="buttons">
       @if (editing()) {
-        <button mat-flat-button type="button" [disabled]="busy() || dialogOpen() || !canSave()" (click)="save()">
-          {{ mode() === 'add' ? 'Add' : 'Save' }}
+        <button
+          mat-flat-button
+          type="button"
+          [disabled]="busy() || dialogOpen() || !canSave()"
+          (click)="save()">
+          {{ mode() === 'add' ? t.gettext('Add') : t.gettext('Save') }}
+        </button>
+        <button
+          mat-button
+          type="button"
+          [disabled]="busy() || dialogOpen()"
+          (click)="cancel()">
+          {{ t.gettext('Cancel') }}
         </button>
-        <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="cancel()">Cancel</button>
       } @else if (currentPost()) {
-        <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="edit()">
-          <mat-icon>edit</mat-icon> Edit
+        <button
+          mat-button
+          type="button"
+          [disabled]="busy() || dialogOpen()"
+          (click)="edit()">
+          <mat-icon>edit</mat-icon> {{ t.gettext('Edit') }}
         </button>
       }
       @if (mode() !== 'add' && currentPost()) {
         @if (canPublish()) {
-          <button mat-flat-button type="button" [disabled]="busy() || dialogOpen() || (editing() && !canSave())" (click)="publish()">Publish</button>
+          <button
+            mat-flat-button
+            type="button"
+            [disabled]="busy() || dialogOpen() || (editing() && !canSave())"
+            (click)="publish()">
+            {{ t.gettext('Publish') }}
+          </button>
+        } @else {
+          <button
+            mat-button
+            type="button"
+            [disabled]="busy() || dialogOpen()"
+            (click)="unpublish()">
+            {{ t.gettext('Unpublish') }}
+          </button>
         }
-        <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="revert()">
-          <mat-icon>history</mat-icon> Revert
+        <button
+          mat-button
+          type="button"
+          [disabled]="busy() || dialogOpen()"
+          (click)="revert()">
+          <mat-icon>history</mat-icon> {{ t.gettext('Revert') }}
         </button>
         @if (currentPost()?.status !== 'archived') {
-          <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="delete()">
-            <mat-icon>delete</mat-icon> Delete
+          <button
+            mat-button
+            type="button"
+            [disabled]="busy() || dialogOpen()"
+            (click)="delete()">
+            <mat-icon>delete</mat-icon> {{ t.gettext('Delete') }}
           </button>
         }
+        <button
+          mat-button
+          type="button"
+          [disabled]="busy() || dialogOpen()"
+          (click)="duplicate()">
+          <mat-icon>content_copy</mat-icon> {{ t.gettext('Duplicate') }}
+        </button>
       }
     </div>
     @if (busy()) {
-      <span role="status">{{ uploading() ? 'Uploading...' : 'Saving...' }}</span>
+      <span role="status">{{
+        uploading()
+          ? t.gettext('Uploading... ') + uploadProgress() + '%'
+          : t.gettext('Saving...')
+      }}</span>
     }
   </header>
   @if (error()) {
-    <p class="error" role="alert">{{ error() }}</p>
+    <p
+      class="error"
+      role="alert">
+      {{ error() }}
+    </p>
   }
 }
 
-<article class="post-article" [attr.aria-busy]="busy()">
+<article
+  class="post-article"
+  [attr.aria-busy]="busy()">
   @if (editing()) {
     <mat-radio-group
       class="post-type-selector"
-      aria-label="Post type"
+      [attr.aria-label]="t.gettext('Post type')"
       [value]="draft().type"
       [disabled]="busy() || dialogOpen()"
       (change)="updateDraft('type', $event.value)">
       @for (type of postTypes; track type.value) {
-        <mat-radio-button [value]="type.value">{{ type.label }}</mat-radio-button>
+        <mat-radio-button [value]="type.value">{{
+          type.label
+        }}</mat-radio-button>
       }
     </mat-radio-group>
     <div
       class="post-title editable"
       contenteditable="true"
       role="textbox"
-      aria-label="Post title"
+      [attr.aria-label]="t.gettext('Post title')"
       aria-required="true"
-      data-placeholder="Title"
+      [attr.data-placeholder]="placeholderTitle()"
       [attr.contenteditable]="!busy() && !dialogOpen()"
       [taonCmsEditableSingleLine]="true"
       [taonCmsEditable]="draft().title"
@@ -62,9 +119,9 @@
       class="post-excerpt editable"
       contenteditable="true"
       role="textbox"
-      aria-label="Post excerpt"
+      [attr.aria-label]="t.gettext('Post excerpt')"
       aria-multiline="true"
-      data-placeholder="A short introduction..."
+      [attr.data-placeholder]="placeholderShortIntro()"
       [attr.contenteditable]="!busy() && !dialogOpen()"
       [taonCmsEditable]="draft().excerpt"
       (taonCmsEditableChange)="updateDraft('excerpt', $event)"></div>
@@ -72,23 +129,94 @@
       class="post-body editable"
       contenteditable="true"
       role="textbox"
-      aria-label="Post body"
+      [attr.aria-label]="t.gettext('Post body')"
       aria-multiline="true"
-      data-placeholder="Tell your story..."
+      [attr.data-placeholder]="placeholderTellYourStory()"
       [attr.contenteditable]="!busy() && !dialogOpen()"
       taonCmsEditableFormat="html"
       [taonCmsEditable]="draft().body"
       (taonCmsEditableChange)="updateDraft('body', $event)"></div>
     <label class="slug-field">
-      <span>URL slug</span>
-      <input aria-label="URL slug" [value]="draft().slug" [disabled]="busy() || dialogOpen()" (input)="updateSlug($event)" placeholder="my-post" />
+      <span>{{ t.gettext('URL slug') }}</span>
+      <input
+        [attr.aria-label]="t.gettext('URL slug')"
+        [value]="draft().slug"
+        [disabled]="busy() || dialogOpen()"
+        (input)="updateSlug($event)"
+        [placeholder]="t.gettext('my-post')" />
     </label>
     @if (mediaAttachment(); as media) {
-      <section class="media-attachment" aria-labelledby="media-attachment-heading">
+      <section
+        class="media-attachment"
+        aria-labelledby="media-attachment-heading">
         <h2 id="media-attachment-heading">{{ media.heading }}</h2>
+        @if (uploading()) {
+          <mat-progress-bar
+            mode="determinate"
+            [value]="uploadProgress()"
+            [attr.aria-label]="t.gettext('Media upload progress')" />
+        }
         @if (draft()[media.key]; as key) {
-          <p>Attached file: {{ key }}</p>
-          <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="removeMedia()">Remove</button>
+          @if (mediaPreviewLoading()) {
+            <p role="status">{{ t.gettext('Loading media preview...') }}</p>
+          }
+          @if (mediaPreviewError()) {
+            <p
+              class="error"
+              role="alert">
+              {{ mediaPreviewError() }}
+            </p>
+          }
+          @if (media.type === 'video' && mediaPreviewUrl()) {
+            <video
+              controls
+              preload="none"
+              [src]="mediaPreviewUrl()">
+              {{ t.gettext('Your browser does not support video playback.') }}
+            </video>
+          } @else if (media.type === 'audio' && mediaPreviewUrl()) {
+            <audio
+              controls
+              preload="none"
+              [src]="mediaPreviewUrl()">
+              {{ t.gettext('Your browser does not support audio playback.') }}
+            </audio>
+          } @else if (media.type === 'attachment' && mediaPreviewUrl()) {
+            <p>
+              {{
+                t.gettext('Attached file: [[ fileName ]]', {
+                  fileName: mediaFileName(key),
+                })
+              }}
+              <a
+                [href]="mediaPreviewUrl()"
+                target="_blank"
+                rel="noopener"
+                >{{ t.gettext('Download or open') }}</a
+              >
+            </p>
+          }
+          <input
+            #mediaInput
+            hidden
+            type="file"
+            [accept]="media.accept"
+            [disabled]="busy() || dialogOpen()"
+            (change)="fileSelected($event)" />
+          <button
+            mat-button
+            type="button"
+            [disabled]="busy() || dialogOpen()"
+            (click)="mediaInput.click()">
+            {{ t.gettext('Replace') }}
+          </button>
+          <button
+            mat-button
+            type="button"
+            [disabled]="busy() || dialogOpen()"
+            (click)="removeMedia()">
+            {{ t.gettext('Remove') }}
+          </button>
         } @else {
           <input
             #mediaInput
@@ -97,125 +225,423 @@
             [accept]="media.accept"
             [disabled]="busy() || dialogOpen()"
             (change)="fileSelected($event)" />
-          <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="mediaInput.click()">{{ media.uploadLabel }}</button>
+          <button
+            mat-button
+            type="button"
+            [disabled]="busy() || dialogOpen()"
+            (click)="mediaInput.click()">
+            {{ media.uploadLabel }}
+          </button>
         }
       </section>
     }
-    <section class="related-posts" aria-labelledby="related-posts-heading">
-      <h2 id="related-posts-heading">Related posts</h2>
+    <section
+      class="post-thumbnail"
+      aria-labelledby="thumbnail-heading">
+      <h2 id="thumbnail-heading">{{ t.gettext('Thumbnail') }}</h2>
+      @if (thumbnailPreviewUrl()) {
+        <img
+          class="thumbnail-preview"
+          [src]="thumbnailPreviewUrl()"
+          [alt]="t.gettext('Post thumbnail')" />
+      } @else {
+        <p>{{ t.gettext('No thumbnail selected.') }}</p>
+      }
+      @if (thumbnailError()) {
+        <p role="alert">{{ thumbnailError() }}</p>
+      }
+      <input
+        #thumbnailInput
+        hidden
+        type="file"
+        accept="image/*"
+        [disabled]="busy() || dialogOpen()"
+        (change)="thumbnailSelected($event)" />
+      <div class="buttons">
+        <button
+          mat-button
+          type="button"
+          [disabled]="busy() || dialogOpen()"
+          (click)="thumbnailInput.click()">
+          {{ t.gettext('Upload Thumbnail') }}
+        </button>
+        <button
+          mat-button
+          type="button"
+          [disabled]="busy() || dialogOpen()"
+          (click)="applyDefaultThumbnail()">
+          {{ t.gettext('Apply Default Placeholder') }}
+        </button>
+      </div>
+    </section>
+    <section
+      class="post-taxonomy"
+      aria-labelledby="category-heading">
+      <h2 id="category-heading">{{ t.gettext('Category and Tags') }}</h2>
+      @if (taxonomyLoading()) {
+        <p role="status">{{ t.gettext('Loading categories and tags...') }}</p>
+      }
+      @if (taxonomyError()) {
+        <p role="alert">{{ taxonomyError() }}</p>
+        <button
+          mat-button
+          type="button"
+          [disabled]="busy()"
+          (click)="loadTaxonomy()">
+          {{ t.gettext('Try again') }}
+        </button>
+      }
+      <mat-form-field appearance="outline">
+        <mat-label>{{ t.gettext('Category') }}</mat-label>
+        <mat-select
+          [value]="draft().categoryId"
+          [disabled]="
+            busy() || dialogOpen() || taxonomyLoading() || !!taxonomyError()
+          "
+          (selectionChange)="updateDraft('categoryId', $event.value)">
+          <mat-option [value]="null">{{ t.gettext('None') }}</mat-option>
+          @for (category of categories(); track category.id) {
+            <mat-option [value]="category.id">{{ category.name }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+      <h3>{{ t.gettext('Tags') }}</h3>
+      <mat-chip-set [attr.aria-label]="t.gettext('Selected tags')">
+        @for (tag of selectedTags(); track tag.id) {
+          <mat-chip
+            [disabled]="busy() || dialogOpen() || taxonomyLoading()"
+            (removed)="removeTag(tag.id)">
+            {{ tag.name }}
+            <button
+              matChipRemove
+              type="button"
+              [disabled]="busy() || dialogOpen() || taxonomyLoading()"
+              [attr.aria-label]="
+                t.gettext('Remove tag [[ name ]]', { name: tag.name })
+              ">
+              <mat-icon>cancel</mat-icon>
+            </button>
+          </mat-chip>
+        }
+      </mat-chip-set>
+      <mat-form-field appearance="outline">
+        <mat-label>{{ t.gettext('Search tags') }}</mat-label>
+        <input
+          matInput
+          [value]="tagSearch()"
+          (input)="filterTags($event)"
+          [disabled]="busy() || dialogOpen() || taxonomyLoading()" />
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>{{ t.gettext('Add tag') }}</mat-label>
+        <mat-select
+          [value]="null"
+          [disabled]="
+            busy() || dialogOpen() || taxonomyLoading() || !!taxonomyError()
+          "
+          (selectionChange)="addTag($event.value)">
+          @for (tag of filteredTags(); track tag.id) {
+            <mat-option [value]="tag.id">{{ tag.name }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </section>
+    <section
+      class="related-posts"
+      aria-labelledby="related-posts-heading">
+      <h2 id="related-posts-heading">{{ t.gettext('Related posts') }}</h2>
       @if (relatedPostsLoading()) {
-        <p role="status">Loading related posts...</p>
+        <p role="status">{{ t.gettext('Loading related posts...') }}</p>
       } @else if (relatedPostsError()) {
-        <p class="error" role="alert">{{ relatedPostsError() }}</p>
-        <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="loadRelatedPosts()">Try again</button>
+        <p
+          class="error"
+          role="alert">
+          {{ relatedPostsError() }}
+        </p>
+        <button
+          mat-button
+          type="button"
+          [disabled]="busy() || dialogOpen()"
+          (click)="loadRelatedPosts()">
+          {{ t.gettext('Try again') }}
+        </button>
       } @else {
         <ul>
           @for (post of relatedPosts(); track post.id) {
             <li>
               <span>#{{ post.id }} - {{ post.title }}</span>
-              <button mat-icon-button type="button" [attr.aria-label]="'Remove related post ' + post.title" [disabled]="busy() || dialogOpen()" (click)="removeRelatedPost(post.id)">
+              <button
+                mat-icon-button
+                type="button"
+                [attr.aria-label]="
+                  t.gettext('Remove related post [[ title ]]', {
+                    title: post.title,
+                  })
+                "
+                [disabled]="busy() || dialogOpen()"
+                (click)="removeRelatedPost(post.id)">
                 <mat-icon>close</mat-icon>
               </button>
             </li>
           } @empty {
-            <li>No related posts yet.</li>
+            <li>{{ t.gettext('No related posts yet.') }}</li>
           }
         </ul>
-        <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="addRelatedPost()">
-          <mat-icon>add</mat-icon> Add related post
+        <button
+          mat-button
+          type="button"
+          [disabled]="busy() || dialogOpen()"
+          (click)="addRelatedPost()">
+          <mat-icon>add</mat-icon> {{ t.gettext('Add related post') }}
         </button>
       }
     </section>
-    <section class="application-hook" aria-labelledby="application-hook-heading">
-      <h2 id="application-hook-heading">Application Hook</h2>
-      @if (applicationHooksLoading()) {
-        <p role="status">Loading application hooks...</p>
-      } @else if (applicationHooksError()) {
-        <p class="error" role="alert">{{ applicationHooksError() }}</p>
-        <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="loadApplicationHooks()">Try again</button>
-      } @else {
-        <mat-checkbox
-          [checked]="useAsApplicationHook()"
-          [disabled]="busy() || dialogOpen()"
-          (change)="setUseAsApplicationHook($event.checked)">
-          Use as application hook
-        </mat-checkbox>
-        @if (useAsApplicationHook()) {
-          <mat-form-field appearance="outline" subscriptSizing="dynamic">
-            <mat-label>Application Hook</mat-label>
-            <mat-select
-              [value]="selectedApplicationHook()"
-              [disabled]="busy() || dialogOpen()"
-              (selectionChange)="selectedApplicationHook.set($event.value)">
-              @for (applicationHook of applicationHooks(); track applicationHook.id) {
-                <mat-option
-                  [value]="applicationHook.hook"
-                  [disabled]="applicationHookInUseByAnotherPost(applicationHook)">
-                  {{ applicationHookLabel(applicationHook.hook) }}
-                  @if (applicationHookInUseByAnotherPost(applicationHook)) {
-                    (in use by post #{{ applicationHook.contentId }})
-                  }
-                </mat-option>
-              } @empty {
-                <mat-option [disabled]="true">No application hooks configured</mat-option>
-              }
-            </mat-select>
-          </mat-form-field>
+
+    @if (!mediaAttachment()) {
+      <section
+        class="application-hook"
+        aria-labelledby="application-hook-heading">
+        <h2 id="application-hook-heading">
+          {{ t.gettext('Application Hook') }}
+        </h2>
+        @if (applicationHooksLoading()) {
+          <p role="status">{{ t.gettext('Loading application hooks...') }}</p>
+        } @else if (applicationHooksError()) {
+          <p
+            class="error"
+            role="alert">
+            {{ applicationHooksError() }}
+          </p>
+          <button
+            mat-button
+            type="button"
+            [disabled]="busy() || dialogOpen()"
+            (click)="loadApplicationHooks()">
+            {{ t.gettext('Try again') }}
+          </button>
+        } @else {
+          <mat-checkbox
+            [checked]="useAsApplicationHook()"
+            [disabled]="busy() || dialogOpen()"
+            (change)="setUseAsApplicationHook($event.checked)">
+            {{ t.gettext('Use as application hook') }}
+          </mat-checkbox>
+          @if (useAsApplicationHook()) {
+            <mat-form-field
+              appearance="outline"
+              subscriptSizing="dynamic">
+              <mat-label>{{ t.gettext('Application Hook') }}</mat-label>
+              <mat-select
+                [value]="selectedApplicationHook()"
+                [disabled]="busy() || dialogOpen()"
+                (selectionChange)="selectedApplicationHook.set($event.value)">
+                @for (
+                  applicationHook of applicationHooks();
+                  track applicationHook.id
+                ) {
+                  <mat-option
+                    [value]="applicationHook.hook"
+                    [disabled]="
+                      applicationHookInUseByAnotherPost(applicationHook)
+                    ">
+                    {{ applicationHookLabel(applicationHook.hook) }}
+                    @if (applicationHookInUseByAnotherPost(applicationHook)) {
+                      {{
+                        t.gettext('(in use by post # [[ postId ]])', {
+                          postId: applicationHook.contentId,
+                        })
+                      }}
+                    }
+                  </mat-option>
+                } @empty {
+                  <mat-option [disabled]="true">{{
+                    t.gettext('No application hooks configured')
+                  }}</mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          }
         }
+      </section>
+    }
+    <section
+      class="post-permissions"
+      aria-labelledby="post-permissions-heading">
+      <h2 id="post-permissions-heading">
+        {{ t.gettext('Allow Read only with Permissions') }}
+      </h2>
+      @if (permissionSource(); as source) {
+        <p role="note">
+          {{
+            t.gettext(
+              'Permissions are inherited from # [[ postId ]] - [[ title ]]. Edit the source post to change them.',
+              { postId: source.id, title: source.title }
+            )
+          }}
+        </p>
       }
-    </section>
-    <section class="post-permissions" aria-labelledby="post-permissions-heading">
-      <h2 id="post-permissions-heading">Allow Read only with Permissions</h2>
       @if (permissionsLoading()) {
-        <p role="status">Loading assigned permissions...</p>
+        <p role="status">{{ t.gettext('Loading assigned permissions...') }}</p>
       } @else if (permissionsError()) {
-        <p class="error" role="alert">{{ permissionsError() }}</p>
-        <button mat-button type="button" [disabled]="busy() || dialogOpen()" (click)="loadPermissions()">Try again</button>
+        <p
+          class="error"
+          role="alert">
+          {{ permissionsError() }}
+        </p>
+        <button
+          mat-button
+          type="button"
+          [disabled]="busy() || dialogOpen()"
+          (click)="loadPermissions()">
+          {{ t.gettext('Try again') }}
+        </button>
       } @else {
         <ul>
           @for (permission of permissions(); track permission.id) {
             <li>
               <span>{{ permission.name }} ({{ permission.code }})</span>
-              <button mat-icon-button type="button" [attr.aria-label]="'Remove permission ' + permission.name" [disabled]="busy() || dialogOpen()" (click)="removePermission(permission.id)">
+              <button
+                mat-icon-button
+                type="button"
+                [attr.aria-label]="
+                  t.gettext('Remove permission [[ name ]]', {
+                    name: permission.name,
+                  })
+                "
+                [disabled]="busy() || dialogOpen() || !!permissionSource()"
+                (click)="removePermission(permission.id)">
                 <mat-icon>close</mat-icon>
               </button>
             </li>
           } @empty {
-            <li>No permissions assigned.</li>
+            <li>{{ t.gettext('No permissions assigned.') }}</li>
           }
         </ul>
         @if (permissionOptionsError()) {
-          <p class="error" role="alert">{{ permissionOptionsError() }}</p>
-          <button mat-button type="button" [disabled]="busy() || dialogOpen() || permissionOptionsLoading()" (click)="loadPermissionOptions()">Try again</button>
+          <p
+            class="error"
+            role="alert">
+            {{ permissionOptionsError() }}
+          </p>
+          <button
+            mat-button
+            type="button"
+            [disabled]="busy() || dialogOpen() || permissionOptionsLoading()"
+            (click)="loadPermissionOptions()">
+            {{ t.gettext('Try again') }}
+          </button>
         } @else {
           <div class="permission-assignment">
-            <mat-form-field appearance="outline" subscriptSizing="dynamic">
-              <mat-label>Permission</mat-label>
+            <mat-form-field
+              appearance="outline"
+              subscriptSizing="dynamic">
+              <mat-label>{{ t.gettext('Permission') }}</mat-label>
               <mat-select
                 [value]="selectedPermissionId()"
-                [disabled]="busy() || dialogOpen() || permissionOptionsLoading()"
+                [disabled]="
+                  busy() ||
+                  dialogOpen() ||
+                  permissionOptionsLoading() ||
+                  !!permissionSource()
+                "
                 (selectionChange)="selectedPermissionId.set($event.value)">
-                @for (permission of availablePermissions(); track permission.id) {
-                  <mat-option [value]="permission.id">{{ permission.name }} ({{ permission.code }})</mat-option>
+                @for (
+                  permission of availablePermissions();
+                  track permission.id
+                ) {
+                  <mat-option [value]="permission.id"
+                    >{{ permission.name }} ({{ permission.code }})</mat-option
+                  >
                 } @empty {
-                  <mat-option [disabled]="true">No permissions available</mat-option>
+                  <mat-option [disabled]="true">{{
+                    t.gettext('No permissions available')
+                  }}</mat-option>
                 }
               </mat-select>
             </mat-form-field>
-            <button mat-button type="button" [disabled]="busy() || dialogOpen() || !selectedPermissionId()" (click)="addPermission()">
-              <mat-icon>add</mat-icon> Assign permission
+            <button
+              mat-button
+              type="button"
+              [disabled]="
+                busy() ||
+                dialogOpen() ||
+                !selectedPermissionId() ||
+                !!permissionSource()
+              "
+              (click)="addPermission()">
+              <mat-icon>add</mat-icon> {{ t.gettext('Assign permission') }}
             </button>
           </div>
         }
       }
+      @if (!permissionSource()) {
+        <mat-checkbox
+          [checked]="applyPermissionsToRelatedPosts()"
+          [disabled]="busy() || dialogOpen()"
+          (change)="applyPermissionsToRelatedPosts.set($event.checked)">
+          {{ t.gettext('Apply permissions to related posts') }}
+        </mat-checkbox>
+      }
     </section>
   } @else if (currentPost(); as post) {
+    @if (thumbnailPreviewUrl()) {
+      <img
+        class="thumbnail-preview"
+        [src]="thumbnailPreviewUrl()"
+        [alt]="t.gettext('Post thumbnail')" />
+    }
+    @if (thumbnailError()) {
+      <p role="alert">{{ thumbnailError() }}</p>
+    }
     <h1 class="post-title">{{ post.title }}</h1>
     @if (post.excerpt) {
       <p class="post-excerpt">{{ post.excerpt }}</p>
     }
-    <div class="post-body" [innerHTML]="post.body"></div>
+    <div
+      class="post-body"
+      [innerHTML]="post.body"></div>
+    @if (mediaAttachment(); as media) {
+      @if (draft()[media.key]; as key) {
+        @if (mediaPreviewLoading()) {
+          <p role="status">{{ t.gettext('Loading media...') }}</p>
+        } @else if (mediaPreviewError()) {
+          <p
+            class="error"
+            role="alert">
+            {{ mediaPreviewError() }}
+          </p>
+        } @else if (media.type === 'video' && mediaPreviewUrl()) {
+          <video
+            controls
+            preload="none"
+            [src]="mediaPreviewUrl()">
+            {{ t.gettext('Your browser does not support video playback.') }}
+          </video>
+        } @else if (media.type === 'audio' && mediaPreviewUrl()) {
+          <audio
+            controls
+            preload="none"
+            [src]="mediaPreviewUrl()">
+            {{ t.gettext('Your browser does not support audio playback.') }}
+          </audio>
+        } @else if (media.type === 'attachment' && mediaPreviewUrl()) {
+          <p>
+            {{
+              t.gettext('Attached file: [[ fileName ]]', {
+                fileName: mediaFileName(key),
+              })
+            }}
+            <a
+              [href]="mediaPreviewUrl()"
+              target="_blank"
+              rel="noopener"
+              >{{ t.gettext('Download or open') }}</a
+            >
+          </p>
+        }
+      }
+    }
   } @else {
-    <p role="status">No post is loaded.</p>
+    <p role="status">{{ t.gettext('No post is loaded.') }}</p>
   }
 </article>