{$layout}
{$template "/code_editor"}

<first-menu>
    <menu-item href="/servers/scripts">{{t('scripts@脚本库')}}</menu-item>
    <span class="item disabled" style="padding: 0">&raquo;</span>
    <menu-item :href="'.script?scriptId=' + script.id">"{{script.filename}}" {{t('scripts@详情')}}</menu-item>
    <menu-item :href="'.update?scriptId=' + script.id" class="active">{{t('scripts@修改')}}</menu-item>
</first-menu>

<div class="left-right-box-container">
    <div class="right-box">
        <div class="config-section">
            <div class="section-title">
                <i class="icon edit"></i>
                {{t('scripts@修改脚本')}}
            </div>

            <form class="ui form" data-tea-action="$" data-tea-success="success">
                <csrf-token></csrf-token>
                <input type="hidden" name="scriptId" :value="script.id"/>
                
                <div class="config-item">
                    <div class="item-label">{{t('scripts@脚本文件名')}} *</div>
                    <div class="item-content">
                        <input type="text" name="filename" maxlength="50" :ref="isEditingCode ? '' : 'focus'" placeholder="xxx.js" v-model="script.filename" spellcheck="false"/>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('scripts@脚本说明')}} *</div>
                    <div class="item-content">
                        <input type="text" name="name" maxlength="50" :placeholder="t('scripts@脚本说明Placeholder')" v-model="script.name"/>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('scripts@脚本代码')}}</div>
                    <div class="item-content">
                        <source-code-box type="application/javascript" :read-only="false" name="code" height="200" focus="true">{{script.code}}</source-code-box>
                    </div>
                </div>

                <div>
                    <div class="config-item">
                        <div class="item-label">{{t('scripts@启用当前脚本')}}</div>
                        <div class="item-content">
                            <p-switch name="isOn" :v-value="1" v-model="script.isOn"></p-switch>
                        </div>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label"></div>
                    <div class="item-content">
                        <submit-btn></submit-btn>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>