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

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

{block name="page-title"}{intl l='Translations'}{/block}

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

{block name="main-content"}
<div class="variables translations">

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

        <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/translations'}">{intl l="Translations"}</a></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="Translation"}
					</div>

                    <div class="form-container">
                         <div class="col-md-12">
						    <form method="POST" id="translation_form" action="{url path='/admin/configuration/translations/update'}">
                                <fieldset>

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

                                    <input type="hidden" name="edit_language_id" value="{$edit_language_id}" />

	                                <div class="row">
	                                    <div class="col-md-4">
			                                <div class="form-group">
												<label class="control-label" for="item_to_translate">{intl l='Items to translate'}</label>

												<select id="item_to_translate" required="required" name="item_to_translate" class="submit-on-change form-control">
	                                                <option value="">{intl l='Please select items to translate'}</option>
	                                                <option value="fo" {if $item_to_translate=='fo'}selected="selected"{/if}>{intl l='Front-office templates'}</option>
                                                    <option value="pf" {if $item_to_translate=='pf'}selected="selected"{/if}>{intl l='PDF templates'}</option>
                                                    <option value="ma" {if $item_to_translate=='ma'}selected="selected"{/if}>{intl l='E-mail templates'}</option>
			                                        <option value="bo" {if $item_to_translate=='bo'}selected="selected"{/if}>{intl l='Back-office templates'}</option>
                                                    <option value="mo" {if $item_to_translate=='mo'}selected="selected"{/if}>{intl l='Modules'}</option>
                                                    <option value="co" {if $item_to_translate=='co'}selected="selected"{/if}>{intl l='Thelia core'}</option>
                                                    <option value="in" {if $item_to_translate=='in'}selected="selected"{/if}>{intl l='Thelia Installation'}</option>
                                                    <option value="wi" {if $item_to_translate=='wi'}selected="selected"{/if}>{intl l='Thelia Installation Wizard'}</option>
												</select>
			                                </div>
		                                </div>

	                                    {if $item_to_translate == 'mo'}
		                                    <div class="col-md-4 item-id-selector">
		                                        <div class="form-group">
		                                            <label class="control-label" for="item_name">{intl l='Module you want to translate'}</label>

		                                            <select id="item_name" required="required" name="item_name" class="submit-on-change form-control">
		                                                <option value="">{intl l='Please select the module to translate'}</option>
					                                    {loop type="module" name="translate-module" backend_context=1 order="code"}
					                                        <option value="{$ID}" {if $item_name == $ID}selected="selected"{/if}>{$CODE} - {$TITLE}</option>
					                                    {/loop}
					                                </select>
					                            </div>
		                                    </div>
	                                    {else if $item_to_translate == 'fo'}
	                                        <div class="col-md-4 item-id-selector">
	                                            <div class="form-group">
	                                                <label class="control-label" for="item_name">{intl l='Front-office template you want to translate'}</label>

	                                                <select id="item_name" required="required" name="item_name" class="submit-on-change form-control">
	                                                    <option value="">{intl l='Please select the F.O. template to translate'}</option>
	                                                    {loop type="template" name="translate-fo-template" template-type="front-office" backend_context=1}
	                                                        <option value="{$NAME}" {if $item_name == $NAME}selected="selected"{/if}>{$NAME}</option>
	                                                    {/loop}
	                                                </select>
	                                            </div>
	                                        </div>
	                                    {else if $item_to_translate == 'bo'}
	                                        <div class="col-md-4 item-id-selector">
	                                            <div class="form-group">
	                                                <label class="control-label" for="item_name">{intl l='Back-office template you want to translate'}</label>

	                                                <select id="item_name" required="required" name="item_name" class="submit-on-change form-control">
	                                                    <option value="">{intl l='Please select the B.O. template to translate'}</option>
	                                                    {loop type="template" name="translate-fo-template" template-type="back-office" backend_context=1}
	                                                        <option value="{$NAME}" {if $item_name == $NAME}selected="selected"{/if}>{$NAME}</option>
	                                                    {/loop}
	                                                </select>
	                                            </div>
	                                        </div>
                                        {else if $item_to_translate == 'ma'}
                                            <div class="col-md-4 item-id-selector">
                                                <div class="form-group">
                                                    <label class="control-label" for="item_name">{intl l='E-mail template you want to translate'}</label>

                                                    <select id="item_name" required="required" name="item_name" class="submit-on-change form-control">
                                                        <option value="">{intl l='Please select the E-mail template to translate'}</option>
                                                        {loop type="template" name="translate-fo-template" template-type="email" backend_context=1}
                                                            <option value="{$NAME}" {if $item_name == $NAME}selected="selected"{/if}>{$NAME}</option>
                                                        {/loop}
                                                    </select>
                                                </div>
                                            </div>
	                                    {else if $item_to_translate == 'pf'}
	                                        <div class="col-md-4 item-id-selector">
	                                            <div class="form-group">
	                                                <label class="control-label" for="item_name">{intl l='PDF template you want to translate'}</label>

	                                                <select id="item_name" required="required" name="item_name" class="submit-on-change form-control">
	                                                    <option value="">{intl l='Please select the PDF template to translate'}</option>
	                                                    {loop type="template" name="translate-pdf-template" template-type="pdf" backend_context=1}
	                                                        <option value="{$NAME}" {if $item_name == $NAME}selected="selected"{/if}>{$NAME}</option>
	                                                    {/loop}
	                                                </select>
	                                            </div>
	                                        </div>
	                                    {/if}

                                        {if $item_to_translate == 'mo' && $item_name != ''}
                                        <div class="col-md-4 item-id-selector">
                                            <div class="form-group">
                                                <label class="control-label" for="module_part">{intl l='Module component'}</label>

                                                <select id="module_part" required="required" name="module_part" class="submit-on-change form-control">
                                                    <option value="">{intl l='Please select the module component'}</option>
                                                    <option value="core" {if $module_part == 'core'}selected="selected"{/if}>Core files</option>

                                                    {if $has_admin_includes}
                                                        <option value="admin-includes" {if $module_part == 'admin-includes'}selected="selected"{/if}>Administration includes template</option>
                                                    {/if}

                                                    {if $back_office_templates != ''}
                                                        {foreach explode(',', $back_office_templates) as $template}
                                                            {$option_value = "bo.{$template}"}
                                                            <option value="{$option_value}" {if $module_part == $option_value}selected="selected"{/if}>Back-office template "{$template}"</option>
                                                        {/foreach}
                                                    {/if}

                                                    {if $front_office_templates != ''}
                                                        {foreach explode(',', $front_office_templates) as $template}
                                                            {$option_value = "fo.{$template}"}
                                                            <option value="{$option_value}" {if $module_part == $option_value}selected="selected"{/if}>Front-office template "{$template}"</option>
                                                        {/foreach}
                                                    {/if}

                                                    {if $email_templates != ''}
                                                        {foreach explode(',', $email_templates) as $template}
                                                            {$option_value = "email.{$template}"}
                                                            <option value="{$option_value}" {if $module_part == $option_value}selected="selected"{/if}>Email template "{$template}"</option>
                                                        {/foreach}
                                                    {/if}

                                                    {if $pdf_templates != ''}
                                                        {foreach explode(',', $pdf_templates) as $template}
                                                            {$option_value = "pdf.{$template}"}
                                                            <option value="{$option_value}" {if $module_part == $option_value}selected="selected"{/if}>Pdf template "{$template}"</option>
                                                        {/foreach}
                                                    {/if}

                                                </select>
                                            </div>
                                        </div>
                                        {/if}
	                                </div>

                                    {if $is_writable|default:false === false}
                                        <div class="alert alert-danger">
                                            {intl l='The directory local/I18n does not exist or is not writable. Please fix this issue before.' }
                                        </div>
                                    {/if}

                                    <div class="alert alert-help">
                                        <div class="row">
                                            <div class="col-md-9">
                                                <p>
                                                <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                                                {intl l='This page allows you to translate each <strong>resources</strong> of your website : Thelia, modules, templates.<br>'}
                                                {intl l='Keep attention that in translating you can override the resource translations.<br>'}
                                                {intl l='This is not a problem as long as you <strong>do not update</strong> this resources (Thelia, module, template).<br>'}
                                                {intl l='If your aim is just to translate text for your website, please use the user mode.<br>'}
                                                {intl l='There is 2 kind of translations :'}
                                                </p>
                                                <ul class="list-unstyled">
                                                    <li>
                                                        <span class="glyphicon glyphicon-play"></span>
                                                        {intl l='Redefine the text only for this resource.'}
                                                    </li>
                                                    <li>
                                                        <span class="glyphicon glyphicon-forward"></span>
                                                        {intl l='Redefine the text globally. Every text will be translated with this translation, except if there is a translation for this resource.'}
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="col-md-3">
                                                <p>
                                                    {intl l='Please select your editing mode :'}
                                                </p>

                                                <ul>
                                                    <li>{intl l='<strong>User</strong> : to redefine the translations for your website'}
                                                    <li>{intl l='<strong>Developer</strong> : to change the translations of the resource'}
                                                </ul>

                                                <div class="btn-group toggle-translation-mode">
                                                    <button type="button" id="translation-mode-user" class="btn btn-primary active">{intl l='User mode'}</button>
                                                    <button type="button" id="translation-mode-developer" class="btn btn-primary">{intl l='Developer mode'}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        {if $edit_language_locale != 'en_US'}
                                        <div class="col-md-12">
                                            <div class="translation-mode-developer alert alert-warning hidden">
                                                {intl l="If you want to translate core components of Thelia : core, install, default modules or templates."} <br>
                                                {intl l="It's strongly recommended to use our translation platform"}
                                                ({intl l="on"} <a href="https://crowdin.com/" target="_blank">Crowdin</a>) :
                                                <a href="http://translate.thelia.net" target="_blank">http://translate.thelia.net</a>
                                                <br>
                                                {intl l="That way, Thelia community will benefit of your translations"}.
                                            </div>
                                        </div>
                                        {/if}
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="checkbox control-label">
                                                    <input class="submit-on-change" type="checkbox" name="view_missing_traductions_only" value="1" {if $view_missing_traductions_only}checked="checked"{/if}> {intl l='View only missing translations.'}
                                                    (<a class="copy-all" href="#" title="{intl l='Copy all missing translations.'}">{intl l='Copy all translations.'}</a>)
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>

                                {* -- STRINGS TO TRANSLATE --------------------------------------------- *}

                                {$currfile = false}
                                {$close_last_panel = false}

                                {$idx = 0}

                                {foreach $all_strings|default:[] as $info}

                                    <input type="hidden" id="text_{$idx}" name="text[]" value="{$info.text}" />

                                    {$not_translated = empty($info.translation) && empty($info.custom_fallback) && empty($info.global_fallback)}

                                    {if $view_missing_traductions_only != 1 || $not_translated }

                                        {* Create a liste of files names *}

                                        {if count($info.files) > 1}
                                            {$label = {intl l='In pages:'}}
                                            {capture name="banner" assign=file_names}
                                                <ul>
                                                {foreach $info.files as $file}
                                                   <li>{$file}</li>
                                                {/foreach}
                                                </ul>
                                            {/capture}
                                        {else}
                                            {$label = {intl l='In page'}}
                                            {$file_names = $info.files.0}
                                        {/if}

                                        {* Display current file liste, if required *}

                                        {if $file_names != $currfile}

                                            {if $currfile !== false}
                                                {* Close current panel *}
                                                </tbody></table></div>
                                                {$close_last_panel = false}
                                            {/if}

                                            {$currfile = $file_names}

											<div class="panel panel-default">
											    <div class="panel-heading">
                                                    {loop name="lang_list" type="lang" id=$edit_language_id}
                                                        <img class="img-flags" src="{image file="assets/img/svgFlags/{$CODE}.svg"}" alt="{$TITLE}" />
                                                    {/loop}

                                                    {$label} {$file_names nofilter}

											    </div>

											    <table class="table table-condensed table-hover">
											        <tbody>
											        {$close_last_panel = true}
                                        {/if}

	                                    <tr>
	                                        <td class="col-md-6">
	                                            {$info.text}


												{if $info.dollar}
												    <div>
												        <span class="label label-warning">{intl l='Warning'}</span>
												        {intl l='Il seems that this string contains a Smarty variable (&#36;). If \'s the case, it cannot be transleted properly.'}
												    </div>
												{/if}
		                                    </td>

	                                        <td class="col-md-6" >
	                                            <div class="input-group input-group-default {if $not_translated}has-error{/if}">
												    <span class="input-group-addon">
												        <a href="#" data-text-num="{$idx}" class="copy-translation" title="{intl l='Copy source text in input field'}">
												            <span class="glyphicon glyphicon-chevron-right"></span>
												        </a>
                                                    </span>
												    <input type="text" name="translation[]" id="translation_{$idx}"
												        class="translation_field translation_field_default form-control" value="{$info.translation}"
                                                    />
												</div>
												<div class="input-group input-group-custom">
												    <span class="input-group-addon">
												        <a href="#" data-text-num="{$idx}" class="copy-translation-custom" title="{intl l='Copy source text in input field'}">
												            <span class="glyphicon glyphicon-play"></span>
												        </a>
                                                    </span>
												    <input type="text" name="translation_custom[]" id="translation_custom_{$idx}"
												        class="translation_field translation_field_custom form-control" value="{$info.custom_fallback}"
												        placeholder="specific redefinition" />
												</div>
												<div class="input-group input-group-global">
												    <span class="input-group-addon">
												        <a href="#" data-text-num="{$idx}" class="copy-translation-global" title="{intl l='Copy source text in input field'}">
												            <span class="glyphicon glyphicon-forward"></span>
                                                        </a>
                                                    </span>
												    <input type="text" name="translation_global[]" id="translation_global_{$idx}"
												        class="translation_field translation_field_global form-control" value="{$info.global_fallback}"
												        placeholder="global redefinition" />
												</div>
	                                        </td>
	                                    </tr>

	                                {else}
                                        <tr class="hidden">
                                            <td colspan="2">
                                                {* Text is not displayed, put it in a hidden field *}
                                                <input type="hidden" id="translation_{$idx}" name="translation[]" value="{$info.translation}" />
                                                <input type="hidden" id="translation_custom{$idx}" name="translation_custom[]" value="{$info.custom_fallback}" />
                                                <input type="hidden" id="translation_global_{$idx}" name="translation_global[]" value="{$info.global_fallback}" />
                                            </td>
                                        </tr>
                                    {/if}

                                    {$idx = $idx + 1}
                                {/foreach}

                                {if isset($all_strings) }

                                    {if empty($all_strings) }
                                        <div class="alert alert-info">
                                            {intl l='<strong>Did not found any text to translate</strong>. It\'s probably normal. If not, please be sure to use Smarty\'s "intl" function in templates, or the Translator::trans() method in PHP files.'}
                                        </div>
                                    {else if $view_missing_traductions_only == 1 && $currfile == false }
		                                <div class="alert alert-success">
		                                    {intl l='<strong>Congratulations</strong>, all text is now translated !'}
		                                </div>
		                            {/if}

		                            {if $close_last_panel}
	                                    {* close the last panel *}
	                                    </tbody></table></div>
	                                {/if}
	                            {/if}

	                            {if $max_input_vars_warning}
	                            <div class="alert alert-danger">
	                               {intl l='<strong>Cannot translate all fields.</strong> According to your PHP configuration, forms cannot contains more than %current_max_input_vars input fields, but at least %required_max_input_vars are required. Please change the value of max_input_vars in your PHP configuration of change the translation file by hand.'
	                                current_max_input_vars={$current_max_input_vars}
	                                required_max_input_vars={$required_max_input_vars}
	                                }
	                            </div>
	                            {/if}

							</form>
						</div>
					</div>
				</div>
			</div>

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

