From 30e3413f6c1c55d4b5b49e1ddc5ed2633672975c Mon Sep 17 00:00:00 2001
From: Tatevik <tatevikg1@gmail.com>
Date: Tue, 21 Apr 2026 13:31:18 +0400
Subject: [PATCH 1/5] Templates

---
 assets/router/index.js                        |   4 +
 .../components/templates/TemplateLibrary.vue  | 149 +++++++++++
 assets/vue/views/TemplateEditView.vue         | 235 ++++++++++++++++++
 assets/vue/views/TemplatesView.vue            |  12 +
 package.json                                  |   2 +-
 src/Controller/TemplatesController.php        |  34 +++
 yarn.lock                                     |   8 +-
 7 files changed, 439 insertions(+), 5 deletions(-)
 create mode 100644 assets/vue/components/templates/TemplateLibrary.vue
 create mode 100644 assets/vue/views/TemplateEditView.vue
 create mode 100644 assets/vue/views/TemplatesView.vue
 create mode 100644 src/Controller/TemplatesController.php

diff --git a/assets/router/index.js b/assets/router/index.js
index 9cdbb48..715f3f7 100644
--- a/assets/router/index.js
+++ b/assets/router/index.js
@@ -5,6 +5,8 @@ import ListsView from '../vue/views/ListsView.vue'
 import ListSubscribersView from '../vue/views/ListSubscribersView.vue'
 import CampaignsView from '../vue/views/CampaignsView.vue'
 import CampaignEditView from '../vue/views/CampaignEditView.vue'
