Create HTML Template

Create a reusable HTML template with header and footer

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

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="header">Header HTML</Label>
                <RichTextEditor
                  value={header}
                  onChange={setHeader}
                  placeholder={t('Enter header HTML (navigation, logo, etc.)...')}
                  className="min-h-[200px]"
                />
                <p className="text-sm text-gray-500">
                  {t('This will appear at the top of all pages using this template')}
                </p>
              </div>

<div className="space-y-2">
                <Label htmlFor="footer">Footer HTML</Label>
                <RichTextEditor
                  value={footer}
                  onChange={setFooter}
                  placeholder={t('Enter footer HTML (copyright, links, etc.)...')}
                  className="min-h-[200px]"
                />
                <p className="text-sm text-gray-500">
                  {t('This will appear at the bottom of all pages using this template')}
                </p>
              </div>

<div className="flex gap-2">
                <Button type="submit">Create Template</Button>
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => router.visit('/admin/html-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">
                  <div className="border-b-2 border-blue-500 bg-blue-50 p-4">
                    <p className="text-xs font-semibold text-blue-700 mb-2">HEADER</p>
                    <div 
                      dangerouslySetInnerHTML={{ __html: header || '<p class="text-gray-400">Header preview will appear here...</p>' }}
                      className="prose prose-sm max-w-none"
                    />
                  </div>
                  <div className="p-8">
                    <p className="text-gray-400 italic text-center">Page content will appear here</p>
                  </div>
                  <div className="border-t-2 border-gray-300 bg-gray-50 p-4">
                    <p className="text-xs font-semibold text-gray-700 mb-2">FOOTER</p>
                    <div 
                      dangerouslySetInnerHTML={{ __html: footer || '<p class="text-gray-400">Footer preview will appear here...</p>' }}
                      className="prose prose-sm max-w-none"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </AppLayout>
  );
}