{template "header.html"}

<style>
.lang-set { width: 100%; }
.lang-card { background: #fff; border: 1px solid #eceff3; border-radius: 5px; margin-bottom: 16px; }
.lang-card-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #f2f4f7; font-size: 14px; font-weight: 600; color: #2c333a; }
.lang-card-hd .btn { padding: 0 8px; height: 24px; line-height: 22px; font-size: 12px; font-weight: 400; border-radius: 3px; }
.lang-card-bd { padding: 16px 18px 18px; }
.lang-status { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.lang-status i { width: 36px; height: 36px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.lang-status.is-auto i { background: #e8f8ef; color: #1f9d55; }
.lang-status.is-hand i { background: #f4f6f8; color: #8b939e; }
.lang-status b { display: block; font-size: 14px; color: #2c333a; margin-bottom: 4px; }
.lang-status p { margin: 0; color: #8b939e; font-size: 13px; line-height: 1.6; }
.lang-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.lang-pick { position: relative; display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 12px; border: 1px solid #e5e8ec; border-radius: 8px; background: #fff; cursor: pointer; }
.lang-pick:hover { border-color: #28b6ff; }
.lang-pick.is-on { border-color: #28b6ff; background: #f7fcff; }
.lang-pick input { position: absolute; opacity: 0; pointer-events: none; }
.lang-check { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border-radius: 4px; border: 1px solid #d0d0d0; background: #fff; color: transparent; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.lang-pick.is-on .lang-check { border-color: #28b6ff; background: #28b6ff; color: #fff; }
.lang-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 4px; border: 1px solid #e5e8ec; background: #f7f8fa; color: #66707a; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.lang-pick.is-on .lang-ico { border-color: #b7e3f8; background: #eaf8ff; color: #28b6ff; }
.lang-body { flex: 1; min-width: 0; padding-right: 18px; }
.lang-body strong { display: block; font-size: 14px; font-weight: 600; color: #2c333a; line-height: 1.35; }
.lang-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: #f4f6f8; color: #8b939e; font-size: 11px; font-weight: 400; vertical-align: middle; line-height: 18px; }
.lang-body em { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: #8b939e; line-height: 1.5; min-height: 36px; }
.lang-meta { margin-top: 6px; }
.lang-meta .btn { padding: 0 6px; height: 20px; line-height: 18px; font-size: 11px; border-radius: 3px; }
.lang-tip { margin: 12px 0 0; font-size: 12px; color: #8b939e; }
.lang-field { margin-bottom: 14px; }
.lang-field label { display: block; margin-bottom: 6px; color: #66707a; font-size: 13px; }
.lang-field .form-control { height: 36px; border-radius: 4px; border-color: #e5e8ec; box-shadow: none; }
.lang-field .help { margin-top: 6px; color: #a0a8b3; font-size: 12px; }
.lang-lang { width: 100%; }
.lang-result { min-height: 36px; padding: 8px 12px; border-radius: 4px; background: #f7f8fa; color: #2c333a; line-height: 1.5; word-break: break-all; }
.lang-result.is-empty { color: #b0b7c0; }
</style>

<form method="post" name="myform" id="myform">
    {$form}
    <div class="myfbody">
    <div class="lang-set">
        <div class="lang-card">
            <div class="lang-card-hd">{dr_lang('后台翻译')}</div>
            <div class="lang-card-bd">
                <div class="mt-radio-inline">
                    <label class="mt-radio mt-radio-outline"><input type="radio" name="data[admin]" value="0" {if !$admin}checked{/if} /> {dr_lang('关闭')} <span></span></label>
                    <label class="mt-radio mt-radio-outline"><input type="radio" name="data[admin]" value="1" {if $admin}checked{/if} /> {dr_lang('开启')} <span></span></label>
                </div>
                <p class="lang-tip">{dr_lang('关闭后后台只使用语言包，不调用翻译接口；前台不受影响')}</p>
            </div>
        </div>
        <div class="lang-card">
            <div class="lang-card-hd">
                <span>{dr_lang('翻译接口')}</span>
                {if !IS_OEM_CMS}
                <a href="https://www.xunruicms.com/api/xunrui.php?at=lang" class="btn blue btn-xs" target="_blank">
                    <i class="fa fa-cloud-download"></i> {dr_lang('更多接口')}
                </a>
                {/if}
            </div>
            <div class="lang-card-bd">
                
                <div class="lang-list" id="dr_lang_list">
                    <label class="lang-pick {if !$app}is-on{/if}">
                        <input type="radio" name="data[app]" value="" {if !$app}checked{/if}>
                        <span class="lang-check"><i class="fa fa-check"></i></span>
                        <span class="lang-ico"><i class="fa fa-pencil"></i></span>
                        <span class="lang-body">
                            <strong>{dr_lang('手动翻译')}<span class="lang-tag">{dr_lang('系统')}</span></strong>
                            <em>{dr_lang('不调用插件，只使用语言包里已填写的译文')}</em>
                        </span>
                    </label>
                    <label class="lang-pick {if $app == 'my'}is-on{/if}">
                        <input type="radio" name="data[app]" value="my" {if $app == 'my'}checked{/if}>
                        <span class="lang-check"><i class="fa fa-check"></i></span>
                        <span class="lang-ico"><i class="fa fa-code"></i></span>
                        <span class="lang-body">
                            <strong>{dr_lang('自定义翻译')}<span class="lang-tag">{if $my_ok}{dr_lang('已定义')}{else}{dr_lang('未定义')}{/if}</span></strong>
                            <em>{dr_lang('调用 my_translate_lang 函数翻译')}</em>
                        </span>
                    </label>
                    {loop $apps $dir $cfg}
                    <label class="lang-pick {if $app==$dir}is-on{/if}">
                        <input type="radio" name="data[app]" value="{$dir}" {if $app==$dir}checked{/if}>
                        <span class="lang-check"><i class="fa fa-check"></i></span>
                        <span class="lang-ico"><i class="{if $cfg.icon}{$cfg.icon}{else}fa fa-language{/if}"></i></span>
                        <span class="lang-body">
                            <strong>{$cfg.name}<span class="lang-tag">{$dir}</span></strong>
                            <em>{if $cfg.desc}{$cfg.desc}{else}{$cfg.name}{/if}</em>
                            {if $cfg.uri}
                            <span class="lang-meta">
                                <a href="javascript:;" class="btn blue btn-xs" onclick="event.preventDefault();event.stopPropagation();dr_iframe_show('{dr_lang('配置')}{$cfg.name}', '{dr_url($cfg.uri)}', '80%', '90%');">
                                    <i class="fa fa-cog"></i> {dr_lang('进入配置')}
                                </a>
                            </span>
                            {/if}
                        </span>
                    </label>
                    {/loop}
                </div>
            </div>
        </div>

        <div class="lang-card">
            <div class="lang-card-hd">{dr_lang('翻译测试')}</div>
            <div class="lang-card-bd">
                <div class="lang-field">
                    <label>{dr_lang('原文')}</label>
                    <input type="text" class="form-control" name="text" id="dr_text" value="{htmlspecialchars((string)$text)}">
                </div>
                <div class="lang-field">
                    <label>{dr_lang('目标语言')}</label>
                    <input type="text" class="form-control lang-lang" name="lang" id="dr_lang_code" value="en" placeholder="en">
                    <div class="help">{dr_lang('填写语言目录，如 en、ja、zh-tw')}</div>
                </div>
                <div class="lang-field">
                    <label>{dr_lang('译文')}</label>
                    <div class="lang-result is-empty" id="dr_result">{dr_lang('点击测试后显示译文')}</div>
                </div>
                <button type="button" class="btn green" onclick="lang_test()"> <i class="fa fa-language"></i> {dr_lang('测试翻译')}</button>
            </div>
        </div>
    </div>

    <div class="portlet-body form myfooter">
        <div class="form-actions text-center">
            <button type="button" onclick="dr_ajax_submit('{dr_now_url()}', 'myform', '2000')" class="btn blue"> <i class="fa fa-save"></i> {dr_lang('保存')}</button>
        </div>
    </div>
</div>
</form>

<script>
$('#dr_lang_list').on('change', 'input[name="data[app]"]', function () {
    $('#dr_lang_list .lang-pick').removeClass('is-on');
    $(this).closest('.lang-pick').addClass('is-on');
});
function lang_test() {
    var loading = layer.load(2, {shade: [0.3, '#fff'], time: 100000000});
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: '{dr_url('lang/test')}',
        data: $('#myform').serialize(),
        success: function(json) {
            layer.close(loading);
            if (json.code) {
                $('#dr_result').removeClass('is-empty').text(json.msg);
            } else {
                dr_cmf_tips(0, json.msg);
            }
        },
        error: function(HttpRequest, ajaxOptions, thrownError) {
            dr_ajax_alert_error(HttpRequest, this, thrownError);
        }
    });
}
</script>

{template "footer.html"}