+import TemplatesView from '../vue/views/TemplatesView.vue'
+import TemplateEditView from '../vue/views/TemplateEditView.vue'
 
 export const router = createRouter({
     history: createWebHistory(),
@@ -13,6 +15,8 @@ export const router = createRouter({
         { path: '/subscribers', name: 'subscribers', component: SubscribersView, meta: { title: 'Subscribers' } },
         { path: '/lists', name: 'lists', component: ListsView, meta: { title: 'Lists' } },
         { path: '/campaigns', name: 'campaigns', component: CampaignsView, meta: { title: 'Campaigns' } },
+        { path: '/templates', name: 'templates', component: TemplatesView, meta: { title: 'Templates' } },
+        { path: '/templates/:templateId/edit', name: 'template-edit', component: TemplateEditView, meta: { title: 'Edit Template' } },
         { path: '/campaigns/create', name: 'campaign-create', component: CampaignEditView, meta: { title: 'Create Campaign' } },
         { path: '/campaigns/:campaignId/edit', name: 'campaign-edit', component: CampaignEditView, meta: { title: 'Edit Campaign' } },
         { path: '/lists/:listId/subscribers', name: 'list-subscribers', component: ListSubscribersView, meta: { title: 'List Subscribers' } },
diff --git a/assets/vue/components/templates/TemplateLibrary.vue b/assets/vue/components/templates/TemplateLibrary.vue
new file mode 100644
index 0000000..5e3f99b
--- /dev/null
+++ b/assets/vue/components/templates/TemplateLibrary.vue
@@ -0,0 +1,149 @@
+<template>
+  <section class="bg-white rounded-xl border border-slate-200 shadow-sm">
+    <header class="p-6 border-b border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-4">
+      <h2 class="text-xl font-bold text-slate-900">Email Template Library</h2>
+      <div class="flex gap-2">
+        <button
+          class="px-4 py-2 bg-ext-wf1 hover:bg-ext-wf3 text-white text-sm font-medium rounded-lg flex items-center gap-2 transition-colors"
+          type="button"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M5 12h14"></path>
+            <path d="M12 5v14"></path>
+          </svg>
+          New Template
+        </button>
+      </div>
+    </header>
+
+    <div class="p-6">
+      <div v-if="isLoading" class="py-12 text-center text-slate-500">
+        Loading templates...
+      </div>
+
+      <div v-else-if="errorMessage" class="py-12 text-center text-red-600">
+        {{ errorMessage }}
+      </div>
+
+      <div v-else-if="templates.length === 0" class="py-12 text-center text-slate-500">
+        No templates found.
+      </div>
+
+      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <article
+          v-for="templateItem in templates"
+          :key="templateItem.id"
+          class="border border-slate-200 rounded-lg overflow-hidden hover:shadow-lg transition-all"
+        >
+          <div class="aspect-video bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-6xl">
+            <img
+              :src="getTemplateImage(templateItem)"
+              :alt="`Template #${templateItem.id}`"
+              class="w-full h-full object-cover"
+            >
+          </div>
+
+          <div class="p-4">
+            <h3 class="font-semibold text-slate-900 mb-1">{{ templateItem.title || `Template #${templateItem.id}` }}</h3>
+            <p class="text-xs text-slate-500 mb-3">
+              {{ getTemplateType(templateItem) }}
+            </p>
+
+            <div class="flex justify-between items-center text-xs text-slate-400">
+              <span>ID {{ templateItem.id }}</span>
+              <span>Order {{ templateItem.order ?? '-' }}</span>
+            </div>
+
+            <div class="mt-4 flex gap-2">
+              <button
+                class="flex-1 px-3 py-2 bg-ext-wf1 hover:bg-ext-wf3 text-white text-sm rounded-lg transition-colors flex items-center justify-center gap-1"
+                type="button"
+                @click="goToEditTemplate(templateItem.id)"
+              >
+                <BaseIcon name="edit" />
+                Edit
+              </button>
+
+              <button
+                class="px-3 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors"
+                type="button"
+                aria-label="Copy template"
+              >
+                <BaseIcon name="copy" />
+              </button>
+
+              <button
+                class="px-3 py-2 border border-slate-200 rounded-lg hover:bg-red-50 transition-colors"
+                type="button"
+                aria-label="Delete template"
+              >
+                <BaseIcon name="delete" />
+              </button>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import BaseIcon from '../base/BaseIcon.vue'
+import { templateClient } from '../../api'
+
+const router = useRouter()
+const templates = ref([])
+const isLoading = ref(false)
+const errorMessage = ref('')
+
+const getTemplateImage = (templateItem) => {
+  const images = templateItem?.images
+  if (!images) return '';
+
+  return `data:${images[0].mimetype};base64,${images[0].data}`;
+}
+
+const getTemplateType = (templateItem) => {
+  const hasHtml = typeof templateItem.content === 'string' && templateItem.content.trim().length > 0
+  const hasText = typeof templateItem.text === 'string' && templateItem.text.trim().length > 0
+
+  if (hasHtml && hasText) {
+    return 'html + text'
+  }
+
+  if (hasHtml) {
+    return 'html'
+  }
+
+  if (hasText) {
+    return 'text'
+  }
+
+  return 'empty'
+}
+
+const loadTemplates = async () => {
+  isLoading.value = true
+  errorMessage.value = ''
+
+  try {
+    const response = await templateClient.getTemplates(0, 1000)
+    templates.value = Array.isArray(response?.items) ? response.items : []
+  } catch (error) {
+    console.error('Failed to load templates:', error)
+    errorMessage.value = 'Failed to load templates.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const goToEditTemplate = (templateId) => {
+  router.push(`/templates/${templateId}/edit`)
+}
+
+onMounted(() => {
+  loadTemplates()
+})
+</script>
diff --git a/assets/vue/views/TemplateEditView.vue b/assets/vue/views/TemplateEditView.vue
new file mode 100644
index 0000000..5a4bf01
--- /dev/null
+++ b/assets/vue/views/TemplateEditView.vue
@@ -0,0 +1,235 @@
+<template>
+  <AdminLayout>
+    <section class="max-w-3xl bg-white rounded-xl border border-slate-200 shadow-sm">
+      <header class="p-6 border-b border-slate-200">
+        <h1 class="text-xl font-bold text-slate-900">Edit Template</h1>
+      </header>
+
+      <div class="p-6">
+        <div v-if="isLoading" class="py-8 text-center text-slate-500">
+          Loading template...
+        </div>
+
+        <div v-else class="space-y-6">
+          <div v-if="loadError" class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+            {{ loadError }}
+          </div>
+
+          <form v-else class="space-y-6" @submit.prevent="saveTemplate">
+            <div class="space-y-2">
+              <label for="template-title" class="block text-sm font-medium text-slate-700">Title</label>
+              <input
+                id="template-title"
+                v-model.trim="form.title"
+                type="text"
+                class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+                placeholder="Enter template title"
+                required
+              >
+            </div>
+
+            <CkEditorField
+              id="template-content"
+              v-model="form.content"
+              label="Content"
+            />
+
+            <div class="space-y-2">
+              <div class="flex items-center justify-between gap-2">
+                <label for="template-text" class="block text-sm font-medium text-slate-700">Text version</label>
+                <button
+                  type="button"
+                  class="px-3 py-1.5 border border-slate-200 rounded-lg hover:bg-slate-50 text-xs text-slate-700 transition-colors"
+                  @click="populateTextFromContent"
+                >
+                  Use HTML as plain text
+                </button>
+              </div>
+              <textarea
+                id="template-text"
+                v-model="form.text"
+                rows="7"
+                class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+                placeholder="[CONTENT]"
+              />
+            </div>
+
+            <div class="space-y-2">
+              <label for="template-file" class="block text-sm font-medium text-slate-700">Template file</label>
+              <input
+                id="template-file"
+                type="file"
+                accept=".html,.htm,.txt"
+                class="block w-full text-sm text-slate-700 file:mr-4 file:rounded-lg file:border-0 file:bg-ext-wf2 file:px-3 file:py-2 file:text-ext-wf3 hover:file:bg-indigo-100"
+                @change="handleFileChange"
+              >
+            </div>
+
+            <div class="space-y-2">
+              <label class="block text-sm font-medium text-slate-700">Checks</label>
+              <div class="space-y-2 rounded-lg border border-slate-200 p-4">
+                <label class="flex items-center gap-2 text-sm text-slate-700">
+                  <input
+                    v-model="form.checkLinks"
+                    type="checkbox"
+                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1"
+                  >
+                  Check that all links have a full URL
+                </label>
+                <label class="flex items-center gap-2 text-sm text-slate-700">
+                  <input
+                    v-model="form.checkImages"
+                    type="checkbox"
+                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1"
+                  >
+                  Check that all images have a full URL
+                </label>
+                <label class="flex items-center gap-2 text-sm text-slate-700">
+                  <input
+                    v-model="form.checkExternalImages"
+                    type="checkbox"
+                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1"
+                  >
+                  Check that all external images exist
+                </label>
+              </div>
+            </div>
+
+            <div v-if="saveError" class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+              {{ saveError }}
+            </div>
+            <div v-if="saveSuccess" class="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
+              {{ saveSuccess }}
+            </div>
+
+            <div class="flex items-center justify-end gap-2">
+              <RouterLink
+                to="/templates"
+                class="px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 text-sm text-slate-700 transition-colors"
+              >
+                Cancel
+              </RouterLink>
+              <button
+                type="submit"
+                class="px-4 py-2 bg-ext-wf1 hover:bg-ext-wf3 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+                :disabled="isSaving"
+              >
+                {{ isSaving ? 'Saving...' : 'Save' }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+  </AdminLayout>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
+import AdminLayout from '../layouts/AdminLayout.vue'
+import CkEditorField from '../components/base/CkEditorField.vue'
+import { templateClient } from '../api'
+import { Requests } from "@tatevikgr/rest-api-client";
+
+const route = useRoute()
+
+const isLoading = ref(false)
+const loadError = ref('')
+const isSaving = ref(false)
+const saveError = ref('')
+const saveSuccess = ref('')
+const form = ref({
+  title: '',
+  content: '',
+  text: '',
+  file: null,
+  checkLinks: false,
+  checkImages: false,
+  checkExternalImages: false
+})
+
+const templateId = computed(() => route.params.templateId)
+
+const loadTemplate = async () => {
+  if (!templateId.value) {
+    loadError.value = 'Template ID is missing.'
+    return
+  }
+
+  isLoading.value = true
+  loadError.value = ''
+
+  try {
+    const template = await templateClient.getTemplate(templateId.value)
+    form.value.title = template?.title || ''
+    form.value.content = template?.content || ''
+    form.value.text = template?.text || ''
+    form.value.file = null
+  } catch (error) {
+    console.error('Failed to load template:', error)
+    loadError.value = 'Failed to load template.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const populateTextFromContent = () => {
+  if (!form.value.content) {
+    form.value.text = ''
+    return
+  }
+
+  form.value.text = form.value.content
+    .replace(/<style[\s\S]*?<\/style>/gi, ' ')
+    .replace(/<script[\s\S]*?<\/script>/gi, ' ')
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+const handleFileChange = (event) => {
+  const [file] = event.target.files || []
+  form.value.file = file || null
+}
+
+const saveTemplate = async () => {
+  if (!templateId.value) {
+    saveError.value = 'Template ID is missing.'
+    return
+  }
+
+  if (!form.value.title) {
+    saveError.value = 'Title is required.'
+    return
+  }
+
+  isSaving.value = true
+  saveError.value = ''
+  saveSuccess.value = ''
+
+  try {
+    const request = new Requests.CreateTemplateRequest(
+      form.value.title,
+      form.value.content,
+      form.value.text,
+      form.value.file,
+      form.value.checkLinks,
+      form.value.checkImages,
+      form.value.checkExternalImages,
+    )
+    await templateClient.updateTemplate(request, templateId.value)
+
+    saveSuccess.value = 'Template updated successfully.'
+  } catch (error) {
+    console.error('Failed to save template:', error)
+    saveError.value = error?.message || 'Failed to save template.'
+  } finally {
+    isSaving.value = false
+  }
+}
+
+onMounted(() => {
+  loadTemplate()
+})
+</script>
diff --git a/assets/vue/views/TemplatesView.vue b/assets/vue/views/TemplatesView.vue
new file mode 100644
index 0000000..06ddeda
--- /dev/null
+++ b/assets/vue/views/TemplatesView.vue
@@ -0,0 +1,12 @@
+<template>
+  <AdminLayout>
+    <div class="space-y-6 animate-in fade-in duration-300">
+      <TemplateLibrary />
+    </div>
+  </AdminLayout>
+</template>
+
+<script setup>
+import AdminLayout from '../layouts/AdminLayout.vue'
+import TemplateLibrary from '../components/templates/TemplateLibrary.vue'
+</script>
diff --git a/package.json b/package.json
index e329355..1865a30 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@ckeditor/ckeditor5-vue": "^7.4.0",
-    "@tatevikgr/rest-api-client": "^2.0.5",
+    "@tatevikgr/rest-api-client": "^2.0.6",
     "apexcharts": "^5.10.4",
     "ckeditor5": "^48.0.0",
     "vue": "^3.5.16",
diff --git a/src/Controller/TemplatesController.php b/src/Controller/TemplatesController.php
new file mode 100644
index 0000000..b76c428
--- /dev/null
+++ b/src/Controller/TemplatesController.php
@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+#[Route('/templates', name: 'template_')]
+class TemplatesController extends AbstractController
+{
+    #[Route('/', name: 'templates', methods: ['GET'])]
+    public function index(Request $request): Response
+    {
+        return $this->render('@PhpListFrontend/spa.html.twig', [
+            'page' => 'Campaigns',
+            'api_token' => $request->getSession()->get('auth_token'),
+            'api_base_url' => $this->getParameter('api_base_url'),
+        ]);
+    }
+
+    #[Route('/{templateId}/edit', name: 'edit', methods: ['GET'])]
+    public function edit(Request $request, int $templateId): Response
+    {
+        return $this->render('@PhpListFrontend/spa.html.twig', [
+            'page' => sprintf('Edit Template #%d', $templateId),
+            'api_token' => $request->getSession()->get('auth_token'),
+            'api_base_url' => $this->getParameter('api_base_url'),
+        ]);
+    }
+}
diff --git a/yarn.lock b/yarn.lock
index 4a31d56..ea8973e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2119,10 +2119,10 @@
     postcss "^8.5.6"
     tailwindcss "4.2.1"
 
-"@tatevikgr/rest-api-client@^2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-2.0.5.tgz#790075dc66fcbe90b6c5e823d23fd2c72b34c925"
-  integrity sha512-Nc2YVWKIP4CD+TEXxkBtko/eQWtGT2zTW8VShrHHQd5e7+8ZtRs9/DOr5gka/roOEE+srU0KZDRtm91c+SYnVw==
+"@tatevikgr/rest-api-client@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-2.0.6.tgz#176fb6995663ae16df927938ee56ff93f37930ea"
+  integrity sha512-AFNjgGkwWug4RXCUxcxWlQ+9HGbZXvLA9Yag4H5OWywGcPRHSShGucL+807u34ehxrrHk4ostJBbalEKPU+U6Q==
   dependencies:
     axios "^1.6.0"
 

From 3d29ea00a822c1fdb8a8de9158cdf83d51e792e0 Mon Sep 17 00:00:00 2001
From: Tatevik <tatevikg1@gmail.com>
Date: Wed, 22 Apr 2026 14:40:14 +0400
Subject: [PATCH 2/5] Templates default

---
 assets/router/index.js                        |   1 +
 .../components/dashboard/QuickActionsCard.vue |   4 +-
 .../components/templates/TemplateLibrary.vue  | 181 ++++++++++++++++--
 assets/vue/views/TemplateEditView.vue         |  89 ++++++---
 package.json                                  |   2 +-
 src/Controller/TemplatesController.php        |  10 +
 templates/auth/login.html.twig                |   2 +-
 yarn.lock                                     |   8 +-
 8 files changed, 253 insertions(+), 44 deletions(-)

diff --git a/assets/router/index.js b/assets/router/index.js
index 715f3f7..e1bfe66 100644
--- a/assets/router/index.js
+++ b/assets/router/index.js
@@ -16,6 +16,7 @@ export const router = createRouter({
         { path: '/lists', name: 'lists', component: ListsView, meta: { title: 'Lists' } },
         { path: '/campaigns', name: 'campaigns', component: CampaignsView, meta: { title: 'Campaigns' } },
         { path: '/templates', name: 'templates', component: TemplatesView, meta: { title: 'Templates' } },
+        { path: '/templates/create', name: 'template-create', component: TemplateEditView, meta: { title: 'Create Template' } },
         { path: '/templates/:templateId/edit', name: 'template-edit', component: TemplateEditView, meta: { title: 'Edit Template' } },
         { path: '/campaigns/create', name: 'campaign-create', component: CampaignEditView, meta: { title: 'Create Campaign' } },
         { path: '/campaigns/:campaignId/edit', name: 'campaign-edit', component: CampaignEditView, meta: { title: 'Edit Campaign' } },
diff --git a/assets/vue/components/dashboard/QuickActionsCard.vue b/assets/vue/components/dashboard/QuickActionsCard.vue
index 51e5419..ba403f4 100644
--- a/assets/vue/components/dashboard/QuickActionsCard.vue
+++ b/assets/vue/components/dashboard/QuickActionsCard.vue
@@ -81,9 +81,9 @@
 import BaseCard from '../../components/base/BaseCard.vue'
 
 const quickActions = [
-  { id: 'campaign', label: 'New Campaign', href: '/campaigns' },
+  { id: 'campaign', label: 'New Campaign', href: '/campaigns/create' },
   { id: 'subscribers', label: 'Add Subscribers', href: '/subscribers' },
-  { id: 'import', label: 'Import List', href: '/subscribers' },
+  { id: 'import', label: 'Import List', href: '/lists' },
   { id: 'templates', label: 'Manage Templates', href: '/templates' },
 ]
 </script>
diff --git a/assets/vue/components/templates/TemplateLibrary.vue b/assets/vue/components/templates/TemplateLibrary.vue
index 5e3f99b..a7adc40 100644
--- a/assets/vue/components/templates/TemplateLibrary.vue
+++ b/assets/vue/components/templates/TemplateLibrary.vue
@@ -1,11 +1,19 @@
 <template>
   <section class="bg-white rounded-xl border border-slate-200 shadow-sm">
     <header class="p-6 border-b border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-4">
-      <h2 class="text-xl font-bold text-slate-900">Email Template Library</h2>
+      <h2 class="text-xl font-bold text-slate-900">Templates</h2>
       <div class="flex gap-2">
+        <button
+          class="px-4 py-2 border border-slate-200 hover:bg-slate-50 text-slate-700 text-sm font-medium rounded-lg flex items-center gap-2 transition-colors"
+          type="button"
+          @click="openDefaultTemplateModal"
+        >
+          Add Template From Default
+        </button>
         <button
           class="px-4 py-2 bg-ext-wf1 hover:bg-ext-wf3 text-white text-sm font-medium rounded-lg flex items-center gap-2 transition-colors"
           type="button"
+          @click="goToCreateTemplate"
         >
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <path d="M5 12h14"></path>
@@ -29,7 +37,7 @@
         No templates found.
       </div>
 
-      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div v-else class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
         <article
           v-for="templateItem in templates"
           :key="templateItem.id"
@@ -38,7 +46,7 @@
           <div class="aspect-video bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-6xl">
             <img
               :src="getTemplateImage(templateItem)"
-              :alt="`Template #${templateItem.id}`"
+              :alt="`T#${templateItem.id}`"
               class="w-full h-full object-cover"
             >
           </div>
@@ -64,14 +72,6 @@
                 Edit
               </button>
 
-              <button
-                class="px-3 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors"
-                type="button"
-                aria-label="Copy template"
-              >
-                <BaseIcon name="copy" />
-              </button>
-
               <button
                 class="px-3 py-2 border border-slate-200 rounded-lg hover:bg-red-50 transition-colors"
                 type="button"
@@ -85,10 +85,94 @@
       </div>
     </div>
   </section>
+
+  <div
+    v-if="isDefaultTemplateModalOpen"
+    class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
+    aria-labelledby="default-template-modal-title"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div
+      class="fixed inset-0 bg-slate-900/50 transition-opacity"
+      aria-hidden="true"
+      @click="closeDefaultTemplateModal"
+    ></div>
+
+    <form class="w-full sm:max-w-lg z-10" @submit.prevent="submitCreateFromDefault">
+      <div class="bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 space-y-4">
+          <div class="flex justify-between items-center">
+            <h3 id="default-template-modal-title" class="text-lg leading-6 font-medium text-slate-900">
+              Add Template From Default
+            </h3>
+            <button type="button" class="text-slate-400 hover:text-slate-500" @click="closeDefaultTemplateModal">
+              <BaseIcon name="close" class="w-5 h-5" />
+            </button>
+          </div>
+
+          <div v-if="isDefaultTemplatesLoading" class="text-sm text-slate-500">
+            Loading default templates...
+          </div>
+
+          <div v-else class="space-y-2">
+            <label for="default-template-select" class="block text-sm font-medium text-slate-700">Default template</label>
+            <select
+              id="default-template-select"
+              v-model="selectedDefaultTemplateKey"
+              class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+              :disabled="isCreatingFromDefault || defaultTemplates.length === 0"
+            >
+              <option value="">Select a default template</option>
+              <option
+                v-for="defaultTemplate in defaultTemplates"
+                :key="defaultTemplate.key"
+                :value="defaultTemplate.key"
+              >
+                {{ defaultTemplate.name }}
+              </option>
+            </select>
+
+            <p
+              v-if="selectedDefaultTemplateDescription"
+              class="text-xs text-slate-500"
+            >
+              {{ selectedDefaultTemplateDescription }}
+            </p>
+          </div>
+
+          <p v-if="defaultTemplatesError" class="text-sm text-red-600">
+            {{ defaultTemplatesError }}
+          </p>
+          <p v-if="createFromDefaultError" class="text-sm text-red-600">
+            {{ createFromDefaultError }}
+          </p>
+        </div>
+
+        <div class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
+          <button
+            type="submit"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-ext-wf1 text-base font-medium text-white hover:bg-ext-wf3 focus:outline-none sm:w-auto sm:text-sm disabled:opacity-50"
+            :disabled="isCreatingFromDefault || isDefaultTemplatesLoading || !selectedDefaultTemplateKey"
+          >
+            {{ isCreatingFromDefault ? 'Adding...' : 'Add' }}
+          </button>
+          <button
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none sm:mt-0 sm:w-auto sm:text-sm"
+            :disabled="isCreatingFromDefault"
+            @click="closeDefaultTemplateModal"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import BaseIcon from '../base/BaseIcon.vue'
 import { templateClient } from '../../api'
@@ -97,6 +181,13 @@ const router = useRouter()
 const templates = ref([])
 const isLoading = ref(false)
 const errorMessage = ref('')
+const isDefaultTemplateModalOpen = ref(false)
+const defaultTemplates = ref([])
+const isDefaultTemplatesLoading = ref(false)
+const defaultTemplatesError = ref('')
+const selectedDefaultTemplateKey = ref('')
+const isCreatingFromDefault = ref(false)
+const createFromDefaultError = ref('')
 
 const getTemplateImage = (templateItem) => {
   const images = templateItem?.images
@@ -143,6 +234,72 @@ const goToEditTemplate = (templateId) => {
   router.push(`/templates/${templateId}/edit`)
 }
 
+const goToCreateTemplate = () => {
+  router.push('/templates/create')
+}
+
+const selectedDefaultTemplateDescription = computed(() => {
+  const selectedTemplate = defaultTemplates.value.find((templateItem) => templateItem.key === selectedDefaultTemplateKey.value)
+  return selectedTemplate?.description || ''
+})
+
+const loadDefaultTemplates = async () => {
+  isDefaultTemplatesLoading.value = true
+  defaultTemplatesError.value = ''
+
+  try {
+    const response = await templateClient.getDefaultTemplates()
+    defaultTemplates.value = Array.isArray(response) ? response : []
+    selectedDefaultTemplateKey.value = ''
+  } catch (error) {
+    console.error('Failed to load default templates:', error)
+    defaultTemplatesError.value = 'Failed to load default templates.'
+    defaultTemplates.value = []
+    selectedDefaultTemplateKey.value = ''
+  } finally {
+    isDefaultTemplatesLoading.value = false
+  }
+}
+
+const openDefaultTemplateModal = async () => {
+  isDefaultTemplateModalOpen.value = true
+  createFromDefaultError.value = ''
+  await loadDefaultTemplates()
+}
+
+const closeDefaultTemplateModal = () => {
+  if (isCreatingFromDefault.value) {
+    return
+  }
+
+  isDefaultTemplateModalOpen.value = false
+}
+
+const submitCreateFromDefault = async () => {
+  if (isCreatingFromDefault.value) {
+    return
+  }
+
+  if (!selectedDefaultTemplateKey.value) {
+    createFromDefaultError.value = 'Please select a default template.'
+    return
+  }
+
+  isCreatingFromDefault.value = true
+  createFromDefaultError.value = ''
+
+  try {
+    await templateClient.createFromDefault(selectedDefaultTemplateKey.value)
+    isDefaultTemplateModalOpen.value = false
+    await loadTemplates()
+  } catch (error) {
+    console.error('Failed to create template from default:', error)
+    createFromDefaultError.value = error?.message || 'Failed to create template from default.'
+  } finally {
+    isCreatingFromDefault.value = false
+  }
+}
+
 onMounted(() => {
   loadTemplates()
 })
diff --git a/assets/vue/views/TemplateEditView.vue b/assets/vue/views/TemplateEditView.vue
index 5a4bf01..7f4d1c0 100644
--- a/assets/vue/views/TemplateEditView.vue
+++ b/assets/vue/views/TemplateEditView.vue
@@ -1,21 +1,32 @@
 <template>
   <AdminLayout>
-    <section class="max-w-3xl bg-white rounded-xl border border-slate-200 shadow-sm">
-      <header class="p-6 border-b border-slate-200">
-        <h1 class="text-xl font-bold text-slate-900">Edit Template</h1>
-      </header>
-
-      <div class="p-6">
-        <div v-if="isLoading" class="py-8 text-center text-slate-500">
-          Loading template...
+    <div class="space-y-6 animate-in fade-in duration-300">
+      <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4 sm:p-6">
+        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <p class="text-xs uppercase tracking-wide text-slate-500">Template</p>
+            <h2 class="text-xl font-bold text-slate-900">{{ pageTitle }}</h2>
+          </div>
+
+          <RouterLink
+            to="/templates"
+            class="inline-flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
+          >
+            Back to Templates
+          </RouterLink>
         </div>
+      </div>
 
-        <div v-else class="space-y-6">
-          <div v-if="loadError" class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
-            {{ loadError }}
-          </div>
+      <div v-if="isLoading" class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
+        Loading template...
+      </div>
 
-          <form v-else class="space-y-6" @submit.prevent="saveTemplate">
+      <div v-else-if="loadError" class="rounded-xl border border-slate-200 bg-white p-6 text-sm text-red-600 shadow-sm">
+        {{ loadError }}
+      </div>
+
+      <section v-else class="bg-white rounded-xl border border-slate-200 shadow-sm p-6 sm:p-8">
+        <form class="space-y-6" @submit.prevent="saveTemplate">
             <div class="space-y-2">
               <label for="template-title" class="block text-sm font-medium text-slate-700">Title</label>
               <input
@@ -114,25 +125,25 @@
                 class="px-4 py-2 bg-ext-wf1 hover:bg-ext-wf3 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
                 :disabled="isSaving"
               >
-                {{ isSaving ? 'Saving...' : 'Save' }}
+                {{ saveButtonLabel }}
               </button>
             </div>
-          </form>
-        </div>
-      </div>
-    </section>
+        </form>
+      </section>
+    </div>
   </AdminLayout>
 </template>
 
 <script setup>
 import { computed, onMounted, ref } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
+import { RouterLink, useRoute, useRouter } from 'vue-router'
 import AdminLayout from '../layouts/AdminLayout.vue'
 import CkEditorField from '../components/base/CkEditorField.vue'
 import { templateClient } from '../api'
 import { Requests } from "@tatevikgr/rest-api-client";
 
 const route = useRoute()
+const router = useRouter()
 
 const isLoading = ref(false)
 const loadError = ref('')
@@ -149,11 +160,29 @@ const form = ref({
   checkExternalImages: false
 })
 
-const templateId = computed(() => route.params.templateId)
+const isCreateMode = computed(() => route.name === 'template-create')
+const templateId = computed(() => Number(route.params.templateId))
+const pageTitle = computed(() => isCreateMode.value ? 'Create Template' : `Edit Template #${templateId.value}`)
+const saveButtonLabel = computed(() => {
+  if (isSaving.value) {
+    return isCreateMode.value ? 'Creating...' : 'Saving...'
+  }
+
+  return isCreateMode.value ? 'Create' : 'Save'
+})
 
 const loadTemplate = async () => {
-  if (!templateId.value) {
-    loadError.value = 'Template ID is missing.'
+  if (isCreateMode.value) {
+    form.value.title = ''
+    form.value.content = ''
+    form.value.text = ''
+    form.value.file = null
+    loadError.value = ''
+    return
+  }
+
+  if (!Number.isFinite(templateId.value) || templateId.value <= 0) {
+    loadError.value = 'Template ID is invalid.'
     return
   }
 
@@ -194,8 +223,8 @@ const handleFileChange = (event) => {
 }
 
 const saveTemplate = async () => {
-  if (!templateId.value) {
-    saveError.value = 'Template ID is missing.'
+  if (!isCreateMode.value && (!Number.isFinite(templateId.value) || templateId.value <= 0)) {
+    saveError.value = 'Template ID is invalid.'
     return
   }
 
@@ -218,6 +247,18 @@ const saveTemplate = async () => {
       form.value.checkImages,
       form.value.checkExternalImages,
     )
+    if (isCreateMode.value) {
+      const createdTemplate = await templateClient.createTemplate(request)
+      const createdTemplateId = Number(createdTemplate?.id)
+
+      saveSuccess.value = 'Template created successfully.'
+
+      if (Number.isFinite(createdTemplateId) && createdTemplateId > 0) {
+        await router.replace(`/templates/${createdTemplateId}/edit`)
+      }
+      return
+    }
+
     await templateClient.updateTemplate(request, templateId.value)
 
     saveSuccess.value = 'Template updated successfully.'
diff --git a/package.json b/package.json
index 1865a30..e2d293a 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@ckeditor/ckeditor5-vue": "^7.4.0",
-    "@tatevikgr/rest-api-client": "^2.0.6",
+    "@tatevikgr/rest-api-client": "^2.0.7",
     "apexcharts": "^5.10.4",
     "ckeditor5": "^48.0.0",
     "vue": "^3.5.16",
diff --git a/src/Controller/TemplatesController.php b/src/Controller/TemplatesController.php
index b76c428..4ff011d 100644
--- a/src/Controller/TemplatesController.php
+++ b/src/Controller/TemplatesController.php
@@ -22,6 +22,16 @@ public function index(Request $request): Response
         ]);
     }
 
+    #[Route('/create', name: 'create', methods: ['GET'])]
+    public function create(Request $request): Response
+    {
+        return $this->render('@PhpListFrontend/spa.html.twig', [
+            'page' => 'Create Template',
+            'api_token' => $request->getSession()->get('auth_token'),
+            'api_base_url' => $this->getParameter('api_base_url'),
+        ]);
+    }
+
     #[Route('/{templateId}/edit', name: 'edit', methods: ['GET'])]
     public function edit(Request $request, int $templateId): Response
     {
diff --git a/templates/auth/login.html.twig b/templates/auth/login.html.twig
index d927e01..e32f82c 100644
--- a/templates/auth/login.html.twig
+++ b/templates/auth/login.html.twig
@@ -41,7 +41,7 @@
                             </div>
 
                             <div class="mb-6">
-                                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-semibold text-white bg-ext-wf1 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
+                                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-semibold text-white bg-ext-wf1 hover:bg-ext-wf3 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                                     Sign In
                                 </button>
                             </div>
diff --git a/yarn.lock b/yarn.lock
index ea8973e..295511e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2119,10 +2119,10 @@
     postcss "^8.5.6"
     tailwindcss "4.2.1"
 
-"@tatevikgr/rest-api-client@^2.0.6":
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-2.0.6.tgz#176fb6995663ae16df927938ee56ff93f37930ea"
-  integrity sha512-AFNjgGkwWug4RXCUxcxWlQ+9HGbZXvLA9Yag4H5OWywGcPRHSShGucL+807u34ehxrrHk4ostJBbalEKPU+U6Q==
+"@tatevikgr/rest-api-client@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-2.0.7.tgz#4f653ec3dd43ab98997d67ee9e1af4bbc980ceb7"
+  integrity sha512-NyEs+z89RwFlS8bzL2ensY1iGXKgdj0fk89hzHJIBfyXC+Dq+5cFiYhoO23uDn66SweenBXpNRSn4LsugO46Ew==
   dependencies:
     axios "^1.6.0"
 

From 2e3ad096a6c57387deda0b889f87cd4ba44bdfdb Mon Sep 17 00:00:00 2001
From: Tatevik <tatevikg1@gmail.com>
Date: Wed, 22 Apr 2026 15:34:34 +0400
Subject: [PATCH 3/5] Templates: delete

---
 .../components/templates/TemplateLibrary.vue  | 28 ++++++++++++++++++-
 assets/vue/views/TemplateEditView.vue         |  2 +-
 package.json                                  |  2 +-
 yarn.lock                                     |  8 +++---
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/assets/vue/components/templates/TemplateLibrary.vue b/assets/vue/components/templates/TemplateLibrary.vue
index a7adc40..e82abaf 100644
--- a/assets/vue/components/templates/TemplateLibrary.vue
+++ b/assets/vue/components/templates/TemplateLibrary.vue
@@ -76,6 +76,7 @@
                 class="px-3 py-2 border border-slate-200 rounded-lg hover:bg-red-50 transition-colors"
                 type="button"
                 aria-label="Delete template"
+                @click="deleteTemplate(templateItem.id)"
               >
                 <BaseIcon name="delete" />
               </button>
@@ -221,7 +222,19 @@ const loadTemplates = async () => {
 
   try {
     const response = await templateClient.getTemplates(0, 1000)
-    templates.value = Array.isArray(response?.items) ? response.items : []
+
+    const items = Array.isArray(response?.items) ? response.items : []
+
+    templates.value = items.sort((a, b) => {
+      const aOrder = a.listOrder ?? Number.MAX_SAFE_INTEGER
+      const bOrder = b.listOrder ?? Number.MAX_SAFE_INTEGER
+
+      if (aOrder !== bOrder) {
+        return aOrder - bOrder
+      }
+
+      return (a.name ?? '').localeCompare(b.name ?? '')
+    })
   } catch (error) {
     console.error('Failed to load templates:', error)
     errorMessage.value = 'Failed to load templates.'
@@ -238,6 +251,19 @@ const goToCreateTemplate = () => {
   router.push('/templates/create')
 }
 
+const deleteTemplate = async (templateId) => {
+  if (!confirm('Are you sure you want to delete this template?')) {
+    return
+  }
+
+  try {
+    await templateClient.deleteTemplate(templateId)
+    templates.value = templates.value.filter((template) => template.id !== templateId)
+  } catch (error) {
+    console.error('Failed to delete template:', error)
+  }
+}
+
 const selectedDefaultTemplateDescription = computed(() => {
   const selectedTemplate = defaultTemplates.value.find((templateItem) => templateItem.key === selectedDefaultTemplateKey.value)
   return selectedTemplate?.description || ''
diff --git a/assets/vue/views/TemplateEditView.vue b/assets/vue/views/TemplateEditView.vue
index 7f4d1c0..68b41d3 100644
--- a/assets/vue/views/TemplateEditView.vue
+++ b/assets/vue/views/TemplateEditView.vue
@@ -238,7 +238,7 @@ const saveTemplate = async () => {
   saveSuccess.value = ''
 
   try {
-    const request = new Requests.CreateTemplateRequest(
+    const request = new Requests.TemplateRequest(
       form.value.title,
       form.value.content,
       form.value.text,
diff --git a/package.json b/package.json
index e2d293a..43f74e5 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@ckeditor/ckeditor5-vue": "^7.4.0",
-    "@tatevikgr/rest-api-client": "^2.0.7",
+    "@tatevikgr/rest-api-client": "^2.1.0",
     "apexcharts": "^5.10.4",
     "ckeditor5": "^48.0.0",
     "vue": "^3.5.16",
diff --git a/yarn.lock b/yarn.lock
index 295511e..7e07567 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2119,10 +2119,10 @@
     postcss "^8.5.6"
     tailwindcss "4.2.1"
 
-"@tatevikgr/rest-api-client@^2.0.7":
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-2.0.7.tgz#4f653ec3dd43ab98997d67ee9e1af4bbc980ceb7"
-  integrity sha512-NyEs+z89RwFlS8bzL2ensY1iGXKgdj0fk89hzHJIBfyXC+Dq+5cFiYhoO23uDn66SweenBXpNRSn4LsugO46Ew==
+"@tatevikgr/rest-api-client@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-2.1.0.tgz#9b0f519378fd9301e7fdb8124f11d3bc662e791f"
+  integrity sha512-Gp0L67gMMmZK12McgBMxOb8+PtDr0nnZC1B1aO2aGTz3nz3lQ7GvwQpVFNTbq0pQWuDG4rxWS1tJM3nttgV3oQ==
   dependencies:
     axios "^1.6.0"
 

From 5763fbb157d0709203dd6f1db8d48531083ea7cb Mon Sep 17 00:00:00 2001
From: Tatevik <tatevikg1@gmail.com>
Date: Thu, 23 Apr 2026 11:44:43 +0400
Subject: [PATCH 4/5] Template: icons

---
 assets/vue/components/base/BaseIcon.vue       |  6 ++-
 .../campaigns/CampaignDirectory.vue           | 37 +++++++++-----
 assets/vue/components/lists/ListDirectory.vue | 15 ++++--
 .../subscribers/SubscriberDirectory.vue       |  2 +-
 .../subscribers/SubscriberTable.vue           | 24 +++++----
 .../components/templates/TemplateLibrary.vue  | 17 ++++---
 assets/vue/views/ListSubscribersView.vue      | 16 ++++--
 assets/vue/views/TemplateEditView.vue         | 50 +++++++++++++++----
 8 files changed, 115 insertions(+), 52 deletions(-)

diff --git a/assets/vue/components/base/BaseIcon.vue b/assets/vue/components/base/BaseIcon.vue
index c427505..2955106 100644
--- a/assets/vue/components/base/BaseIcon.vue
+++ b/assets/vue/components/base/BaseIcon.vue
@@ -24,7 +24,7 @@ const props = defineProps({
 const icons = {
   users: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>`,
 
-  addUser: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-plus w-4 h-4 mt-0.5 text-emerald-600" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><line x1="19" x2="19" y1="8" y2="14"></line><line x1="22" x2="16" y1="11" y2="11"></line></svg>`,
+  addUser: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-plus w-4 h-4 mt-0.5" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><line x1="19" x2="19" y1="8" y2="14"></line><line x1="22" x2="16" y1="11" y2="11"></line></svg>`,
 
   removeUser: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-minus w-4 h-4 mt-0.5 text-red-600" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><line x1="22" x2="16" y1="11" y2="11"></line></svg>`,
 
@@ -91,6 +91,10 @@ const icons = {
   plugin: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package w-6 h-6 text-purple-600 dark:text-purple-400" aria-hidden="true"><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"></path><path d="M12 22V12"></path><polyline points="3.29 7 12 12 20.71 7"></polyline><path d="m7.5 4.27 9 5.15"></path></svg>`,
 
   chevronDown: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>`,
+
+  pause: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="5" width="3" height="14" rx="1"></rect><rect x="14" y="5" width="3" height="14" rx="1"></rect></svg>`,
+
+  start: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 4 20 12 6 20 6 4" rx="1"></polygon></svg>`,
 };
 
 const svg = computed(() => icons[props.name] || "");
diff --git a/assets/vue/components/campaigns/CampaignDirectory.vue b/assets/vue/components/campaigns/CampaignDirectory.vue
index 7683a3c..91bedec 100644
--- a/assets/vue/components/campaigns/CampaignDirectory.vue
+++ b/assets/vue/components/campaigns/CampaignDirectory.vue
@@ -90,54 +90,60 @@
               <button
                 v-if="campaign.statusKey === 'draft'"
                 type="button"
-                class="px-2.5 py-1 text-xs font-medium text-rose-700 bg-rose-50 border border-rose-200 rounded-md hover:bg-rose-100 disabled:opacity-50"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleDelete(campaign)"
               >
+                <BaseIcon name="delete" class="w-3.5 h-3.5" />
                 Delete
               </button>
               <button
                 v-else-if="campaign.statusKey === 'active'"
                 type="button"
-                class="px-2.5 py-1 text-xs font-medium text-rose-700 bg-rose-50 border border-rose-200 rounded-md hover:bg-rose-100 disabled:opacity-50"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleSuspend(campaign.id)"
               >
+                <BaseIcon name="pause" class="w-3.5 h-3.5" />
                 Suspend
               </button>
               <button
                 v-else
                 type="button"
-                class="px-2.5 py-1 text-xs font-medium text-amber-700 bg-amber-50 border border-amber-200 rounded-md hover:bg-amber-100 disabled:opacity-50"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-amber-200 text-amber-600 hover:bg-amber-50 transition-colors disabled:opacity-50"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleRequeue(campaign.id)"
               >
+                <BaseIcon name="start" class="w-3.5 h-3.5" />
                 Requeue
               </button>
               <button
                 v-if="campaign.statusKey === 'sent'"
                 type="button"
-                class="px-2.5 py-1 text-xs font-medium text-slate-700 bg-slate-100 border border-slate-200 rounded-md hover:bg-slate-200 disabled:opacity-50"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-green-200 text-green-700 hover:bg-green-50 transition-colors"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleCopyToDraft(campaign.id)"
               >
+                <BaseIcon name="copy" class="w-3.5 h-3.5" />
                 Copy to draft
               </button>
               <button
                   v-if="campaign.statusKey === 'draft'"
                   type="button"
-                  class="px-2.5 py-1 text-xs font-medium text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-md hover:bg-emerald-100 disabled:opacity-50"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors disabled:opacity-50"
                   :disabled="isActionLoading(campaign.id)"
                   @click="handleEdit(campaign.id)"
               >
+                <BaseIcon name="edit" class="w-3.5 h-3.5" />
                 Edit
               </button>
               <button
                   type="button"
-                  class="px-2.5 py-1 text-xs font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-md hover:bg-blue-100 disabled:opacity-50"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
                   :disabled="isActionLoading(campaign.id)"
                   @click="handleView(campaign.id)"
               >
+                <BaseIcon name="eye" class="w-3.5 h-3.5" />
                 View
               </button>
             </div>
@@ -224,54 +230,60 @@
             <button
               v-if="campaign.statusKey === 'draft'"
               type="button"
-              class="px-2.5 py-1 text-xs font-medium text-rose-700 bg-rose-50 border border-rose-200 rounded-md hover:bg-rose-100 disabled:opacity-50"
+              class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
               :disabled="isActionLoading(campaign.id)"
               @click="handleDelete(campaign)"
             >
+              <BaseIcon name="delete" class="w-3.5 h-3.5" />
               Delete
             </button>
             <button
               v-else-if="campaign.statusKey === 'active'"
               type="button"
-              class="px-2.5 py-1 text-xs font-medium text-rose-700 bg-rose-50 border border-rose-200 rounded-md hover:bg-rose-100 disabled:opacity-50"
+              class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
               :disabled="isActionLoading(campaign.id)"
               @click="handleSuspend(campaign.id)"
             >
+              <BaseIcon name="pause" class="w-3.5 h-3.5" />
               Suspend
             </button>
             <button
               v-else
               type="button"
-              class="px-2.5 py-1 text-xs font-medium text-amber-700 bg-amber-50 border border-amber-200 rounded-md hover:bg-amber-100 disabled:opacity-50"
+              class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-amber-200 text-amber-600 hover:bg-amber-50 transition-colors disabled:opacity-50"
               :disabled="isActionLoading(campaign.id)"
               @click="handleRequeue(campaign.id)"
             >
+              <BaseIcon name="start" class="w-3.5 h-3.5" />
               Requeue
             </button>
             <button
               v-if="campaign.statusKey === 'sent'"
               type="button"
-              class="px-2.5 py-1 text-xs font-medium text-slate-700 bg-slate-100 border border-slate-200 rounded-md hover:bg-slate-200 disabled:opacity-50"
+              class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-green-200 text-green-700 hover:bg-green-50 transition-colors disabled:opacity-50"
               :disabled="isActionLoading(campaign.id)"
               @click="handleCopyToDraft(campaign.id)"
             >
+              <BaseIcon name="copy" class="w-3.5 h-3.5" />
               Copy to draft
             </button>
             <button
                 v-if="campaign.statusKey === 'draft'"
                 type="button"
-                class="px-2.5 py-1 text-xs font-medium text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-md hover:bg-emerald-100 disabled:opacity-50"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors disabled:opacity-50"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleEdit(campaign.id)"
             >
+              <BaseIcon name="edit" class="w-3.5 h-3.5" />
               Edit
             </button>
             <button
                 type="button"
-                class="px-2.5 py-1 text-xs font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-md hover:bg-blue-100 disabled:opacity-50"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
                 :disabled="isActionLoading(campaign.id)"
                 @click="handleView(campaign.id)"
             >
+              <BaseIcon name="eye" class="w-3.5 h-3.5" />
               View
             </button>
           </div>
@@ -333,6 +345,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { campaignClient, fetchAllLists, listMessagesClient, statisticsClient } from '../../api'
 import ViewCampaignModal from "./ViewCampaignModal.vue";
+import BaseIcon from '../base/BaseIcon.vue'
 
 const pageSize = 5
 const route = useRoute()
diff --git a/assets/vue/components/lists/ListDirectory.vue b/assets/vue/components/lists/ListDirectory.vue
index 5bf294b..082f47b 100644
--- a/assets/vue/components/lists/ListDirectory.vue
+++ b/assets/vue/components/lists/ListDirectory.vue
@@ -140,41 +140,46 @@
           <div class="grid grid-cols-2 gap-2">
             <button
                 type="button"
-                class="px-2.5 py-2 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
+                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
                 @click="handleDelete(list)"
             >
+              <BaseIcon name="delete" class="w-3.5 h-3.5" />
               Delete
             </button>
 
             <button
                 type="button"
-                class="px-2.5 py-2 text-xs font-medium rounded-md border border-emerald-200 text-emerald-700 hover:bg-emerald-50 transition-colors"
+                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-emerald-200 text-emerald-700 hover:bg-emerald-50 transition-colors"
                 @click="handleAddSubscriber(list)"
             >
+              <BaseIcon name="addUser" class="w-3.5 h-3.5" />
               Add Subscriber
             </button>
 
             <button
                 type="button"
-                class="px-2.5 py-2 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
                 @click="handleEdit(list)"
             >
+              <BaseIcon name="edit" class="w-3.5 h-3.5" />
               Edit
             </button>
 
             <button
                 type="button"
-                class="px-2.5 py-2 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 transition-colors"
+                class="inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 transition-colors"
                 @click="handleStartCampaign(list)"
             >
+              <BaseIcon name="plane" class="w-3.5 h-3.5" />
               Start Campaign
             </button>
 
             <button
                 type="button"
-                class="col-span-2 px-2.5 py-2 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                class="col-span-2 inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
                 @click="handleViewMembers(list)"
             >
+              <BaseIcon name="eye" class="w-3.5 h-3.5" />
               View Members
             </button>
           </div>
diff --git a/assets/vue/components/subscribers/SubscriberDirectory.vue b/assets/vue/components/subscribers/SubscriberDirectory.vue
index 35b427f..a53da9e 100644
--- a/assets/vue/components/subscribers/SubscriberDirectory.vue
+++ b/assets/vue/components/subscribers/SubscriberDirectory.vue
@@ -2,7 +2,7 @@
   <div class="bg-white rounded-xl border border-slate-200  shadow-sm overflow-hidden">
     <div class="p-4 sm:p-6 border-b border-slate-200 ">
       <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
-        <h2 class="text-xl font-bold text-slate-900 ">Subscriber Directory</h2>
+        <h2 class="text-xl font-bold text-slate-900 ">Subscribers</h2>
         <div class="flex flex-col sm:flex-row gap-2 w-full lg:w-auto">
           <div class="flex gap-2 flex-1 sm:w-[400px]">
             <div class="relative flex-1">
diff --git a/assets/vue/components/subscribers/SubscriberTable.vue b/assets/vue/components/subscribers/SubscriberTable.vue
index 3fae562..b4919c4 100644
--- a/assets/vue/components/subscribers/SubscriberTable.vue
+++ b/assets/vue/components/subscribers/SubscriberTable.vue
@@ -9,7 +9,7 @@
           <th class="px-6 py-4">Status</th>
           <th class="px-6 py-4 text-right">Lists</th>
           <th class="px-6 py-4">Created</th>
-          <th class="px-6 py-4 w-10"></th>
+          <th class="px-6 py-4 text-right">Actions</th>
         </tr>
       </thead>
       <tbody class="divide-y divide-slate-200">
@@ -48,10 +48,12 @@
           </td>
           <td class="px-6 py-4 text-right">
             <button
-              class="text-slate-400 hover:text-slate-600"
+              type="button"
+              class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
               @click="emit('view', subscriber.id)"
             >
-              <BaseIcon name="eye" class="w-4 h-4" />
+              <BaseIcon name="eye" class="w-3.5 h-3.5" />
+              View
             </button>
           </td>
         </tr>
@@ -69,13 +71,7 @@
           <span class="font-medium text-slate-900 truncate max-w-[180px]">
             {{ subscriber.email.split('@')[0] }}
           </span>
-          <div class="flex gap-2">
-            <button
-                class="text-slate-400 hover:text-slate-600 mr-2"
-                @click="emit('view', subscriber.id)"
-            >
-              <BaseIcon name="eye" class="w-4 h-4" />
-            </button>
+          <div class="flex items-center gap-2">
             <span
               class="px-2.5 py-0.5 rounded-full text-xs font-medium"
               :class="subscriber.confirmed ? statusClasses.active : statusClasses.unconfirmed"
@@ -88,6 +84,14 @@
             >
               blacklisted
             </span>
+            <button
+                type="button"
+                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                @click="emit('view', subscriber.id)"
+            >
+              <BaseIcon name="eye" class="w-3.5 h-3.5" />
+              View
+            </button>
           </div>
         </div>
         <div class="flex flex-col gap-1">
diff --git a/assets/vue/components/templates/TemplateLibrary.vue b/assets/vue/components/templates/TemplateLibrary.vue
index e82abaf..712e7a6 100644
--- a/assets/vue/components/templates/TemplateLibrary.vue
+++ b/assets/vue/components/templates/TemplateLibrary.vue
@@ -59,26 +59,27 @@
 
             <div class="flex justify-between items-center text-xs text-slate-400">
               <span>ID {{ templateItem.id }}</span>
-              <span>Order {{ templateItem.order ?? '-' }}</span>
+              <span>Order {{ templateItem.listOrder ?? '-' }}</span>
             </div>
 
-            <div class="mt-4 flex gap-2">
+            <div class="mt-4 grid grid-cols-2 gap-2">
               <button
-                class="flex-1 px-3 py-2 bg-ext-wf1 hover:bg-ext-wf3 text-white text-sm rounded-lg transition-colors flex items-center justify-center gap-1"
-                type="button"
-                @click="goToEditTemplate(templateItem.id)"
+                  class="w-full inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                  type="button"
+                  @click="goToEditTemplate(templateItem.id)"
               >
-                <BaseIcon name="edit" />
+                <BaseIcon name="edit" class="w-3.5 h-3.5" />
                 Edit
               </button>
 
               <button
-                class="px-3 py-2 border border-slate-200 rounded-lg hover:bg-red-50 transition-colors"
+                class="w-full inline-flex items-center justify-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
                 type="button"
                 aria-label="Delete template"
                 @click="deleteTemplate(templateItem.id)"
               >
-                <BaseIcon name="delete" />
+                <BaseIcon name="delete" class="w-3.5 h-3.5" />
+                Delete
               </button>
             </div>
           </div>
diff --git a/assets/vue/views/ListSubscribersView.vue b/assets/vue/views/ListSubscribersView.vue
index f51b621..762483f 100644
--- a/assets/vue/views/ListSubscribersView.vue
+++ b/assets/vue/views/ListSubscribersView.vue
@@ -42,10 +42,11 @@
               <span class="text-sm text-slate-600">Selected: {{ selectedSubscribers.length }}</span>
               <button
                   type="button"
-                  class="px-3 py-2 text-xs font-medium rounded-lg border border-red-200 text-red-700 hover:bg-red-50 disabled:opacity-50"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
                   :disabled="!hasSelection || actionLoading"
                   @click="deleteSelectedSubscribers"
               >
+                <BaseIcon name="delete" class="w-3.5 h-3.5" />
                 Delete Selected
               </button>
             </div>
@@ -64,19 +65,21 @@
 
               <button
                   type="button"
-                  class="px-3 py-2 text-xs font-medium rounded-lg border border-blue-200 text-blue-700 hover:bg-blue-50 disabled:opacity-50"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 transition-colors disabled:opacity-50"
                   :disabled="!hasSelection || !selectedTargetListId || actionLoading"
                   @click="copySelectedSubscribers"
               >
+                <BaseIcon name="copy" class="w-3.5 h-3.5" />
                 Copy Selected
               </button>
 
               <button
                   type="button"
-                  class="px-3 py-2 text-xs font-medium rounded-lg border border-amber-200 text-amber-700 hover:bg-amber-50 disabled:opacity-50"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-amber-200 text-amber-600 hover:bg-amber-50 transition-colors disabled:opacity-50"
                   :disabled="!hasSelection || !selectedTargetListId || actionLoading"
                   @click="moveSelectedSubscribers"
               >
+                <BaseIcon name="start" class="w-3.5 h-3.5" />
                 Move Selected
               </button>
             </div>
@@ -144,10 +147,11 @@
               <td class="px-6 py-4 text-right">
                 <button
                     type="button"
-                    class="px-3 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-700 hover:bg-red-50 disabled:opacity-50"
+                    class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
                     :disabled="actionLoading"
                     @click="deleteSingleSubscriber(subscriber)"
                 >
+                  <BaseIcon name="delete" class="w-3.5 h-3.5" />
                   Delete
                 </button>
               </td>
@@ -201,10 +205,11 @@
                   <p class="mt-2 text-xs text-slate-500">#{{ subscriber.id }} · {{formatDate(subscriber.createdAt) }}</p>
                   <button
                       type="button"
-                      class="mt-3 px-3 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-700 hover:bg-red-50 disabled:opacity-50"
+                      class="mt-3 inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
                       :disabled="actionLoading"
                       @click="deleteSingleSubscriber(subscriber)"
                   >
+                    <BaseIcon name="delete" class="w-3.5 h-3.5" />
                     Delete
                   </button>
                 </div>
@@ -255,6 +260,7 @@ import {computed, onMounted, ref, watch, watchEffect} from 'vue'
 import {useRoute} from 'vue-router'
 import AdminLayout from '../layouts/AdminLayout.vue'
 import ListSubscribersExportPanel from '../components/lists/ListSubscribersExportPanel.vue'
+import BaseIcon from '../components/base/BaseIcon.vue'
 import client, {subscriptionClient} from '../api'
 
 const route = useRoute()
diff --git a/assets/vue/views/TemplateEditView.vue b/assets/vue/views/TemplateEditView.vue
index 68b41d3..db1620c 100644
--- a/assets/vue/views/TemplateEditView.vue
+++ b/assets/vue/views/TemplateEditView.vue
@@ -27,16 +27,31 @@
 
       <section v-else class="bg-white rounded-xl border border-slate-200 shadow-sm p-6 sm:p-8">
         <form class="space-y-6" @submit.prevent="saveTemplate">
-            <div class="space-y-2">
-              <label for="template-title" class="block text-sm font-medium text-slate-700">Title</label>
-              <input
-                id="template-title"
-                v-model.trim="form.title"
-                type="text"
-                class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
-                placeholder="Enter template title"
-                required
-              >
+            <div class="grid gap-6 lg:grid-cols-2">
+              <div class="space-y-2">
+                <label for="template-title" class="block text-sm font-medium text-slate-700">Title</label>
+                <input
+                  id="template-title"
+                  v-model.trim="form.title"
+                  type="text"
+                  class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+                  placeholder="Enter template title"
+                  required
+                >
+              </div>
+
+              <div class="space-y-2">
+                <label for="template-list-order" class="block text-sm font-medium text-slate-700">List order</label>
+                <input
+                  id="template-list-order"
+                  v-model.trim="form.listOrder"
+                  type="number"
+                  min="0"
+                  step="1"
+                  class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+                  placeholder="Optional (e.g. 10)"
+                >
+              </div>
             </div>
 
             <CkEditorField
@@ -152,6 +167,7 @@ const saveError = ref('')
 const saveSuccess = ref('')
 const form = ref({
   title: '',
+  listOrder: '',
   content: '',
   text: '',
   file: null,
@@ -174,6 +190,7 @@ const saveButtonLabel = computed(() => {
 const loadTemplate = async () => {
   if (isCreateMode.value) {
     form.value.title = ''
+    form.value.listOrder = ''
     form.value.content = ''
     form.value.text = ''
     form.value.file = null
@@ -192,6 +209,9 @@ const loadTemplate = async () => {
   try {
     const template = await templateClient.getTemplate(templateId.value)
     form.value.title = template?.title || ''
+    form.value.listOrder = template?.listOrder !== null && template?.listOrder !== undefined
+      ? String(template.listOrder)
+      : ''
     form.value.content = template?.content || ''
     form.value.text = template?.text || ''
     form.value.file = null
@@ -238,6 +258,15 @@ const saveTemplate = async () => {
   saveSuccess.value = ''
 
   try {
+    const normalizedListOrder = form.value.listOrder === ''
+      ? null
+      : Number(form.value.listOrder)
+
+    if (normalizedListOrder !== null && (!Number.isInteger(normalizedListOrder) || normalizedListOrder < 0)) {
+      saveError.value = 'List order must be a non-negative integer.'
+      return
+    }
+
     const request = new Requests.TemplateRequest(
       form.value.title,
       form.value.content,
@@ -246,6 +275,7 @@ const saveTemplate = async () => {
       form.value.checkLinks,
       form.value.checkImages,
       form.value.checkExternalImages,
+      normalizedListOrder,
     )
     if (isCreateMode.value) {
       const createdTemplate = await templateClient.createTemplate(request)

From fc2c28bc256e2af76f949922f26ab1771b379cea Mon Sep 17 00:00:00 2001
From: Tatevik <tatevikg1@gmail.com>
Date: Thu, 23 Apr 2026 11:53:30 +0400
Subject: [PATCH 5/5] After review 0

---
 .../components/templates/TemplateLibrary.vue  |  6 ++---
 assets/vue/views/TemplateEditView.vue         | 22 ++++++++++---------
 src/Controller/TemplatesController.php        |  2 +-
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/assets/vue/components/templates/TemplateLibrary.vue b/assets/vue/components/templates/TemplateLibrary.vue
index 712e7a6..7f623e3 100644
--- a/assets/vue/components/templates/TemplateLibrary.vue
+++ b/assets/vue/components/templates/TemplateLibrary.vue
@@ -192,10 +192,10 @@ const isCreatingFromDefault = ref(false)
 const createFromDefaultError = ref('')
 
 const getTemplateImage = (templateItem) => {
-  const images = templateItem?.images
-  if (!images) return '';
+  const image = Array.isArray(templateItem?.images) ? templateItem.images[0] : null
+  if (!image?.mimetype || !image?.data) return ''
 
-  return `data:${images[0].mimetype};base64,${images[0].data}`;
+  return `data:${image.mimetype};base64,${image.data}`;
 }
 
 const getTemplateType = (templateItem) => {
diff --git a/assets/vue/views/TemplateEditView.vue b/assets/vue/views/TemplateEditView.vue
index db1620c..7e2b1ba 100644
--- a/assets/vue/views/TemplateEditView.vue
+++ b/assets/vue/views/TemplateEditView.vue
@@ -150,7 +150,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { RouterLink, useRoute, useRouter } from 'vue-router'
 import AdminLayout from '../layouts/AdminLayout.vue'
 import CkEditorField from '../components/base/CkEditorField.vue'
@@ -229,12 +229,10 @@ const populateTextFromContent = () => {
     return
   }
 
-  form.value.text = form.value.content
-    .replace(/<style[\s\S]*?<\/style>/gi, ' ')
-    .replace(/<script[\s\S]*?<\/script>/gi, ' ')
-    .replace(/<[^>]+>/g, ' ')
-    .replace(/\s+/g, ' ')
-    .trim()
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(form.value.content, 'text/html')
+  doc.querySelectorAll('script, style').forEach((element) => element.remove())
+  form.value.text = (doc.body.textContent || '').replace(/\s+/g, ' ')
 }
 
 const handleFileChange = (event) => {
@@ -300,7 +298,11 @@ const saveTemplate = async () => {
   }
 }
 
-onMounted(() => {
-  loadTemplate()
-})
+watch(
+    [isCreateMode, templateId],
+    () => {
+      loadTemplate()
+    },
+    { immediate: true }
+)
 </script>
diff --git a/src/Controller/TemplatesController.php b/src/Controller/TemplatesController.php
index 4ff011d..5d0cb29 100644
--- a/src/Controller/TemplatesController.php
+++ b/src/Controller/TemplatesController.php
@@ -16,7 +16,7 @@ class TemplatesController extends AbstractController
     public function index(Request $request): Response
     {
         return $this->render('@PhpListFrontend/spa.html.twig', [
-            'page' => 'Campaigns',
+            'page' => 'Templates',
             'api_token' => $request->getSession()->get('auth_token'),
             'api_base_url' => $this->getParameter('api_base_url'),
         ]);