{extends file="admin-layout.tpl"}

{block name="no-return-functions"}
    {$admin_current_location = 'configuration'}
{/block}

{block name="page-title"}{intl l='Edit a mailing template'}{/block}

{block name="check-resource"}admin.configuration.message{/block}
{block name="check-access"}update{/block}

{block name="main-content"}
<div class="messages edit-message">

    <div id="wrapper" class="container">

        {loop name="message_edit" type="message" secured="*" id="$message_id" backend_context="1" lang="$edit_language_id"}

        <ul class="breadcrumb">
			<li><a href="{url path='/admin/home'}">{intl l="Home"}</a></li>
            <li><a href="{url path='/admin/configuration'}">{intl l="Configuration"}</a></li>
            <li><a href="{url path='/admin/configuration/messages'}">{intl l="Mailing templates"}</a></li>
            <li>{intl l='Editing mailing template "%name"' name={$NAME}}</li>
        </ul>

		<div class="row">
			<div class="col-md-12 general-block-decorator">
				<div class="row">

					<div class="col-md-12 title title-without-tabs">
					   {intl l='Edit mailing template "%name"' name={$NAME}}
					</div>

                    <div class="form-container">
                         <div class="col-md-12">
						    {form name="thelia.admin.message.modification"}
						    <form method="POST" action="{url path='/admin/configuration/messages/save'}" {form_enctype form=$form}>

                                {* Be sure to get the message ID, even if the form could not be validated *}
                                <input type="hidden" name="message_id" value="{$message_id}" />

                                {include file="includes/inner-form-toolbar.html" close_url="{url path='/admin/configuration/messages'}"}

						        {form_hidden_fields form=$form}

						        {form_field form=$form field='success_url'}
						        <input type="hidden" name="{$name}" value="{url path='/admin/configuration/messages'}" />
						        {/form_field}

                                {form_field form=$form field='id'}
                                <input type="hidden" name="{$name}" value="{$value}" />
                                {/form_field}

		                        {form_field form=$form field='locale'}
		                        <input type="hidden" name="{$name}" value="{{$edit_language_locale}}" />
		                        {/form_field}

					            {if $form_error}<div class="alert alert-danger">{$form_error_message}</div>{/if}

								{form_field form=$form field='name'}
								<div class="form-group {if $error}has-error{/if}">
									<label for="{$label_attr.for}" class="control-label">{$label}{if $required} <span class="required">*</span>{/if} :
									<span class="label-help-block">{intl l="This the unique name of this message. Do not change this value unless you understand what you do."}</span>
									</label>
									<input type="text" id="{$label_attr.for}" {if $required}required="required"{/if} name="{$name}" value="{$value}" title="{intl l='Variable name'}" placeholder="{intl l='Variable name'}" class="form-control">
								</div>
					            {/form_field}

								{form_field form=$form field='secured'}
		                        <div class="checkbox {if $error}has-error{/if}">
		                            <label>
		                                <input type="checkbox" name="{$name}" value="1" {if $value == 1}checked="checked"{/if}>
		                                {$label}
									</label>
		                        </div>
		                        {/form_field}

								{form_field form=$form field='title'}
								<div class="form-group {if $error}has-error{/if}">
								    <label for="{$label_attr.for}" class="control-label">{$label}{if $required} <span class="required">*</span>{/if} :
								        <span class="label-help-block">{intl l="This is the message purpose, such as 'Order confirmation'."}</span>
								    </label>
									<input type="text" id="{$label_attr.for}" name="{$name}" {if $required}{if $required}required="required"{/if}{/if} title="{intl l='Title'}" placeholder="{intl l='Title'}" class="form-control" value="{$value}">
								</div>
								{/form_field}

                                {form_field form=$form field='subject'}
                                <div class="form-group {if $error}has-error{/if}">
                                    <label for="{$label_attr.for}" class="control-label">{$label}{if $required} <span class="required">*</span>{/if} :
                                        <span class="label-help-block">{intl l="This is the subject of the e-mail, such as 'Your order is confirmed'."}</span>
                                    </label>
									<input type="text" id="{$label_attr.for}" name="{$name}" {if $required}required="required"{/if} title="{intl l='Subject'}" placeholder="{intl l='Subject'}" class="form-control" value="{$value}">
								</div>
                                {/form_field}

                                <div class="panel panel-default">
                                    <div class="panel-heading"><h3 class="panel-title">{intl l="HTML version of this message"}</h3></div>

                                    <div class="panel-body">
	                                    <div class="row">
		                                    <div class="col-md-6">
			                                {form_field form=$form field='html_layout_file_name'}
				                                <div class="form-group {if $error}has-error{/if}">
				                                    <label for="{$label_attr.for}" class="control-label">{$label}{if $required} <span class="required">*</span>{/if} : </label>
				                                    <select id="{$label_attr.for}" name="{$name}" {if $required}required="required"{/if} title="{$label}" class="form-control">
				                                        <option value="">{intl l='Use default layout'}</option>
				                                        {foreach $layout_list as $layout}
				                                            <option value="{$layout}" {if $layout == $value}selected="selected"{/if}>{$layout}</option>
				                                        {/foreach}
				                                    </select>
				                                </div>
			                                {/form_field}
			                                </div>

			                                <div class="col-md-6">
				                                {form_field form=$form field='html_template_file_name'}
				                                <div class="form-group {if $error}has-error{/if}">
				                                    <label for="{$label_attr.for}" class="control-label">{$label}{if $required} <span class="required">*</span>{/if} : </label>
			                                        <select data-toggle-textarea="html_message" id="{$label_attr.for}" name="{$name}" {if $required}required="required"{/if} title="{$label}" class="textarea-toggle form-control">
			                                            <option value="">{intl l='Use HTML message defined below'}</option>
	                                                    {foreach $html_template_list as $template}
	                                                        <option value="{$template}" {if $template == $value}selected="selected"{/if}>{$template}</option>
	                                                    {/foreach}
			                                        </select>
				                                </div>
				                                {if ! empty($value)}{$disable_html='readonly="true"'}{/if}
			                                {/form_field}
			                                </div>
                                        </div>

                                        <div class="row">
											<div class="col-md-12">
												{form_field form=$form field='html_message'}
												<div class="form-group {if $error}has-error{/if}">
												    <label for="{$label_attr.for}" class="control-label">
												    	{$label}{if $required} <span class="required">*</span>{/if} :
												      <span class="label-help-block">{intl l="The mailing template in HTML format."}</span>
												    </label>
												    <textarea {$disable_html} {if $required}required="required"{/if} name="{$name}" rows="10" class="fixedfont form-control">{$value}</textarea>
                                                    <div id="{$name}" style="height: 500px;">{$value}</div>
												</div>
												{/form_field}
											</div>
										</div>
                                    </div>
                                </div>

                                <div class="panel panel-default">
                                    <div class="panel-heading"><h3 class="panel-title">{intl l="Text version of this message"}</h3></div>

                                    <div class="panel-body">
                                        <div class="row">
		                                    <div class="col-md-6">
			                                    {form_field form=$form field='text_layout_file_name'}
			                                    <div class="form-group {if $error}has-error{/if}">
			                                        <label for="{$label_attr.for}" class="control-label">{$label}{if $required} <span class="required">*</span>{/if} : </label>
			                                        <select id="{$label_attr.for}" name="{$name}" {if $required}required="required"{/if} title="{$label}" class="form-control">
			                                            <option value="">{intl l='Use default layout'}</option>
	                                                    {foreach $layout_list as $layout}
	                                                        <option value="{$layout}" {if $layout == $value}selected="selected"{/if}>{$layout}</option>
	                                                    {/foreach}
			                                        </select>
			                                    </div>
			                                    {/form_field}
		                                    </div>

		                                    <div class="col-md-6">
			                                    {form_field form=$form field='text_template_file_name'}
			                                    <div class="form-group {if $error}has-error{/if}">
			                                        <label for="{$label_attr.for}" class="control-label">{$label}{if $required} <span class="required">*</span>{/if} : </label>
			                                        <select data-toggle-textarea="text_message" id="{$label_attr.for}" name="{$name}" {if $required}required="required"{/if} title="{$label}" class="textarea-toggle form-control">
			                                            <option value="">{intl l='Use Text message defined below'}</option>
	                                                    {foreach $text_template_list as $template}
	                                                        <option value="{$template}" {if $template == $value}selected="selected"{/if}>{$template}</option>
	                                                    {/foreach}
			                                        </select>
			                                    </div>
			                                    {if ! empty($value)}{$disable_text='readonly="true"'}{/if}
			                                    {/form_field}
		                                    </div>
		                                </div>

                                        <div class="row">
	                                        <div class="col-md-12">
				                                {form_field form=$form field='text_message'}
				                                <div class="form-group {if $error}has-error{/if}">
				                                    <label for="{$label_attr.for}" class="control-label">
				                                    	{$label}{if $required} <span class="required">*</span>{/if} :
				                                      <span class="label-help-block">{intl l="The mailing template in text-only format."}</span>
				                                    </label>
				                                    <textarea {$disable_text} {if $required}required="required"{/if} name="{$name}" rows="10" class="fixedfont form-control">{$value}</textarea>
                                                    <div id="{$name}" style="height: 500px;">{$value}</div>
				                                </div>
				                                {/form_field}
			                                </div>
			                            </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <p>{intl l='Message created on %date_create. Last modification: %date_change' date_create="{format_date date=$CREATE_DATE}" date_change="{format_date date=$UPDATE_DATE}"}</p>
                                </div>

							</form>
							{/form}
						</div>
					</div>
				</div>
			</div>

		</div>
		{/loop}

        {elseloop rel="message_edit"}
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-error">
                    {intl l="Sorry, message ID=%id was not found." id={$message_id}}
                </div>
            </div>
        </div>
        {/elseloop}

    </div>
</div>
{/block}

{block name="javascript-initialization"}
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<script>
    (function($) {

        var editor = {
            "text_message": null,
            "html_message": null
        };

        $('select.textarea-toggle').change(function(ev) {
            var aceEditor = editor[$(this).data('toggle-textarea')];
            if ($(this).val() != '') {
                aceEditor.setReadOnly(true);
            } else {
                aceEditor.setReadOnly(false);
            }
        });

        var elems = ["html_message", "text_message"];
        $.each(elems, function(index, value){
            editor[value] = ace.edit('thelia_message_modification[' + value + ']');
            var textarea = $('textarea[name="thelia_message_modification[' + value + ']"]').hide();

            editor[value].setTheme("ace/theme/monokai");
            editor[value].getSession().setMode("ace/mode/smarty");

            editor[value].getSession().on("change", function () {
                textarea.val(editor[value].getSession().getValue());
            });

            textarea.val(editor[value].getSession().getValue());
        });

        $('select.textarea-toggle').change();

    })(jQuery);
</script>
{/block}

{block name="javascript-last-call"}
    {module_include location='message-edit-js'}
{/block}