{% extends "admin/partial/layout_logged_in.html.twig" %}

{% block title %}{{ ta('manage_translations_for_language', 'Manage Translations For \'[[[LANGUAGE_NAME]]]\'', {'LANGUAGE_NAME': languageDetail.languageName}) }}{% endblock %}
{% block selected_page %}configuration{% endblock %}
{% block selected_sub_page %}translation_manage{% endblock %}

{% block body %}
<script>
    oTable = null;
    gTranslationId = null;
    $(document).ready(function () {
        // datatable
        oTable = $('#fileTable').dataTable($.extend(dataTableOpts, {
            "sAjaxSource": 'ajax/translation_manage_text?languageId={{ languageDetail.id }}',
            "iDisplayLength": 50,
            "aaSorting": [[1, "asc"]],
            "aoColumns": [
                {bSortable: false, sWidth: '3%', sName: 'file_icon', sClass: "center adminResponsiveHide"},
                {sName: 'language_key', sWidth: '17%', sClass: "adminResponsiveHide"},
                {sName: 'english_content', sWidth: '25%', sClass: "adminResponsiveHide"},
                {sName: 'translated_content'},
                {bSortable: false, sWidth: '6%', sName: 'is_admin_area', sClass: "center adminResponsiveHide"},
                {bSortable: false, sWidth: '3%', sName: 'is_locked', sClass: "center adminResponsiveHide"},
                {bSortable: false, sWidth: '10%', sClass: "center"}
            ],
            "fnServerData": function (sSource, aoData, fnCallback) {
                aoData.push({"name": "filterText", "value": $('#filterText').val()});
                aoData.push({"name": "filterByIsAdmin", "value": $('#filterByIsAdmin').val()});
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                });
            },
            'oLanguage': $.extend(dataTableOpts.oLanguage, {
                'sEmptyTable': {{ ta('there_are_no_language_text_items_in_the_current_filters', 'There are no language text items in the current filters.')|json_encode()|raw }}
            })
        }));

        // update custom filter
        $('.dataTables_filter').html($('#customFilter').html());
    });

    function setLoader()
    {
        $('#translationForm').html({{ ta('loading_please_wait', 'Loading, please wait...')|json_encode()|raw }});
    }

    function editTranslationForm(translationId)
    {
        gTranslationId = translationId;
        showBasicModal({{ ta('loading_dots', 'Loading...')|json_encode()|raw }}, {{ ta('translate_text', 'Translate Text')|json_encode()|raw }}, '<button type="button" class="btn btn-primary" onClick="updateTranslationValue(); return false;">{{ ta('update_text', 'Update Text') }}</button>');
        loadEditTranslationForm();
    }
    
    function loadEditTranslationForm()
    {
        $.ajax({
            type: "POST",
            url: "ajax/translation_manage_text_edit_form",
            data: {gTranslationId: gTranslationId, languageId: {{ languageDetail.id }}},
            dataType: 'json',
            success: function (json) {
                if (json.error == true)
                {
                    setBasicModalContent(json.msg);
                } else
                {
                    setBasicModalContent(json.html);
                }

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                setBasicModalContent(XMLHttpRequest.responseText);
            }
        });
    } 
    
    function updateTranslationValue()
    {
        // get data
        translation_item_id = $('#translation_item_id').val();
        translated_content = $('#translated_content').val();

        $.ajax({
            type: "POST",
            url: "ajax/translation_manage_text_edit_process",
            data: {translation_item_id: translation_item_id, translated_content: translated_content, languageId: {{ languageDetail.id }}},
            dataType: 'json',
            success: function (json) {
                if (json.error == true)
                {
                    showError(json.msg, 'popupMessageContainer');
                } else
                {
                    showSuccess(json.msg);
                    reloadTable();
                    hideModal();
                }

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                showError(XMLHttpRequest.responseText, 'popupMessageContainer');
            }
        });
    }

    function startAutoTranslation()
    {
        showBasicModal({{ ta('loading_dots', 'Loading...')|json_encode()|raw }}, {{ ta('auth_translation', 'Auto Translation')|json_encode()|raw }});
        setBasicModalContent({{ ta('loading_please_wait', 'Loading, please wait...')|json_encode()|raw }});
        setBasicModalContent('<iframe src="{{ ADMIN_WEB_ROOT }}/ajax/translation_manage_text_auto_convert/{{ languageDetail.id }}" style="background: url(\'{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/images/spinner.gif\') no-repeat center center;" height="100%" width="100%" frameborder="0" scrolling="auto">{{ ta('loading_dots', 'Loading...') }}</iframe>');
    }

    function reloadTable()
    {
        oTable.fnDraw(false);
    }

    function deleteTranslation(textId)
    {
        if (confirm({{ ta('are_you_sure_you_want_to_delete_this_translation_text', 'Are you sure you want to delete this translation text? It will be removed from ALL languages you have, not just this one. It\'ll be repopulated with the default translation text when it\'s requested by the script, or after a translation re-scan.')|json_encode()|raw }}))
        {
            window.location = "{{ ADMIN_WEB_ROOT }}/translation_manage_text?languageId={{ languageDetail.id }}&d=" + textId;
        }

        return false;
    }

    function processAutoTranslate()
    {
        {% if SITE_CONFIG_GOOGLE_TRANSLATE_API_KEY|length == 0 %}
            alert({{ ta('valid_google_translation_api_key_required', 'This process requires a valid Google Translation API key within the site settings. Please add this and try again. Note: There may be a fee from Google for using the auto translation.')|json_encode()|raw }});
            return false;
        {% endif %}

        var enText = $('#enTranslationText').val();
        var toLangCode = $('#enTranslationCode').val();
        $.ajax({
            type: "POST",
            url: "ajax/translation_manage_text_auto_process",
            data: {enText: enText, toLangCode: toLangCode},
            dataType: 'json',
            success: function (json) {
                if (json.error == true)
                {
                    showError(json.msg, 'popupMessageContainer');
                } else
                {
                    showSuccess(json.msg);
                    $('#translated_content').val(json.translation);
                }

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                showError(XMLHttpRequest.responseText, 'popupMessageContainer');
            }
        });
    }

    function confirmAutomaticTranslate()
    {
        {% if SITE_CONFIG_GOOGLE_TRANSLATE_API_KEY|length == 0 %}
            alert({{ ta('valid_google_translation_api_key_required', 'This process requires a valid Google Translation API key within the site settings. Please add this and try again. Note: There may be a fee from Google for using the auto translation.')|json_encode()|raw }});
            return false;
        {% endif %}

        var msg = {{ ta('auto_translate_confirm_message_1', 'Are you sure you want to automatically translate the above \'en\' text into \'[[[LANGUAGE_CODE]]]\'? This will be done via the Google Translation API and may take some time to complete.', {'LANGUAGE_CODE': languageDetail.language_code})|json_encode()|raw }};
        msg += "\n\n";
        msg += {{ ta('auto_translate_confirm_message_2', 'IMPORTANT: This process will OVERWRITE any translations which are not locked (\'[[[LANGUAGE_CODE]]]\'). If you\'re unsure, cancel and \'export\' a copy of the language so you have a backup.', {'LANGUAGE_CODE': languageDetail.language_code})|json_encode()|raw }};
        msg += "\n\n";
        msg += {{ ta('auto_translate_confirm_message_3', 'If this process timesout, you can re-run it to pickup where it failed. Each new translation is marked as \'locked\' so it\'ll only be translated once.')|json_encode()|raw }};
        if (confirm(msg))
        {
            startAutoTranslation();
        }

        return false;
    }

    function toggleLock(contentId)
    {
        $.ajax({
            type: "POST",
            url: "ajax/translation_manage_text_set_is_locked",
            data: {contentId: contentId},
            dataType: 'json',
            success: function (json) {
                if (json.error == true)
                {
                    showError(json.msg);
                } else
                {
                    showSuccess(json.msg);
                    reloadTable();
                }

            },
            error: function (XMLHttpRequest) {
                showError(XMLHttpRequest.responseText);
            }
        });
    }

