Create Email Template

Create a reusable email template

Template Name * setName(e.target.value)} required placeholder={t('e.g., Welcome Email')} />

A descriptive name for this template

Description

setDescription(e.target.value)}
                  rows={2}
                  placeholder={t('Optional description of when to use this template')}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="subject">Email Subject *</Label>
                <Input
                  id="subject"
                  value={subject}
                  onChange={(e) => setSubject(e.target.value)}
                  required
                  placeholder={t('e.g., Welcome to Our Community!')}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="content">Email Content *</Label>
                <RichTextEditor
                  value={content}
                  onChange={setContent}
                  placeholder={t('Enter your email content here...')}
                  className="min-h-[400px]"
                />
                <p className="text-sm text-gray-500">
                  Available placeholders: {'{member_name}'}, {'{campaign_name}'}
                </p>
              </div>

<div className="flex gap-2">
                <Button type="submit">Create Template</Button>
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => router.visit('/admin/templates')}
                >
                  {t('Cancel')}
                </Button>
              </div>
            </div>

<div className="space-y-2">
              <Label>Preview</Label>
              <div className="border rounded-lg p-4 bg-gray-50 dark:bg-gray-900 min-h-[600px]">
                <div className="bg-white rounded shadow-sm p-4 mb-4">
                  <p className="text-sm text-gray-600 mb-1"><strong>Subject:</strong></p>
                  <p className="text-lg">{subject || 'Email Subject'}</p>
                </div>
                <div className="bg-white rounded shadow-sm">
                  <iframe
                    srcDoc={content || '<p style="padding: 20px; color: #666;">Email preview will appear here...</p>'}
                    className="w-full min-h-[500px] border-0"
                    title={t('Email Preview')}
                    sandbox="allow-same-origin"
                  />
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </AppLayout>
  );
}