<div class="tab">
    <div class="table-summary" style="margin-bottom: 10px; margin-top: 10px;">
        [l]Notice[/l]: [l]You may use tags in both the subject and content[/l]
        <a href="#" onclick="openHelpWindow('admin', 'EmailTemplatesSupport_Settings', 'Support+Ticket+Subject+Template', 'menubar=no,scrollbars=yes,width=240,height=420')" >
            ([l]Click to view available tags[/l])
        </a>
        <br />
        [l]A template can only be deleted if it has no associated E-mail routing rules.[/l]
    </div>

    <!-- BEGIN DYNAMIC BLOCK: templateRow -->
    <form id="templaterow{templateId}" method="post" action="index.php?fuse=support&action=SaveAutoresponderTemplates">
        <input type="hidden" name="templateId" value="{templateId}" />
        <input type="hidden" name="delete" value="0" />
        <table width="100%">
            <tr>
                <td width="150" nowrap="true" >&nbsp;[l]Type[/l]:</td>
                <td class="formfield">
                    <select id="templateType_{templateId}" name="templateType_{templateId}" {templateTypeDisabled}>
                        <option value="1" {templateTypeAutoresponderSelected} >[l]Autoresponder email[/l]&nbsp;&nbsp;</option>
                        <option value="2" {templateTypeCustomerEmailSelected} >[l]Customer email[/l]&nbsp;&nbsp;</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td width="150" nowrap="true" >&nbsp;[l]Name[/l]:</td>
                <td class="formfield">
                    <input type="text" class="x-form-text x-form-field" name="templateName" value="{templateName}" size="40" />
                </td>
            </tr>
            <tr>
                <td width="150" nowrap="true" >&nbsp;[l]Subject[/l]:</td>
                <td class="formfield">
                    <input type="text" class="x-form-text x-form-field" name="templateSubject" value="{templateSubject}" size="40" />
                </td>
            </tr>
            <tr>
                <td width="150" nowrap="true" >&nbsp;[l]Assigned to rules[/l]:</td>
                <td class="formfield">
                    <!-- BEGIN DYNAMIC BLOCK: routingRulesList -->
                    <ul>
                        <!-- BEGIN DYNAMIC BLOCK: routingRule -->
                        <li><a href="index.php?fuse=support&view=AddEditEmailRouting&routing={ruleId}">{ruleName}</a></li>
                        <!-- END DYNAMIC BLOCK: routingRule -->
                    </ul>
                    <!-- END DYNAMIC BLOCK: routingRulesList -->
                    <!-- BEGIN DYNAMIC BLOCK: noRoutingRules -->
                    [l]None[/l]
                    <!-- END DYNAMIC BLOCK: noRoutingRules -->
                </td>
            </tr>
            <tr>
                <td colspan="2" style="padding-top:5px;">

                    <script type="text/javascript">
                        var htmlEmailTemplate;
                        var txtEmailTemplate;
                        var emailTemplateTabs;

                        Ext.onReady(function(){
                            htmlEmailTemplate = new Ext.form.HtmlEditor({
                                id:         'value_0_{templateId}',
                                name:       'value_0_{templateId}',
                                value:      '{contentsHTML}',
                                x:          5,
                                y:          40,
                                hideMode:   'offsets'
                            });

                            txtEmailTemplate = new Ext.form.TextArea({
                                id:         'value_1_{templateId}',
                                name:       'value_1_{templateId}',
                                value:      '{contentsPlainText}'
                            });

                            emailTemplateTabs = new Ext.TabPanel({
                                id:                 'emailTemplateTabs{templateId}',
                                renderTo:           'ExtEmailTemplate{templateId}',
                                //activeTab:          'tabTxtEmailTemplate{templateId}',
                                x:                  5,
                                y:                  55,
                                width:              650,
                                height:             250,
                                autoScrollTabs:     true,
                                plain:true,
                                deferredRender :    false,
                                layoutOnTabChange:  true,
                                defaults:           {bodyStyle:'padding:5px'},
                                items:              [
                                                        {
                                                            id:     "tabHtmlEmailTemplate{templateId}",
                                                            name:   "tabHtmlEmailTemplate{templateId}",
                                                            cls:    'x-plain',
                                                            title:  'HTML',
                                                            layout: "fit",
                                                            items:  [
                                                                        htmlEmailTemplate
                                                                    ]
                                                        },
                                                        {
                                                            id:     "tabTxtEmailTemplate{templateId}",
                                                            name:   "tabTxtEmailTemplate{templateId}",
                                                            cls:    'x-plain',
                                                            title:  lang('Plain Text'),
                                                            layout: "fit",
                                                            items:  [
                                                                        txtEmailTemplate
                                                                    ]
                                                        }
                                                    ],
                                listeners:          {
                                                        'render': {
                                                                        fn: function(){
                                                                                this.activate('tabTxtEmailTemplate{templateId}');
                                                                                this.activate('tabHtmlEmailTemplate{templateId}');
                                                                            }
                                                                    }
                                                    },
                            });

                            SaveBtn = new Ext.Button({
                                text:     lang('Save'),
                                renderTo: 'ExtSaveBtn{templateId}',
                                type:     'submit',
                                width:    100,
                                handler:  function(){
                                              Ext.getDom('templaterow{templateId}').submit();
                                          }
                            });
                        });
                    </script>

                    <span id='ExtEmailTemplate{templateId}'></span>

                    <div class="x-panel-footer x-panel-btns" style="width:638px; text-align:right;">
                        <table>
                            <tr>
                                <td>
                                    <span id='ExtSaveBtn{templateId}'></span>
                                </td>

                                <!-- BEGIN DYNAMIC BLOCK: btnDeleteTemplate -->
                                <td>
                                    <script type="text/javascript">
                                        Ext.onReady(function(){
                                            DeleteBtn = new Ext.Button({
                                                text:     lang('Delete'),
                                                renderTo: 'ExtDeleteBtn{templateId}',
                                                type:     'submit',
                                                width:    100,
                                                handler:  function(){
                                                              Ext.getDom('templaterow{templateId}')['delete'].value=1;
                                                              Ext.getDom('templaterow{templateId}').submit();
                                                          }
                                            });
                                        });
                                    </script>

                                    <span id='ExtDeleteBtn{templateId}'></span>
                                </td>
                                <!-- END DYNAMIC BLOCK: btnDeleteTemplate -->
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </form>
    <br /><br />
    <!-- END DYNAMIC BLOCK: templateRow -->


    <div style="font-size:17px;font-weight:bold;color:#666666;margin-bottom: 8px;">&nbsp;[l]New Custom Email Template[/l]</div>
    <form id="templaterow0" method="post" action="index.php?fuse=support&action=SaveAutoresponderTemplates">
        <input type="hidden" name="delete" value="0" />
        <table width="100%" border="0">
            <tr>
                <td align="left" width="100" nowrap="true" >&nbsp;[l]Type[/l]:</td>
                <td>
                    <select id="templateType_0" name="templateType_0">
                        <option value="1" selected >[l]Autoresponder email[/l]&nbsp;&nbsp;</option>
                        <option value="2" >[l]Customer email[/l]&nbsp;&nbsp;</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="left" width="100" nowrap="true" >&nbsp;[l]Name[/l]:</td>
                <td>
                    <input type="text" class="x-form-text x-form-field" name="templateName" value="" size="40" />
                </td>
            </tr>
            <tr>
                <td align="left" width="100" nowrap="true" >&nbsp;[l]Subject[/l]:</td>
                <td>
                    <input type="text" class="x-form-text x-form-field" name="templateSubject" value="" size="40" />
                </td>
            </tr>
            <tr>
                <td style="padding-top:5px;" colspan="2">
                    
                    <script type="text/javascript">
                        var htmlEmailTemplate;
                        var txtEmailTemplate;
                        var emailTemplateTabs;

                        Ext.onReady(function(){
                            htmlEmailTemplate = new Ext.form.HtmlEditor({
                                id:         'value_0_0',
                                name:       'value_0_0',
                                value:      '',
                                x:          5,
                                y:          40,
                                hideMode:   'offsets'
                            });

                            txtEmailTemplate = new Ext.form.TextArea({
                                id:         'value_1_0',
                                name:       'value_1_0',
                                value:      ''
                            });

                            emailTemplateTabs = new Ext.TabPanel({
                                id:                 'emailTemplateTabs0',
                                renderTo:           'ExtEmailTemplate0',
                                //activeTab:          'tabTxtEmailTemplate0',
                                x:                  5,
                                y:                  55,
                                width:              650,
                                height:             250,
                                plain:true,
                                autoScrollTabs:     true,
                                deferredRender :    false,
                                layoutOnTabChange:  true,
                                defaults:           {bodyStyle:'padding:5px'},
                                items:              [
                                                        {
                                                            id:     "tabHtmlEmailTemplate0",
                                                            name:   "tabHtmlEmailTemplate0",
                                                            cls:    'x-plain',
                                                            title:  'HTML',
                                                            layout: "fit",
                                                            items:  [
                                                                        htmlEmailTemplate
                                                                    ]
                                                        },
                                                        {
                                                            id:     "tabTxtEmailTemplate0",
                                                            name:   "tabTxtEmailTemplate0",
                                                            cls:    'x-plain',
                                                            title:  'Text',
                                                            layout: "fit",
                                                            items:  [
                                                                        txtEmailTemplate
                                                                    ]
                                                        }
                                                    ],
                                listeners:          {
                                                        'render': {
                                                                        fn: function(){
                                                                                this.activate('tabTxtEmailTemplate0');
                                                                                this.activate('tabHtmlEmailTemplate0');
                                                                            }
                                                                    }
                                                    },
                            });

                            SaveBtn = new Ext.Button({
                                text:     lang('Save'),
                                renderTo: 'ExtSaveBtn0',
                                type:     'submit',
                                width:    100,
                                handler:  function(){
                                              Ext.getDom('templaterow0').submit();
                                          }
                            });
                        });
                    </script>

                    <span id='ExtEmailTemplate0'></span>

                    <div class="x-panel-footer x-panel-btns" style="width:638px; text-align:right;">
                        <span id='ExtSaveBtn0'></span>
                    </div>
                </td>
            </tr>
        </table>
    </form>

</div>