</script>

<!-- page content -->
<div class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>{{ block('title') }}</h3>
            </div>
        </div>
        <div class="clearfix"></div>

        {{ msg_page_notifications|raw }}

        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>{{ ta('translations', 'Translations') }}</h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <table id="fileTable" class="table table-striped table-only-border dtLoading bulk_action">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th class="align-left">{{ ta('language_key', 'Language Key') }}</th>
                                    <th class="align-left">{{ ta('default_content', 'Default Content') }}</th>
                                    <th class="align-left">{{ ta('translated_content', 'Translated Content') }}</th>
                                    <th>{{ ta('used_in', 'Used In') }}</th>
                                    <th></th>
                                    <th class="align-left">{{ ta('actions', 'Actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="20">{{ ta('admin_loading_data', 'Loading data...') }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="x_panel">
                    <div class="pull-left">
                        <a href="translation_manage" type="button" class="btn btn-primary">< {{ ta('back_to_languages', 'Back to Languages') }}</a>
                    </div>
                    <div class="pull-right">
                        <a href="#" type="button" class="btn btn-default" onClick="confirmAutomaticTranslate(); return false;">{{ ta('automatic_translate_via_google_translate', 'Automatic Translate (via Google Translate)') }}</a>
                        <a href="translation_manage_export?languageId={{ languageDetail.id }}" type="button" class="btn btn-default">{{ ta('export_translations', 'Export Translations') }}</a>
                        <a href="translation_manage_import?languageId={{ languageDetail.id }}" type="button" class="btn btn-default">{{ ta('import_translations', 'Import Translations') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="customFilter" id="customFilter" style="display: none;">
    <label>
        {{ ta('filter_results', 'Filter Results') }}:
        <input name="filterText" id="filterText" type="text" onKeyUp="reloadTable();
                return false;" style="width: 160px;" class="form-control input-sm"/>
    </label>
    <label style="padding-left: 6px;">
        {{ ta('by_usage', 'Usage') }}:
        <select name="filterByIsAdmin" id="filterByIsAdmin" onChange="reloadTable();
                return false;" style="width: 160px;" class="form-control">
            <option value="">- {{ ta('all', 'all') }} -</option>
            {% for k,usageType in usageTypes %}
                <option value="{{ k }}"{{ k == 0?' SELECTED':'' }}>{{ usageType }}</option>
            {% endfor %}
        </select>
    </label>
</div>
{% endblock %}