mailtrain/views/templates/create.hbs

<ol class="breadcrumb">
    <li><a href="/">{{#translate}}Home{{/translate}}</a></li>
    <li><a href="/templates/">{{#translate}}Templates{{/translate}}</a></li>
    <li class="active">{{#translate}}Create Template{{/translate}}</li>
</ol>

<h2>{{#translate}}Create Template{{/translate}}</h2>

<hr>

<form class="form-horizontal" method="post" action="/templates/create">
    <input type="hidden" name="_csrf" value="{{csrfToken}}">

    <div class="form-group">
        <label for="template-name" class="col-sm-2 control-label">{{#translate}}Template name{{/translate}}</label>
        <div class="col-sm-10">
            <input type="text" class="form-control input-lg" name="name" id="template-name" value="{{name}}" placeholder="{{#translate}}Name for this template, eg. Newsletter{{/translate}}">
        </div>
    </div>

    <div class="form-group">
        <label for="editor_name" class="col-sm-2 control-label">{{#translate}}HTML Editor{{/translate}}</label>
        <div class="col-sm-10">
            <select class="form-control" id="editor_name" name="editor_name">
                <option value=""> –– {{#translate}}Select{{/translate}} –– </option>
                {{#each editors}}
                    <option value="{{name}}">{{label}}</option>
                {{/each}}
            </select>
        </div>
    </div>

    <div id="editor-template">
        <div>
            <input type="hidden" name="text" value="{{text}}">
            <input type="hidden" name="html" value="{{html}}">
        </div>
    </div>

    <div class="form-group">
        <label for="template-description" class="col-sm-2 control-label">{{#translate}}Description{{/translate}}</label>
        <div class="col-sm-10">
            <textarea class="form-control" id="template-description" name="description" rows="3" placeholder="{{#translate}}Optional comments about this template{{/translate}}">{{description}}</textarea>
            <span class="help-block">{{#translate}}HTML is allowed{{/translate}}</span>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> {{#translate}}Create Template{{/translate}}</button>
        </div>
    </div>

</form>

<div style="display: none">
    {{#each editors}}
        {{#if templates}}
            <div class="form-group" id="{{name}}-template">
                <label for="editor_data_{{name}}" class="col-sm-2 control-label">{{label}} {{#translate}}Template{{/translate}}</label>
                <div class="col-sm-10">
                    <select class="form-control" id="editor_data_{{name}}" name="editor_data">
                        {{#each templates}}
                            <option value='{"template":"{{name}}"}'>{{label}}</option>
                        {{/each}}
                    </select>
                </div>
            </div>
        {{/if}}
    {{/each}}

    <div id="summernote-template">
        <input type="hidden" name="text" value="{{text}}">
        <input type="hidden" name="html" value="{{html}}">
    </div>

    <div id="codeeditor-template">
        <input type="hidden" name="text" value="{{text}}">
        <input type="hidden" name="html" value="{{html}}">
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        $('select#editor_name').on('change', function() {
            var editor = this.value || 'summernote';
            $('#editor-template').children().first().replaceWith(
                $('#' + editor + '-template').clone()
            );
        });
    });
</script>