<tr>
    <td class="label">
        <label for="{{labelfor}}">
        {{label}}
        {% if required %}
        &nbsp;<span class="required">(*)</span>
        {% endif %}
        </label>
    </td>
    <td>
        <div id="displayText_{{id}}"
        style="display: {{displayText}};">
            <textarea dojoType="dijit.form.Textarea" id="{{id}}" name="{{id}}" {{disabled}} onchange="
            dojo.byId('displayHtml_{{id}}').innerHTML = this.value;">{{value}}</textarea>
        </div>
        <div id="displayHtml_{{id}}"
        style="display: {{displayHtml}}; margin-left: 2px;">
            {{value|safe}}
        </div>
        <div dojoType="phpr.Dialog" id="dialogFor_{{id}}" draggable="false" refocus="false" execute="
            var value = dijit.byId('editorFor_{{id}}').get('value');
            dojo.byId('displayHtml_{{id}}').innerHTML = value;
            dijit.byId('{{id}}').set('value', value);
            dojo.byId('displayText_{{id}}').style.display = 'none';
            dojo.byId('textButtons_{{id}}').style.display = 'none';
            dojo.byId('displayHtml_{{id}}').style.display = 'inline';
            dojo.byId('htmlButtons_{{id}}').style.display = 'inline';"
        style="width: 82%;">
            <div dojoType="dijit.Editor" id="editorFor_{{id}}" plugins="['bold', 'italic', 'underline',
                'strikethrough', 'subscript', 'superscript', 'removeFormat','|', 'justifyCenter',
                'justifyFull', 'justifyLeft', 'justifyRight', 'delete', '|', 'insertOrderedList',
                'insertUnorderedList', 'indent', 'outdent', '|', 'insertHorizontalRule', 'createLink', 'insertImage',
                '|', 'foreColor', 'hiliteColor', '|', 'fontName', 'fontSize']" {{disabled}}
            style="width: 99%; height: 99%; border: 1px solid;">
            </div>
            <button dojoType="dijit.form.Button" iconClass="tick" type="submit"
            style="margin-left: 0px; margin-top: 10px; margin-bottom: 0px;">
                {{saveTxt}}
            </button>
        </div>
    </td>
    <td>
        {{tooltip|safe}}
        <div id="textButtons_{{id}}"
        style="display: {{displayText}}; margin-left: 3px;">
            <button dojoType="dijit.form.Button" showLabel="false" iconClass="toHtmlButton" class="toHtmlButton"
            title="{{htmlModeTxt}}" onclick="
                dojo.byId('displayText_{{id}}').style.display = 'none';
                dojo.byId('textButtons_{{id}}').style.display = 'none';
                dojo.byId('displayHtml_{{id}}').style.display = 'inline';
                dojo.byId('htmlButtons_{{id}}').style.display = 'inline';
                dijit.byId('editorFor_{{id}}').set('value', dijit.byId('{{id}}').get('value'));
                dijit.byId('dialogFor_{{id}}').show();">
            </button>
        </div>
        <div id="htmlButtons_{{id}}"
        style="display: {{displayHtml}};">
            <button dojoType="dijit.form.Button" showLabel="false" iconClass="edit" class="editButton"
            title="{{editHtmlTxt}}" onclick="
                dijit.byId('editorFor_{{id}}').set('value', dijit.byId('{{id}}').get('value'));
                dijit.byId('dialogFor_{{id}}').show();">
            </button>
            <button dojoType="dijit.form.Button" showLabel="false" iconClass="toTextButton" class="toTextButton"
            title="{{textModeTxt}}" onclick="
                dojo.byId('displayText_{{id}}').style.display = 'inline';
                dojo.byId('textButtons_{{id}}').style.display = 'inline';
                dojo.byId('displayHtml_{{id}}').style.display = 'none';
                dojo.byId('htmlButtons_{{id}}').style.display = 'none';">
            </button>
        </div>
    </td>
</tr>
