{$layout}
{$template "settings_menu"}
{$template "/left_menu_with_menu"}

<div class="right-box with-menu">
	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
		<input type="hidden" name="serverId" :value="server.id"/>
		<table class="ui table selectable definition">
            <tr>
                <td>所属用户</td>
                <td>
                    <span v-if="user != null">{{user.fullname}} <span class="small">（{{user.username}}）</span><link-icon :href="'/users/user?userId=' + user.id"></link-icon></span>
                    <div v-if="user == null">
                        <div v-show="!userSelectorVisible">
                            <span class="disabled">没有指定用户</span> &nbsp; <a href="" @click.prevent="showUserSelector">[指定用户]</a>
                        </div>
                        <div v-show="userSelectorVisible">
                            <user-selector style="display:inline-block"></user-selector>
                            <p class="comment"><span class="red">修改服务所属用户时需要同时保证证书、域名等信息也属于该用户，否则可能产生难以预料的结果。</span></p>
                        </div>
                    </div>
                </td>
            </tr>
			<tr>
				<td class="title">服务名称 *</td>
				<td>
					<input type="text" name="name" maxlength="60" ref="focus" v-model="server.name"/>
				</td>
			</tr>
            <tr v-if="plans.length > 0">
                <td>选择套餐</td>
                <td>
                    <select class="ui dropdown auto-width" name="userPlanId" v-model="userPlanId">
                        <option value="0">[选择套餐]</option>
                        <option v-for="plan in plans" :value="plan.id">{{plan.name}}（{{plan.dayTo}}）</option>
                    </select>
                </td>
            </tr>
			<tr>
				<td :class="{'color-border':server.clusterId != oldClusterId}">部署的集群 *</td>
				<td>
					<select class="ui dropdown auto-width" name="clusterId" v-model="server.clusterId" >
						<option v-for="cluster in clusters" :value="cluster.id">{{cluster.name}}</option>
					</select>
				</td>
			</tr>
            <tr v-show="server.clusterId != oldClusterId">
                <td class="color-border">是否保留原集群配置</td>
                <td>
                    <checkbox name="keepOldConfigs" checked="checked"></checkbox>
                    <p class="comment">选中表示在先前的集群节点上仍然保留当前服务的配置，直至节点配置全部刷新时才会删除；不选中，则表示立即删除原集群上关于当前服务的配置。</p>
                </td>
            </tr>
			<tr>
				<td>服务类型 *</td>
				<td>
					{{typeName}}
				</td>
			</tr>
			<tr>
				<td>选择分组</td>
				<td>
					<server-group-selector :v-groups="server.groups"></server-group-selector>
				</td>
			</tr>
			<tr>
				<td colspan="2"><more-options-indicator></more-options-indicator></td>
			</tr>
			<tbody v-show="moreOptionsVisible">
				<tr>
					<td>描述</td>
					<td>
						<textarea name="description" rows="3" v-model="server.description"></textarea>
					</td>
				</tr>
				<tr>
					<td>启用当前服务</td>
					<td>
						<div class="ui checkbox">
							<input type="checkbox" name="isOn" value="1" v-model="server.isOn"/>
							<label></label>
						</div>
						<p class="comment">可以使用此选项整体关闭当前服务。</p>
					</td>
				</tr>
			</tbody>
		</table>
		<submit-btn></submit-btn>
	</form>
</div>