{block name="javascript-initialization"}
    <script src="{javascript file='assets/js/bootstrap-switch/bootstrap-switch.js'}"></script>

    {javascripts file='assets/js/cookie.js'}
        <script src="{$asset_url}"></script>
    {/javascripts}
{/block}

{block name="javascript-last-call"}
    <script>
        $(function() {

            var translation_changed = false;
            var userMode = null;

            $('#item_to_translate').change(function() {
                $('#item-id').val('');
                $('#item_name').val('');
                $('.item-id-selector').hide();
            });

            $('#item_name').change(function() {
                $('#module_part').val('');
            });


            $('.submit-on-change').change(function() {
                $('#translation_form').submit();
            });

            $('input.translation_field').change(function() { translation_changed = true; });

            var toggleMode = function toggleMode() {
                if (userMode === null) {
                    userMode = docCookies.getItem('translation_userMode');
                    userMode = (userMode === null) || (userMode === "1");
                } else {
                    userMode = !userMode;
                }

                if (userMode) {
                    $('.translation_field_default').prop('readonly', true);
                    $('.input-group-custom, .input-group-global, .translation-mode-user').removeClass('hidden');
                    $('.translation-mode-developer').addClass('hidden');
                    $('#translation-mode-user').addClass('active');
                    $('#translation-mode-developer').removeClass('active');
                    //$('.input-group-custom, .input-group-global').removeClass('hidden');
                } else {
                    $('.translation_field_default').prop('readonly', false);
                    $('.input-group-custom, .input-group-global, .translation-mode-user').addClass('hidden');
                    $('.translation-mode-developer').removeClass('hidden');
                    $('#translation-mode-developer').addClass('active');
                    $('#translation-mode-user').removeClass('active');
                    //$('.toggle-translation-mode').text($('.toggle-translation-mode').data('text-developer'));
                }

                docCookies.setItem('translation_userMode', userMode ? '1' : '0');

                return false;
            };

            $('.toggle-translation-mode > button').click(function() {
                if (!$(this).hasClass('active')) {
                    toggleMode();
                }
                return false;
            });
            toggleMode();

            var copyTranslation = function copyTranslation($field) {
                var num = $field.data('text-num');
                var $dest = null;
                var text = '';

                if ($field.hasClass('copy-translation-custom')) {
                    $dest = $('#translation_custom_' + num);

                } else if ($field.hasClass('copy-translation-global')) {
                    $dest = $('#translation_global_' + num);
                } else {
                    $dest = $('#translation_' + num);
                }

                if ($dest.val() == "") {
                    if (!$field.hasClass('copy-translation')) {
                        text = $('#translation_' + num).val();
                    }
                    if (text == '') {
                        text = $('#text_' + num).val();
                    }

                    $dest.val(text);
                }

                translation_changed = true;
            };

            $('.copy-translation, .copy-translation-custom, .copy-translation-global').click(function(ev) {
                copyTranslation($(this));
                ev.preventDefault();
            });

            $('.copy-all').click(function(ev) {

                $('.copy-translation').each(
                        function(){
                            copyTranslation($(this));
                        }
                );

                ev.preventDefault();
            });

            $('#translation_form').submit(function(ev) {

                if (translation_changed
                        &&
                        ! confirm("{intl l='Some of your translations are not saved. Continue anyway ?'}") ) {

                    ev.preventDefault();
                }
            });

            // Intercept language changes, to reload string when changing language
            $('.form-submit-button').click(function(ev) {
                // For a submit throught the save buttons, do not show the change warning.
                translation_changed = false;
            });

            // Intercept language changes, to reload string when changing language
            $('.language-change-button').click(function(ev) {

                $('input[name=edit_language_id]').val($(this).data('language-id'));

                $('#translation_form').submit();

                ev.preventDefault();
            });
        });
    </script>

    {hook name="translations.js" location="translations-js" }
{/block}