{template "header.html"}

<style>
.lang-edit { margin: -8px 0 0; background: #fff; }
.lang-bar { display: flex; align-items: center; gap: 8px; padding: 0 2px 12px; }
.lang-bar .btn { height: 34px; padding: 0 16px; border-radius: 4px; }
.lang-search { position: relative; flex: 1; }
.lang-search .fa { position: absolute; left: 11px; top: 10px; color: #b0b7c0; font-size: 13px; }
.lang-search input { height: 34px; padding-left: 32px; border-radius: 4px; border-color: #e5e8ec; box-shadow: none; }
.lang-sheet { border: 1px solid #eceff3; border-radius: 6px; overflow: hidden; }
.lang-scroll { max-height: calc(100vh - 92px); overflow: auto; }
.lang-cols, .lang-row { display: grid; align-items: center; column-gap: 16px; padding: 0 14px; }
.lang-cols { grid-template-columns: {if $show_base}168px minmax(0, .9fr) minmax(0, 1.2fr) 28px{else}168px minmax(0, 1fr) 28px{/if}; position: sticky; top: 0; z-index: 2; height: 38px; background: #f7f8fa; border-bottom: 1px solid #eceff3; color: #8b939e; font-size: 12px; }
.lang-row { grid-template-columns: {if $show_base}168px minmax(0, .9fr) minmax(0, 1.2fr) 28px{else}168px minmax(0, 1fr) 28px{/if}; min-height: 52px; border-bottom: 1px solid #f3f5f7; }
.lang-row:last-child { border-bottom: 0; }
.lang-row:hover { background: #f8fbff; }
.lang-row.is-new { background: #f3fbf6; }
.lang-k { color: #2c333a; font-size: 13px; line-height: 1.4; word-break: break-all; }
.lang-base { color: #98a0a8; font-size: 13px; line-height: 1.4; word-break: break-all; }
.lang-row .form-control { height: 34px; border-radius: 4px; border-color: #e5e8ec; box-shadow: none; }
.lang-row .form-control:focus { border-color: #36c6d3; }
.lang-del { color: #d0d5db; font-size: 15px; }
.lang-row:hover .lang-del { color: #e26a6a; }
.lang-path { margin: -4px 2px 10px; color: #8b939e; font-size: 12px; line-height: 1.5; word-break: break-all; font-family: Menlo, Consolas, monospace; }
.lang-edit.has-path .lang-scroll { max-height: calc(100vh - 124px); }
</style>

<form action="" method="post" name="myform" id="myform">
    {$form}
    <div class="lang-edit{if IS_DEV} has-path{/if}">
        <div class="lang-bar">
            <button type="button" class="btn green" onclick="lang_add_row()"> <i class="fa fa-plus"></i> {dr_lang('添加')}</button>
            <div class="lang-search">
                <i class="fa fa-search"></i>
                <input type="text" id="lang-q" class="form-control" placeholder="{if $type == 'php'}{dr_lang('搜索原文或译文，译文留空不会保存')}{else}{if $show_base}{dr_lang('搜索参数或译文，填写后点确定保存')}{else}{dr_lang('搜索参数或文案')}{/if}{/if}" onkeyup="lang_filter(this.value)">
            </div>
        </div>
        {if IS_DEV}
        <p class="lang-path">{htmlspecialchars((string)$filepath)}</p>
        {/if}
        <div class="lang-sheet">
            <div class="lang-cols">
                <span>{if $type == 'php'}{dr_lang('原文')}{else}{dr_lang('参数')}{/if}</span>
                {if $show_base}<span>{dr_lang('默认')}</span>{/if}
                <span>{if $type == 'js' && !$show_base}{dr_lang('文案')}{else}{dr_lang('译文')}{/if}</span>
                <span></span>
            </div>
            <div class="lang-scroll" id="lang-scroll">
                <div id="lang-rows">
                {loop $rows $t}
                <div class="lang-row">
                    <div class="lang-k">
                        {if $t.lock}
                        <input type="hidden" name="data[key][]" value="{htmlspecialchars((string)$t.key)}">
                        {htmlspecialchars((string)$t.key)}
                        {else}
                        <input type="text" class="form-control" name="data[key][]" value="{htmlspecialchars((string)$t.key)}" placeholder="{dr_lang('参数')}">
                        {/if}
                    </div>
                    {if $show_base}
                    <div class="lang-base">{htmlspecialchars((string)$t.base)}</div>
                    {/if}
                    <div><input type="text" class="form-control" name="data[value][]" value="{htmlspecialchars((string)$t.value)}" placeholder="{dr_lang('填写译文')}"></div>
                    <div>
                        {if !$t.lock}
                        <a href="javascript:;" class="lang-del" onclick="lang_del_row(this)"><i class="fa fa-trash-o"></i></a>
                        {/if}
                    </div>
                </div>
                {/loop}
                </div>
            </div>
        </div>
    </div>
</form>

<script>
var lang_show_base = {intval($show_base)};
function lang_add_row() {
    $('#lang-q').val('');
    lang_filter('');
    var base = '';
    if (lang_show_base) {
        base = '<div class="lang-base"></div>';
    }
    var html = '<div class="lang-row is-new">'
        + '<div class="lang-k"><input type="text" class="form-control" name="data[key][]" value="" placeholder="{dr_lang('参数')}"></div>'
        + base
        + '<div><input type="text" class="form-control" name="data[value][]" value="" placeholder="{dr_lang('填写译文')}"></div>'
        + '<div><a href="javascript:;" class="lang-del" onclick="lang_del_row(this)"><i class="fa fa-trash-o"></i></a></div>'
        + '</div>';
    var $row = $(html);
    $('#lang-rows').prepend($row);
    $('#lang-scroll').scrollTop(0);
    $row.find('input[type="text"]').first().focus();
}
function lang_del_row(el) {
    $(el).closest('.lang-row').remove();
}
function lang_filter(v) {
    v = (v || '').toLowerCase();
    $('#lang-rows .lang-row').each(function() {
        var text = $(this).find('input').map(function() { return this.value; }).get().join(' ').toLowerCase();
        text += ' ' + $(this).text().toLowerCase();
        $(this).toggle(v === '' || text.indexOf(v) >= 0);
    });
}
</script>

{template "footer.html"}