@hed-hog/core 0.0.185 → 0.0.190

package/hedhog/frontend/app/mail/template/page.tsx.ejs

@@ -0,0 +1,1177 @@
+'use client';
+
+import type React from 'react';
+
+import { RichTextEditor } from '@/components/rich-text-editor';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { TagsInput } from '@/components/ui/tags-input';
+import { usePagination } from '@/hooks/use-pagination';
+import { formatDate } from '@/lib/format-date';
+import { useApp } from '@hed-hog/next-app-provider';
+import {
+  Database,
+  Download,
+  FileDown,
+  Mail as MailIcon,
+  Pencil,
+  Trash2,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { PageHeader } from '../../../../components/entity-list/page-header';
+
+interface Mail {
+  id: number;
+  slug: string;
+  created_at: string;
+  updated_at: string;
+  locale_id: number;
+  mail_id: number;
+  subject: string;
+  body: string;
+  mail_var: any[];
+  locale: {
+    code: string;
+  };
+}
+
+interface ImportResponse {
+  conflicts?: string[];
+  success?: boolean;
+  imported?: number;
+  templates?: number[];
+}
+
+export default function EmailTemplatesPage() {
+  const { locales, request, currentLocaleCode, getSettingValue } = useApp();
+  const t = useTranslations('core.MailPage');
+  const { items, refetch } = usePagination({ url: '/mail' });
+  const [templates, setTemplates] = useState<Mail[]>([]);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [templateToDelete, setTemplateToDelete] = useState<number | null>(null);
+  const [selectedTemplate, setSelectedTemplate] = useState<Mail | null>(null);
+  const [selectedLocaleCode, setSelectedLocaleCode] = useState<string>('en');
+  const [editMode, setEditMode] = useState(false);
+  const [formData, setFormData] = useState({
+    slug: '',
+    subject: '',
+    body: '',
+    variables: [] as string[],
+  });
+  const [variableTestValues, setVariableTestValues] = useState<
+    Record<string, string>
+  >({});
+  const [isTestEmailDialogOpen, setIsTestEmailDialogOpen] = useState(false);
+  const [testEmailRecipient, setTestEmailRecipient] = useState('');
+  const [testEmailVariableValues, setTestEmailVariableValues] = useState<
+    Record<string, string>
+  >({});
+  const [selectedTemplates, setSelectedTemplates] = useState<Set<number>>(
+    new Set()
+  );
+  const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
+  const [importFile, setImportFile] = useState<File | null>(null);
+  const [conflictingSlugs, setConflictingSlugs] = useState<string[]>([]);
+  const [isConflictDialogOpen, setIsConflictDialogOpen] = useState(false);
+
+  useEffect(() => {
+    if (items) {
+      const seen = new Set<number>();
+      const uniqueTemplates = items.filter((template: Mail) => {
+        if (seen.has(template.mail_id)) {
+          return false;
+        }
+        seen.add(template.mail_id);
+        return true;
+      });
+      setTemplates(uniqueTemplates);
+    }
+  }, [items]);
+
+  useEffect(() => {
+    const savedValues = localStorage.getItem('mail-template-variable-values');
+    if (savedValues) {
+      try {
+        const parsed = JSON.parse(savedValues);
+        setVariableTestValues(parsed);
+        setTestEmailVariableValues(parsed);
+      } catch (error) {
+        console.error('Error loading saved variable values:', error);
+      }
+    }
+
+    const savedRecipient = localStorage.getItem('mail-template-test-recipient');
+    if (savedRecipient) {
+      setTestEmailRecipient(savedRecipient);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (Object.keys(variableTestValues).length > 0) {
+      localStorage.setItem(
+        'mail-template-variable-values',
+        JSON.stringify(variableTestValues)
+      );
+    }
+  }, [variableTestValues]);
+
+  useEffect(() => {
+    if (Object.keys(testEmailVariableValues).length > 0) {
+      localStorage.setItem(
+        'mail-template-variable-values',
+        JSON.stringify(testEmailVariableValues)
+      );
+    }
+  }, [testEmailVariableValues]);
+
+  useEffect(() => {
+    if (testEmailRecipient) {
+      localStorage.setItem('mail-template-test-recipient', testEmailRecipient);
+    }
+  }, [testEmailRecipient]);
+
+  const handleCreate = () => {
+    setEditMode(false);
+    setSelectedTemplate(null);
+    setSelectedLocaleCode(locales[0]?.code || 'en');
+    setFormData({ slug: '', subject: '', body: '', variables: [] });
+
+    const savedValues = localStorage.getItem('mail-template-variable-values');
+    if (savedValues) {
+      try {
+        setVariableTestValues(JSON.parse(savedValues));
+      } catch (error) {
+        setVariableTestValues({});
+      }
+    } else {
+      setVariableTestValues({});
+    }
+
+    setIsDialogOpen(true);
+  };
+
+  const getLocaleIdFromCode = (code: string): number => {
+    const index = locales.findIndex((l) => l.code === code);
+    return index >= 0 ? index + 1 : 1;
+  };
+
+  const handleEdit = async (template: Mail) => {
+    setEditMode(true);
+    setSelectedTemplate(template);
+
+    const localeCode = template.locale?.code || locales[0]?.code || 'en';
+    setSelectedLocaleCode(localeCode);
+
+    setFormData({
+      slug: template.slug,
+      subject: template.subject || '',
+      body: template.body || '',
+      variables: template.mail_var.map((mv) => mv.name) || [],
+    });
+
+    const savedValues = localStorage.getItem('mail-template-variable-values');
+    if (savedValues) {
+      try {
+        setVariableTestValues(JSON.parse(savedValues));
+      } catch (error) {
+        setVariableTestValues({});
+      }
+    } else {
+      setVariableTestValues({});
+    }
+
+    setIsDialogOpen(true);
+
+    try {
+      const { data } = await request<Mail>({
+        url: `/mail/${template.mail_id || template.id}?locale=${localeCode}`,
+        method: 'GET',
+      });
+
+      setFormData({
+        slug: data.slug,
+        subject: data.subject || '',
+        body: data.body || '',
+        variables: data.mail_var.map((mv) => mv.name) || [],
+      });
+    } catch (error) {
+      console.error('Error loading template:', error);
+    }
+  };
+
+  const handleLocaleChange = async (localeCode: string) => {
+    setSelectedLocaleCode(localeCode);
+
+    if (selectedTemplate) {
+      try {
+        const { data } = await request<Mail>({
+          url: `/mail/${selectedTemplate.mail_id || selectedTemplate.id}?locale=${localeCode}`,
+          method: 'GET',
+        });
+
+        setFormData({
+          ...formData,
+          subject: data.subject || '',
+          body: data.body || '',
+        });
+      } catch (error) {
+        console.error('Error loading template locale:', error);
+      }
+    }
+  };
+
+  const handleDelete = (id: number) => {
+    setTemplateToDelete(id);
+    setIsDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    if (templateToDelete !== null) {
+      try {
+        await request({
+          url: '/mail',
+          method: 'DELETE',
+          data: { ids: [templateToDelete] },
+        });
+        refetch();
+        toast.success(t('deleteSuccess'));
+        setTemplateToDelete(null);
+        setIsDeleteDialogOpen(false);
+      } catch (error) {
+        toast.error(t('deleteError'));
+        console.error(error);
+      }
+    }
+  };
+
+  const handleGenerateMigration = async () => {
+    if (!selectedTemplate) {
+      toast.error(t('noTemplateSelected'));
+      return;
+    }
+
+    try {
+      const translationsData = await Promise.all(
+        locales.map(async (locale) => {
+          try {
+            const { data } = await request<Mail>({
+              url: `/mail/${selectedTemplate.mail_id || selectedTemplate.id}?locale=${locale.code}`,
+              method: 'GET',
+            });
+            return {
+              locale_code: locale.code,
+              subject: data.subject,
+              body: data.body,
+            };
+          } catch (error) {
+            console.warn(
+              `Failed to fetch translation for ${locale.code}:`,
+              error
+            );
+            return null;
+          }
+        })
+      );
+
+      const validTranslations = translationsData.filter(
+        (t) => t !== null && t.subject && t.body
+      );
+
+      if (validTranslations.length === 0) {
+        toast.error(t('noValidTranslations'));
+        return;
+      }
+
+      await request({
+        url: '/install/generate-mail-migration',
+        method: 'POST',
+        data: {
+          slug: formData.slug,
+          translations: validTranslations,
+          variables: formData.variables,
+        },
+      });
+
+      toast.success(t('migrationSuccess'));
+    } catch (error) {
+      console.error('Error generating migration:', error);
+      toast.error(t('migrationError'));
+    }
+  };
+
+  const handleSendTestEmail = () => {
+    const savedRecipient = localStorage.getItem('mail-template-test-recipient');
+    if (savedRecipient) {
+      setTestEmailRecipient(savedRecipient);
+    } else {
+      setTestEmailRecipient('');
+    }
+
+    const savedValues = localStorage.getItem('mail-template-variable-values');
+    if (savedValues) {
+      try {
+        setTestEmailVariableValues(JSON.parse(savedValues));
+      } catch (error) {
+        setTestEmailVariableValues({});
+      }
+    } else {
+      setTestEmailVariableValues({});
+    }
+
+    setIsTestEmailDialogOpen(true);
+  };
+
+  const handleConfirmSendTestEmail = async () => {
+    try {
+      await request({
+        url: '/mail/test',
+        method: 'POST',
+        data: {
+          slug: formData.slug,
+          email: testEmailRecipient,
+          subject: formData.subject,
+          body: formData.body,
+          variables: testEmailVariableValues,
+        },
+      });
+      toast.success(t('testEmailSuccess'));
+      setIsTestEmailDialogOpen(false);
+    } catch (error) {
+      console.error('Error sending test email:', error);
+      toast.error(t('testEmailError'));
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const localeId = getLocaleIdFromCode(selectedLocaleCode);
+    const payload = {
+      slug: formData.slug,
+      mail_locale: [
+        {
+          locale_id: localeId,
+          subject: formData.subject,
+          body: formData.body,
+        },
+      ],
+      mail_var: formData.variables.map((v) => ({
+        name: v.trim(),
+      })),
+    };
+
+    try {
+      if (editMode && selectedTemplate) {
+        await request<Mail>({
+          url: `/mail/${selectedTemplate.mail_id || selectedTemplate.id}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        toast.success(t('templateEditSuccess'));
+      } else {
+        await request<Mail>({
+          url: '/mail',
+          method: 'POST',
+          data: payload,
+        });
+        toast.success(t('templateCreateSuccess'));
+      }
+
+      refetch();
+      setIsDialogOpen(false);
+    } catch (error) {
+      console.error('Error saving template:', error);
+    }
+  };
+
+  const handleToggleTemplate = (id: number) => {
+    const newSelected = new Set(selectedTemplates);
+    if (newSelected.has(id)) {
+      newSelected.delete(id);
+    } else {
+      newSelected.add(id);
+    }
+    setSelectedTemplates(newSelected);
+  };
+
+  const handleToggleAll = () => {
+    if (selectedTemplates.size === templates.length) {
+      setSelectedTemplates(new Set());
+    } else {
+      setSelectedTemplates(new Set(templates.map((t) => t.mail_id || t.id)));
+    }
+  };
+
+  const handleExportSelected = async () => {
+    if (selectedTemplates.size === 0) {
+      toast.error(t('noTemplatesSelected'));
+      return;
+    }
+
+    try {
+      const templatesToExport = templates.filter((t) =>
+        selectedTemplates.has(t.mail_id || t.id)
+      );
+
+      const exportData = await Promise.all(
+        templatesToExport.map(async (template) => {
+          const allTranslations = await Promise.all(
+            locales.map(async (locale) => {
+              try {
+                const { data } = await request<Mail>({
+                  url: `/mail/${template.mail_id || template.id}?locale=${locale.code}`,
+                  method: 'GET',
+                });
+                return {
+                  code: locale.code,
+                  subject: data.subject,
+                  body: data.body,
+                };
+              } catch {
+                return null;
+              }
+            })
+          );
+
+          const validTranslations = allTranslations.filter(
+            (t) => t !== null && t.subject && t.body
+          );
+
+          return {
+            slug: template.slug,
+            translations: validTranslations,
+            variables: template.mail_var.map((v) => v.name),
+          };
+        })
+      );
+
+      const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+        type: 'application/json',
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `mail-templates-${new Date().toISOString().split('T')[0]}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      toast.success(t('exportSuccess'));
+    } catch (error) {
+      console.error('Error exporting templates:', error);
+      toast.error(t('exportError'));
+    }
+  };
+
+  const handleDownloadHTML = async (template: Mail) => {
+    try {
+      const response = await request({
+        url: `/mail/${template.mail_id || template.id}/html?locale=${template.locale.code}`,
+        method: 'GET',
+      });
+
+      const htmlContent =
+        typeof response.data === 'string'
+          ? response.data
+          : JSON.stringify(response.data);
+      const blob = new Blob([htmlContent], { type: 'text/html' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${template.slug}-${template.locale.code}.html`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      toast.success(t('htmlDownloadSuccess'));
+    } catch (error) {
+      console.error('Error downloading HTML:', error);
+      toast.error(t('htmlDownloadError'));
+    }
+  };
+
+  const downloadYAML = async (template: Mail) => {
+    try {
+      const allTranslations = await Promise.all(
+        locales.map(async (locale) => {
+          try {
+            const { data } = await request<Mail>({
+              url: `/mail/${template.mail_id || template.id}?locale=${locale.code}`,
+              method: 'GET',
+            });
+            return {
+              code: locale.code,
+              subject: data.subject,
+              body: data.body,
+            };
+          } catch {
+            return null;
+          }
+        })
+      );
+
+      const validTranslations = allTranslations.filter(
+        (t) => t !== null && t.subject && t.body
+      );
+
+      let yaml = `- slug: ${template.slug}\n`;
+      if (validTranslations.length > 0) {
+        yaml += '  subject:\n';
+        validTranslations.forEach((translation) => {
+          yaml += `    ${translation?.code}: ${translation?.subject}\n`;
+        });
+      }
+
+      if (validTranslations.length > 0) {
+        yaml += '  body:\n';
+        validTranslations.forEach((translation) => {
+          yaml += `    ${translation?.code}: |\n`;
+          const bodyLines = translation?.body.split('\n');
+          bodyLines?.forEach((line) => {
+            yaml += `      ${line}\n`;
+          });
+        });
+      }
+
+      if (formData.variables.length > 0) {
+        yaml += '  relations:\n';
+        yaml += '    mail_var:\n';
+        formData.variables.forEach((v) => {
+          yaml += `      - name: ${v}\n`;
+        });
+      }
+
+      const blob = new Blob([yaml], { type: 'text/yaml' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${template.slug}.yaml`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Error downloading YAML:', error);
+      toast.error(t('yamlDownloadError'));
+    }
+  };
+
+  const replaceVariablesInHTML = (html: string) => {
+    let result = html;
+    Object.entries(variableTestValues).forEach(([variable, value]) => {
+      if (value) {
+        const regex = new RegExp(`{{\\s*${variable}\\s*}}`, 'g');
+        result = result.replace(regex, value);
+      }
+    });
+    return result;
+  };
+
+  const renderHTMLPreview = (html: string) => {
+    const processedHtml = replaceVariablesInHTML(html);
+    return `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <meta charset="UTF-8">
+          <style>
+            body {
+              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+              line-height: 1.6;
+              color: #333;
+              max-width: 600px;
+              margin: 0 auto;
+              padding: 20px;
+            }
+            a {
+              color: #0066cc;
+              text-decoration: none;
+            }
+            a:hover {
+              text-decoration: underline;
+            }
+          </style>
+        </head>
+        <body>
+          ${processedHtml}
+        </body>
+      </html>
+    `;
+  };
+
+  const handleImportClick = () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'application/json';
+    input.onchange = async (e: any) => {
+      const file = e.target?.files?.[0];
+      if (file) {
+        setImportFile(file);
+        await processImportFile(file, false);
+      }
+    };
+    input.click();
+  };
+
+  const processImportFile = async (file: File, overwrite: boolean = false) => {
+    try {
+      const text = await file.text();
+      const data = JSON.parse(text);
+
+      const response = await request<ImportResponse>({
+        url: '/mail/import',
+        method: 'POST',
+        data: {
+          data,
+          overwrite,
+        },
+      });
+
+      if (response.data?.conflicts && response.data.conflicts.length > 0) {
+        setConflictingSlugs(response.data.conflicts);
+        setIsConflictDialogOpen(true);
+      } else {
+        toast.success(t('importSuccess'));
+        refetch();
+        setImportFile(null);
+      }
+    } catch (error: any) {
+      console.error('Error importing templates:', error);
+      const message = error?.response?.data?.message || t('importError');
+      toast.error(message);
+    }
+  };
+
+  const handleConfirmOverwrite = async () => {
+    if (importFile) {
+      setIsConflictDialogOpen(false);
+      await processImportFile(importFile, true);
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-screen px-4">
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbHome'), href: '/' },
+          { label: t('breadcrumbTitle') },
+        ]}
+        actions={[
+          ...(selectedTemplates.size > 0
+            ? [
+                {
+                  label: t('exportSelected'),
+                  onClick: handleExportSelected,
+                  variant: 'outline' as const,
+                },
+              ]
+            : []),
+          {
+            label: t('import'),
+            onClick: handleImportClick,
+            variant: 'outline' as const,
+          },
+          {
+            label: t('newTemplate'),
+            onClick: () => handleCreate(),
+            variant: 'default' as const,
+          },
+        ]}
+        title={t('title')}
+        description={t('description')}
+      />
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-12">
+              <Checkbox
+                checked={
+                  selectedTemplates.size === templates.length &&
+                  templates.length > 0
+                }
+                onCheckedChange={handleToggleAll}
+              />
+            </TableHead>
+            <TableHead>{t('tableSlug')}</TableHead>
+            <TableHead>{t('tableSubject')}</TableHead>
+            <TableHead>{t('tableVariables')}</TableHead>
+            <TableHead>{t('tableUpdated')}</TableHead>
+            <TableHead className="text-right">{t('tableActions')}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {templates.map((template) => (
+            <TableRow
+              key={template.id}
+              onDoubleClick={() => handleEdit(template)}
+              className="cursor-pointer"
+            >
+              <TableCell onClick={(e) => e.stopPropagation()}>
+                <Checkbox
+                  checked={selectedTemplates.has(
+                    template.mail_id || template.id
+                  )}
+                  onCheckedChange={() =>
+                    handleToggleTemplate(template.mail_id || template.id)
+                  }
+                />
+              </TableCell>
+              <TableCell className="font-mono text-sm">
+                {template.slug}
+              </TableCell>
+              <TableCell>{template.subject}</TableCell>
+              <TableCell>
+                <div className="flex flex-wrap gap-1">
+                  {template.mail_var.map((v, index) => (
+                    <Badge
+                      key={`${template.id}-${v.id}-${index}`}
+                      variant="secondary"
+                      className="text-xs"
+                    >
+                      {v.name}
+                    </Badge>
+                  ))}
+                </div>
+              </TableCell>
+              <TableCell className="text-muted-foreground">
+                {formatDate(
+                  template.updated_at,
+                  getSettingValue,
+                  currentLocaleCode
+                )}
+              </TableCell>
+              <TableCell className="text-right">
+                <div className="flex justify-end gap-2">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDownloadHTML(template);
+                    }}
+                    title={t('downloadHTML')}
+                  >
+                    <FileDown className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleEdit(template);
+                    }}
+                  >
+                    <Pencil className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDelete(Number(template.mail_id || template.id));
+                    }}
+                  >
+                    <Trash2 className="h-4 w-4 text-destructive" />
+                  </Button>
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="max-h-[90vh] max-w-[95vw] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              {editMode ? t('editTemplate') : t('newTemplateTitle')}
+            </DialogTitle>
+            <DialogDescription>
+              {editMode
+                ? t('editTemplateDescription')
+                : t('newTemplateDescription')}
+            </DialogDescription>
+          </DialogHeader>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="grid grid-cols-2 gap-6">
+              <div className="space-y-4 overflow-y-auto max-h-[calc(90vh-200px)] pr-4">
+                <div className="space-y-2">
+                  <Label htmlFor="slug">{t('slugLabel')}</Label>
+                  <Input
+                    id="slug"
+                    value={formData.slug}
+                    onChange={(e) =>
+                      setFormData({ ...formData, slug: e.target.value })
+                    }
+                    placeholder={t('slugPlaceholder')}
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="subject">{t('subjectLabel')}</Label>
+                  <Input
+                    id="subject"
+                    value={formData.subject}
+                    onChange={(e) =>
+                      setFormData({ ...formData, subject: e.target.value })
+                    }
+                    placeholder={t('subjectPlaceholder')}
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="variables">{t('variablesLabel')}</Label>
+                  <TagsInput
+                    id="variables"
+                    value={formData.variables}
+                    onChange={(val) =>
+                      setFormData({ ...formData, variables: val })
+                    }
+                    placeholder={t('variablesPlaceholder')}
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    {t('variablesHelp')}
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="body">{t('bodyLabel')}</Label>
+                  <RichTextEditor
+                    key={selectedLocaleCode}
+                    value={formData.body}
+                    onChange={(value) =>
+                      setFormData({ ...formData, body: value })
+                    }
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <div className="absolute top-4 right-8 space-y-2">
+                  <Label htmlFor="locale-select">{t('localeLabel')}</Label>
+                  <Select
+                    value={selectedLocaleCode}
+                    onValueChange={handleLocaleChange}
+                  >
+                    <SelectTrigger id="locale-select" className="bg-background">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {locales.map((locale) => (
+                        <SelectItem key={locale.code} value={locale.code}>
+                          {locale.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="space-y-2">
+                  <Label>{t('preview')}</Label>
+                  <div className="rounded-lg border bg-white overflow-auto max-h-[calc(90vh-280px)]">
+                    <iframe
+                      srcDoc={renderHTMLPreview(formData.body)}
+                      className="w-full min-h-[500px] border-0"
+                      title="Email Preview"
+                      style={{ colorScheme: 'light' }}
+                    />
+                  </div>
+                </div>
+
+                {formData.variables.length > 0 && (
+                  <div className="mt-4">
+                    <h4 className="mb-2 text-sm font-semibold">
+                      {t('availableVariables')}
+                    </h4>
+                    <div className="space-y-2 grid grid-cols-2">
+                      {formData.variables.map((v, idx) => (
+                        <div key={idx} className="flex items-center gap-2">
+                          <Badge
+                            variant="outline"
+                            className="font-mono min-w-[120px]"
+                          >
+                            {'{{' + v + '}}'}
+                          </Badge>
+                          <Input
+                            placeholder={t('testValuePlaceholder')}
+                            value={variableTestValues[v] || ''}
+                            onChange={(e) =>
+                              setVariableTestValues({
+                                ...variableTestValues,
+                                [v]: e.target.value,
+                              })
+                            }
+                            className="flex-1"
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="flex justify-between items-center pt-4 border-t">
+              <div className="flex gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    if (selectedTemplate) {
+                      downloadYAML(selectedTemplate);
+                    }
+                  }}
+                >
+                  <Download className="mr-2 h-4 w-4" />
+                  {t('downloadYAML')}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={handleGenerateMigration}
+                >
+                  <Database className="mr-2 h-4 w-4" />
+                  {t('generateMigration')}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={handleSendTestEmail}
+                >
+                  <MailIcon className="mr-2 h-4 w-4" />
+                  {t('sendTestEmail')}
+                </Button>
+              </div>
+              <div className="flex gap-3">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setIsDialogOpen(false)}
+                >
+                  {t('cancel')}
+                </Button>
+                <Button type="submit">
+                  {editMode ? t('saveChanges') : t('createTemplate')}
+                </Button>
+              </div>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={isTestEmailDialogOpen}
+        onOpenChange={setIsTestEmailDialogOpen}
+      >
+        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{t('sendTestEmailTitle')}</DialogTitle>
+            <DialogDescription>
+              {t('sendTestEmailDescription')}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="test-email-recipient">
+                {t('recipientLabel')}
+              </Label>
+              <Input
+                id="test-email-recipient"
+                type="email"
+                placeholder={t('recipientPlaceholder')}
+                value={testEmailRecipient}
+                onChange={(e) => setTestEmailRecipient(e.target.value)}
+                required
+              />
+            </div>
+
+            {formData.variables.length > 0 && (
+              <div className="space-y-2">
+                <h4 className="text-sm font-semibold">
+                  {t('variableValuesTitle')}
+                </h4>
+                <div className="space-y-2">
+                  {formData.variables.map((v, idx) => (
+                    <div key={idx} className="flex items-center gap-2">
+                      <Badge
+                        variant="outline"
+                        className="font-mono min-w-[120px]"
+                      >
+                        {'{{' + v + '}}'}
+                      </Badge>
+                      <Input
+                        placeholder={t('variableValuePlaceholder')}
+                        value={testEmailVariableValues[v] || ''}
+                        onChange={(e) =>
+                          setTestEmailVariableValues({
+                            ...testEmailVariableValues,
+                            [v]: e.target.value,
+                          })
+                        }
+                        className="flex-1"
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div className="space-y-2">
+              <Label>{t('emailPreview')}</Label>
+              <div className="rounded-lg border bg-white overflow-hidden max-h-[400px]">
+                <iframe
+                  srcDoc={renderHTMLPreview(
+                    Object.entries(testEmailVariableValues).reduce(
+                      (html, [variable, value]) => {
+                        if (value) {
+                          const regex = new RegExp(
+                            `{{\\s*${variable}\\s*}}`,
+                            'g'
+                          );
+                          return html.replace(regex, value);
+                        }
+                        return html;
+                      },
+                      formData.body
+                    )
+                  )}
+                  className="w-full min-h-[400px] border-0"
+                  title="Email Test Preview"
+                  style={{ colorScheme: 'light' }}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="flex justify-end gap-3 pt-4">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setIsTestEmailDialogOpen(false)}
+            >
+              {t('cancel')}
+            </Button>
+            <Button
+              type="button"
+              onClick={handleConfirmSendTestEmail}
+              disabled={!testEmailRecipient}
+            >
+              <MailIcon className="mr-2 h-4 w-4" />
+              {t('sendEmail')}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('deleteConfirmTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('deleteConfirmDescription')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {t('delete')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <AlertDialog
+        open={isConflictDialogOpen}
+        onOpenChange={setIsConflictDialogOpen}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('importConflictTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('importConflictDescription')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div className="py-4">
+            <p className="text-sm font-medium mb-2">{t('conflictingSlugs')}:</p>
+            <div className="space-y-1">
+              {conflictingSlugs.map((slug, index) => (
+                <div key={index} className="flex items-center gap-2">
+                  <Badge variant="destructive" className="font-mono text-xs">
+                    {slug}
+                  </Badge>
+                </div>
+              ))}
+            </div>
+          </div>
+          <AlertDialogFooter>
+            <AlertDialogCancel
+              onClick={() => {
+                setIsConflictDialogOpen(false);
+                setImportFile(null);
+                setConflictingSlugs([]);
+              }}
+            >
+              {t('cancel')}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmOverwrite}
+              className="bg-amber-600 text-white hover:bg-amber-700"
+            >
+              {t('overwrite')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}