페이지 작성 화면을 게시글 작성 화면과 통일 v1.5.2

components/admin/AdminPageForm.vue

@@ -4,25 +4,40 @@ const props = defineProps({
     type: Object,
     default: () => ({})
   },
-  submitLabel: {
-    type: String,
-    default: '저장'
-  },
   saving: {
     type: Boolean,
     default: false
+  },
+  deleting: {
+    type: Boolean,
+    default: false
+  },
+  canViewPage: {
+    type: Boolean,
+    default: false
+  },
+  publicUrl: {
+    type: String,
+    default: ''
+  },
+  showDelete: {
+    type: Boolean,
+    default: false
   }
 })
 
-const emit = defineEmits(['submit'])
+const emit = defineEmits(['submit', 'delete'])
 
 const slugTouched = ref(Boolean(props.initialPage.slug))
 const blockEditor = ref(null)
 const htmlEditor = ref(null)
+const editorMode = ref('write')
 const mediaItems = ref([])
 const isMediaPickerOpen = ref(false)
 const isLoadingMedia = ref(false)
 const isUploadingFeaturedImage = ref(false)
+const isSettingsOpen = ref(true)
+const savedPageSnapshot = ref('')
 
 const form = reactive({
   title: props.initialPage.title || '',
@@ -45,6 +60,37 @@ const toSlug = (value) => value
   .replace(/-+/g, '-')
   .replace(/^-|-$/g, '')
 
+const pageSlug = computed(() => toSlug(form.slug || form.title))
+const viewPageUrl = computed(() => props.publicUrl || (pageSlug.value ? `/pages/${pageSlug.value}` : ''))
+const pageUrlHint = computed(() => `/pages/${pageSlug.value || 'page-slug'}/`)
+
+/**
+ * 페이지 폼의 저장 비교용 문자열을 생성한다.
+ * @returns {string} 직렬화된 폼 상태
+ */
+const serializePageForm = () => JSON.stringify({
+  title: form.title.trim(),
+  slug: pageSlug.value,
+  renderMode: form.renderMode,
+  content: form.content,
+  featuredImage: form.featuredImage.trim() || null
+})
+
+const hasUnsavedPageChanges = computed(() => serializePageForm() !== savedPageSnapshot.value)
+
+const headerStatusText = computed(() => {
+  if (props.saving) {
+    return 'Saving...'
+  }
+  if (hasUnsavedPageChanges.value) {
+    return 'Unsaved changes'
+  }
+  if (props.initialPage.id) {
+    return 'Saved'
+  }
+  return 'New page'
+})
+
 watch(() => form.title, (title) => {
   if (!slugTouched.value) {
     form.slug = toSlug(title)
@@ -60,6 +106,14 @@ const touchSlug = () => {
   form.slug = toSlug(form.slug)
 }
 
+/**
+ * 페이지 설정 패널을 토글한다.
+ * @returns {void}
+ */
+const toggleSettingsPanel = () => {
+  isSettingsOpen.value = !isSettingsOpen.value
+}
+
 /**
  * 미디어 라이브러리 목록 조회
  * @returns {Promise<void>}
@@ -139,9 +193,12 @@ const uploadFeaturedImage = async (event) => {
 
 /**
  * 제목 입력 후 본문 에디터로 이동
+ * @param {KeyboardEvent} event - 키보드 이벤트
  * @returns {void}
  */
-const focusContentEditor = () => {
+const focusContentEditor = (event) => {
+  event?.preventDefault()
+
   if (form.renderMode === 'html_document') {
     htmlEditor.value?.focus()
     return
@@ -159,45 +216,140 @@ const setRenderMode = (mode) => {
   form.renderMode = mode
 }
 
+/**
+ * 페이지 입력값을 생성한다.
+ * @returns {Object} 페이지 입력값
+ */
+const createPayload = () => ({
+  title: form.title.trim(),
+  slug: pageSlug.value,
+  renderMode: form.renderMode,
+  content: form.content,
+  featuredImage: form.featuredImage.trim() || null
+})
+
 /**
  * 페이지 입력값 제출
  * @returns {void}
  */
 const submitPage = () => {
-  emit('submit', {
-    title: form.title.trim(),
-    slug: toSlug(form.slug || form.title),
-    renderMode: form.renderMode,
-    content: form.content,
-    featuredImage: form.featuredImage.trim() || null
-  })
+  emit('submit', createPayload())
 }
+
+/**
+ * 현재 폼 상태를 저장 완료 기준점으로 표시한다.
+ * @returns {void}
+ */
+const markSaved = () => {
+  savedPageSnapshot.value = serializePageForm()
+}
+
+onMounted(markSaved)
+
+defineExpose({
+  markSaved
+})
 </script>
 
 <template>
-  <form class="admin-page-form grid gap-6" @submit.prevent="submitPage">
-    <div class="admin-page-form__main grid gap-5 lg:grid-cols-[minmax(0,1fr)_18rem]">
-      <section class="admin-page-form__content grid gap-4">
-        <input
-          v-model="form.title"
-          class="admin-page-form__title-input border-0 bg-transparent px-0 py-2 text-5xl font-semibold leading-tight text-ink outline-none placeholder:text-soft"
-          type="text"
-          placeholder="페이지 제목"
-          required
-          @keydown.enter.prevent="focusContentEditor"
-        >
+  <form class="admin-page-form flex h-screen min-h-screen overflow-hidden bg-white" @submit.prevent="submitPage">
+    <div class="admin-page-form__workspace flex min-w-0 flex-1 flex-col bg-white">
+      <header class="admin-page-form__toolbar flex h-[56px] shrink-0 items-center bg-white px-8">
+        <div class="admin-page-form__toolbar-inner flex h-[34px] min-w-0 flex-1 items-center justify-between">
+          <div class="admin-page-form__toolbar-left flex h-full min-w-0 flex-1 items-center gap-3">
+            <NuxtLink class="admin-page-form__toolbar-link inline-flex shrink-0 items-center gap-2 rounded px-2 py-1.5 text-sm font-medium text-[#394047] transition-colors hover:bg-[#f1f3f4] hover:text-black" to="/admin/pages">
+              <span class="admin-page-form__toolbar-back text-lg leading-none" aria-hidden="true">&lt;</span>
+              <span>Pages</span>
+            </NuxtLink>
+            <NuxtLink
+              v-if="canViewPage && viewPageUrl"
+              class="admin-page-form__toolbar-status-link inline-flex items-center gap-1 truncate rounded px-2 py-1.5 text-sm font-medium text-[#8E9CAC] transition-colors hover:bg-[#f1f3f4] hover:text-[#394047]"
+              :to="viewPageUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span>View page</span>
+              <span aria-hidden="true">↗</span>
+            </NuxtLink>
+            <span v-else class="admin-page-form__toolbar-status truncate rounded px-2 py-1.5 text-sm text-[#8E9CAC]">
+              {{ headerStatusText }}
+            </span>
+          </div>
 
-        <div v-if="form.renderMode === 'markdown'" class="admin-page-form__field grid gap-2 text-sm">
-          <AdminBlockEditor ref="blockEditor" v-model="form.content" />
+          <div class="admin-page-form__toolbar-actions flex h-full shrink-0 items-center gap-2">
+            <div
+              v-show="form.renderMode === 'markdown'"
+              id="admin-page-form-mode-toggle-host"
+              class="admin-page-form__mode-toggle-host flex shrink-0 items-center"
+            />
+            <button
+              class="admin-page-form__toolbar-save rounded px-3 py-1.5 text-sm font-bold transition-colors disabled:cursor-default disabled:text-[#8E9CAC] disabled:hover:bg-transparent enabled:text-[#394047] enabled:hover:bg-[#f1f3f4]"
+              type="submit"
+              :disabled="saving || !form.title.trim() || !hasUnsavedPageChanges"
+            >
+              {{ saving ? 'Saving...' : 'Save' }}
+            </button>
+            <button
+              class="admin-page-form__settings-toggle grid size-[34px] place-items-center rounded text-[#394047] transition-colors hover:bg-[#f1f3f4] hover:text-black"
+              type="button"
+              :aria-pressed="isSettingsOpen"
+              aria-label="페이지 설정 패널 전환"
+              @click="toggleSettingsPanel"
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+                <path d="M14 2.16699C14.3242 2.16699 14.4998 2.39365 14.5 2.57129V13.4287C14.5 13.606 14.3242 13.834 14 13.834H11.5V2.16699H14ZM2 2.16699H10.5V13.834H2C1.6756 13.834 1.5 13.6064 1.5 13.4287V2.57129C1.50024 2.39409 1.67607 2.16699 2 2.16699Z" stroke="currentColor" />
+              </svg>
+            </button>
+          </div>
         </div>
-        <label v-else class="admin-page-form__field admin-page-form__html-field grid gap-2 text-sm">
-          <span class="admin-page-form__label font-medium">HTML 문서</span>
-          <textarea
-            ref="htmlEditor"
-            v-model="form.content"
-            class="admin-page-form__html-editor min-h-[68vh] resize-y rounded border border-line bg-[#15171a] px-4 py-4 font-mono text-sm leading-6 text-white outline-none placeholder:text-white/35 focus:border-[#8e9cac]"
-            spellcheck="false"
-            placeholder="<!doctype html>
+      </header>
+
+      <main class="admin-page-form__editor-scroll min-h-0 flex-1 overflow-y-auto">
+        <section class="admin-page-form__content mx-auto w-full max-w-[804px] px-8 pb-16 pt-16">
+          <div class="admin-page-form__feature-block mb-9">
+            <figure v-if="form.featuredImage" class="admin-page-form__featured-editor group relative overflow-hidden bg-white">
+              <img class="admin-page-form__featured-editor-image aspect-[16/9] w-full bg-surface object-cover" :src="form.featuredImage" alt="">
+              <figcaption class="admin-page-form__featured-editor-actions pointer-events-none absolute inset-0 flex items-end justify-end gap-2 bg-gradient-to-t from-black/40 via-black/5 to-transparent p-4 opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100">
+                <button class="admin-page-form__featured-change rounded bg-white/95 px-3 py-1.5 text-xs font-semibold text-[#15171a] shadow-sm transition-colors hover:bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" type="button" @click="openMediaPicker">
+                  변경
+                </button>
+                <button class="admin-page-form__featured-remove rounded bg-[#fff1f2]/95 px-3 py-1.5 text-xs font-semibold text-red-700 shadow-sm transition-colors hover:bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" type="button" @click="removeFeaturedImage">
+                  삭제
+                </button>
+              </figcaption>
+            </figure>
+            <div v-else class="admin-page-form__feature-empty flex h-6 items-start">
+              <button class="admin-page-form__feature-add inline-flex items-center gap-1.5 rounded px-2 py-1 text-sm text-[#8e9cac] transition-colors hover:bg-[#eff1f2] hover:text-[#394047]" type="button" @click="openMediaPicker">
+                <span aria-hidden="true">+</span>
+                <span>대표 이미지 추가</span>
+              </button>
+            </div>
+          </div>
+
+          <input
+            v-model="form.title"
+            class="admin-page-form__title-input mb-2 w-full border-0 bg-transparent px-0 py-0 text-3xl font-bold leading-tight text-ink outline-none placeholder:text-[#8e9cac]"
+            type="text"
+            placeholder="제목"
+            @keydown.enter="focusContentEditor"
+          >
+
+          <div v-if="form.renderMode === 'markdown'" class="admin-page-form__field admin-page-form__content-editor text-sm">
+            <AdminMarkdownEditor
+              ref="blockEditor"
+              v-model="form.content"
+              v-model:editor-mode="editorMode"
+              mode-toggle-teleport-to="#admin-page-form-mode-toggle-host"
+            />
+          </div>
+          <label v-else class="admin-page-form__field admin-page-form__html-field grid gap-2 text-sm">
+            <span class="admin-page-form__label sr-only">HTML 문서</span>
+            <textarea
+              ref="htmlEditor"
+              v-model="form.content"
+              class="admin-page-form__html-editor min-h-[68vh] w-full resize-y rounded border border-[#e3e6e8] bg-white px-4 py-4 font-mono text-sm leading-6 text-[#15171a] outline-none placeholder:text-[#8e9cac] focus:border-[#8e9cac]"
+              spellcheck="false"
+              placeholder="<!doctype html>
 <html lang=&quot;ko&quot;>
 <head>
   <meta charset=&quot;utf-8&quot;>
@@ -209,95 +361,130 @@ const submitPage = () => {
 <body>
 </body>
 </html>"
-          />
-          <span class="admin-page-form__hint text-xs text-muted">
-            이 모드는 공개 URL에서 저장한 HTML을 그대로 응답합니다.
-          </span>
-        </label>
-      </section>
+            />
+          </label>
+        </section>
+      </main>
+    </div>
 
-      <aside class="admin-page-form__settings grid content-start gap-4">
-        <div class="admin-page-form__field grid gap-2 text-sm">
-          <span class="admin-page-form__label font-medium">페이지 형식</span>
-          <div class="admin-page-form__mode-control grid grid-cols-2 rounded border border-line bg-white p-1">
-            <button
-              class="admin-page-form__mode-button rounded px-3 py-2 text-sm font-semibold transition"
-              :class="form.renderMode === 'markdown' ? 'bg-[#15171a] text-white' : 'text-muted hover:bg-surface hover:text-ink'"
-              type="button"
-              @click="setRenderMode('markdown')"
-            >
-              기본
-            </button>
-            <button
-              class="admin-page-form__mode-button rounded px-3 py-2 text-sm font-semibold transition"
-              :class="form.renderMode === 'html_document' ? 'bg-[#15171a] text-white' : 'text-muted hover:bg-surface hover:text-ink'"
-              type="button"
-              @click="setRenderMode('html_document')"
-            >
-              HTML
-            </button>
-          </div>
+    <aside
+      class="admin-page-form__settings flex h-screen shrink-0 flex-col overflow-hidden border-[#e3e6e8] bg-white transition-[width,border-color] duration-300 ease-out"
+      :class="isSettingsOpen ? 'w-[420px] border-l' : 'w-0 border-l-0'"
+      :aria-hidden="!isSettingsOpen"
+    >
+      <div class="admin-page-form__settings-inner relative flex h-full w-[420px] flex-col">
+        <div class="admin-page-form__settings-header flex h-[56px] shrink-0 items-center justify-between px-6">
+          <h2 class="admin-page-form__settings-title text-xl font-bold text-black">
+            페이지 설정
+          </h2>
+          <button class="admin-page-form__settings-close grid size-8 place-items-center rounded text-neutral-900 transition-colors hover:bg-[#eff1f2] hover:text-neutral-500" type="button" aria-label="페이지 설정 닫기" @click="toggleSettingsPanel">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16" width="16" class="h-[1.1rem] w-[1.1rem]" aria-hidden="true">
+              <path stroke-linecap="round" stroke-width="0.4" fill="currentColor" stroke="#000000" stroke-linejoin="round" d="M.44,21.44a1.49,1.49,0,0,0,0,2.12,1.5,1.5,0,0,0,2.12,0l9.26-9.26a.25.25,0,0,1,.36,0l9.26,9.26a1.5,1.5,0,0,0,2.12,0,1.49,1.49,0,0,0,0-2.12L14.3,12.18a.25.25,0,0,1,0-.36l9.26-9.26A1.5,1.5,0,0,0,21.44.44L12.18,9.7a.25.25,0,0,1-.36,0L2.56.44A1.5,1.5,0,0,0,.44,2.56L9.7,11.82a.25.25,0,0,1,0,.36Z" />
+            </svg>
+          </button>
         </div>
 
-        <label class="admin-page-form__field grid gap-2 text-sm">
-          <span class="admin-page-form__label font-medium">슬러그</span>
-          <input
-            v-model="form.slug"
-            class="admin-page-form__input rounded border border-line bg-white px-3 py-2"
-            type="text"
-            pattern="[a-z0-9가-힣]+(-[a-z0-9가-힣]+)*"
-            required
-            @input="touchSlug"
-          >
-        </label>
-
-        <div class="admin-page-form__field grid gap-2 text-sm">
-          <span class="admin-page-form__label font-medium">대표 이미지</span>
-          <figure v-if="form.featuredImage" class="admin-page-form__featured overflow-hidden rounded border border-line bg-white">
-            <img class="admin-page-form__featured-image aspect-[4/3] w-full bg-surface object-cover" :src="form.featuredImage" alt="">
-            <figcaption class="admin-page-form__featured-actions grid gap-2 p-3">
-              <p class="admin-page-form__featured-url break-all text-xs text-muted">
-                {{ form.featuredImage }}
-              </p>
-              <div class="admin-page-form__featured-buttons flex flex-wrap gap-2">
-                <button class="admin-page-form__featured-change rounded border border-line px-3 py-1.5 text-xs font-semibold" type="button" @click="openMediaPicker">
-                  변경
-                </button>
-                <label class="admin-page-form__featured-reupload cursor-pointer rounded border border-line px-3 py-1.5 text-xs font-semibold">
-                  새 업로드
-                  <input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
-                </label>
-                <button class="admin-page-form__featured-remove rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700" type="button" @click="removeFeaturedImage">
-                  삭제
-                </button>
-              </div>
-            </figcaption>
-          </figure>
-          <div v-else class="admin-page-form__featured-empty grid gap-2 rounded border border-dashed border-line bg-white p-4">
-            <button class="admin-page-form__featured-select rounded border border-line px-3 py-2 text-sm font-semibold" type="button" @click="openMediaPicker">
-              미디어에서 선택
-            </button>
-            <label class="admin-page-form__featured-upload cursor-pointer rounded bg-[#15171a] px-3 py-2 text-center text-sm font-semibold text-white">
-              {{ isUploadingFeaturedImage ? '업로드 중' : '새 이미지 업로드' }}
-              <input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
+        <div class="admin-page-form__settings-body grid flex-1 content-start gap-4 overflow-y-auto px-6 pb-8 pt-8">
+          <div class="admin-page-form__field grid gap-1 text-sm">
+            <div class="admin-page-form__page-url-header flex h-[22px] items-center justify-between">
+              <span class="admin-page-form__label font-bold text-[#15171a]">Page URL</span>
+              <NuxtLink
+                v-if="canViewPage && viewPageUrl"
+                class="admin-page-form__view-page inline-flex items-center gap-1 rounded px-3 py-1.5 text-xs text-[#8e9cac] transition-colors hover:bg-[#eff1f2] hover:text-[#394047]"
+                :to="viewPageUrl"
+                target="_blank"
+              >
+                <span>View Page</span>
+                <span aria-hidden="true">↗</span>
+              </NuxtLink>
+            </div>
+            <label class="admin-page-form__page-url-input flex h-[38px] items-center gap-2 rounded border border-[#e3e6e8] bg-[#eff1f2] px-3 py-1 transition-colors hover:border-[#c8ced3] focus-within:border-[#8e9cac]">
+              <span class="admin-page-form__page-url-icon text-sm text-[#394047]" aria-hidden="true">⌘</span>
+              <input
+                v-model="form.slug"
+                class="admin-page-form__input min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-black outline-none"
+                type="text"
+                pattern="[a-z0-9가-힣]+(-[a-z0-9가-힣]+)*"
+                required
+                @input="touchSlug"
+              >
             </label>
+            <p class="admin-page-form__page-url-hint text-xs text-[#7c8b9a]">
+              {{ pageUrlHint }}
+            </p>
+          </div>
+
+          <div class="admin-page-form__field grid gap-2 text-sm">
+            <span class="admin-page-form__label font-medium">페이지 형식</span>
+            <div class="admin-page-form__mode-control grid grid-cols-2 rounded border border-[#e3e6e8] bg-[#eff1f2] p-1">
+              <button
+                class="admin-page-form__mode-button rounded px-3 py-2 text-sm font-semibold transition"
+                :class="form.renderMode === 'markdown' ? 'bg-[#15171a] text-white' : 'text-[#7c8b9a] hover:bg-white hover:text-[#15171a]'"
+                type="button"
+                @click="setRenderMode('markdown')"
+              >
+                기본
+              </button>
+              <button
+                class="admin-page-form__mode-button rounded px-3 py-2 text-sm font-semibold transition"
+                :class="form.renderMode === 'html_document' ? 'bg-[#15171a] text-white' : 'text-[#7c8b9a] hover:bg-white hover:text-[#15171a]'"
+                type="button"
+                @click="setRenderMode('html_document')"
+              >
+                HTML
+              </button>
+            </div>
+          </div>
+
+          <div class="admin-page-form__field grid gap-2 text-sm">
+            <span class="admin-page-form__label font-medium">대표 이미지</span>
+            <figure v-if="form.featuredImage" class="admin-page-form__featured overflow-hidden rounded border border-[#e3e6e8] bg-white">
+              <img class="admin-page-form__featured-image aspect-[4/3] w-full bg-surface object-cover" :src="form.featuredImage" alt="">
+              <figcaption class="admin-page-form__featured-actions grid gap-2 p-3">
+                <p class="admin-page-form__featured-url break-all text-xs text-muted">
+                  {{ form.featuredImage }}
+                </p>
+                <div class="admin-page-form__featured-buttons flex flex-wrap gap-2">
+                  <button class="admin-page-form__featured-change rounded border border-[#e3e6e8] px-3 py-1.5 text-xs font-semibold" type="button" @click="openMediaPicker">
+                    변경
+                  </button>
+                  <label class="admin-page-form__featured-reupload cursor-pointer rounded border border-[#e3e6e8] px-3 py-1.5 text-xs font-semibold">
+                    새 업로드
+                    <input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
+                  </label>
+                  <button class="admin-page-form__featured-remove rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700" type="button" @click="removeFeaturedImage">
+                    삭제
+                  </button>
+                </div>
+              </figcaption>
+            </figure>
+            <div v-else class="admin-page-form__featured-empty grid gap-2 rounded border border-dashed border-[#e3e6e8] bg-white p-4">
+              <button class="admin-page-form__featured-select rounded border border-[#e3e6e8] px-3 py-2 text-sm font-semibold" type="button" @click="openMediaPicker">
+                미디어에서 선택
+              </button>
+              <label class="admin-page-form__featured-upload cursor-pointer rounded bg-[#15171a] px-3 py-2 text-center text-sm font-semibold text-white">
+                {{ isUploadingFeaturedImage ? '업로드 중' : '새 이미지 업로드' }}
+                <input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
+              </label>
+            </div>
           </div>
         </div>
-      </aside>
-    </div>
 
-    <div class="admin-page-form__actions flex justify-end gap-3 border-t border-line pt-5">
-      <NuxtLink class="admin-page-form__cancel rounded border border-line bg-white px-4 py-2 text-sm font-semibold" to="/admin/pages">
-        취소
-      </NuxtLink>
-      <button
-        class="admin-page-form__submit rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
-        type="submit"
-        :disabled="saving"
-      >
-        {{ saving ? '저장 중' : submitLabel }}
-      </button>
-    </div>
+        <div v-if="showDelete" class="admin-page-form__settings-footer border-t border-[#e3e6e8] p-6">
+          <button
+            class="admin-page-form__delete-button flex h-[44px] w-full items-center justify-center gap-2 rounded border border-[#d7dce0] bg-white text-sm font-bold text-[#394047] transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-700 disabled:opacity-50"
+            type="button"
+            :disabled="deleting"
+            @click="emit('delete')"
+          >
+            <svg class="size-4" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path d="M4 7h16M10 11v6M14 11v6M6 7l1 14h10l1-14M9 7V4h6v3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" />
+            </svg>
+            <span>{{ deleting ? 'Deleting page' : 'Delete page' }}</span>
+          </button>
+        </div>
+      </div>
+    </aside>
 
     <div
       v-if="isMediaPickerOpen"