{$layout}
{$template "user_menu"}

<div class="right-box">
	<div class="config-section">
		<div class="section-title">{{t('users_update@修改用户信息')}}</div>

		<form class="ui form" method="post" data-tea-action="$" data-tea-success="success">
			<csrf-token></csrf-token>
			<input type="hidden" name="userId" :value="user.id"/>

			<div class="config-item">
				<div class="item-label">{{t('users_update@用户名')}}</div>
				<div class="item-content">
					<input type="text" name="username" maxlength="100" ref="focus" v-model="user.username" class="ui input"/>
					<p class="comment">{{t('users_update@用户名只能是英文、数字、下划线的组合')}}</p>
				</div>
			</div>

			<div class="config-item">
				<div class="item-label">{{t('users_update@密码')}}</div>
				<div class="item-content">
					<div>
						<a href="" @click.prevent="changePasswordEditing">{{t('users_update@修改密码')}}<i class="icon angle" :class="{down:!passwordEditing, up:passwordEditing}"></i></a>
					</div>

					<div v-show="passwordEditing" style="margin-top: 0.6em">
						<input type="password" name="pass1" maxlength="100" class="ui input"/>
						<p class="comment">{{t('users_update@留空表示不修改')}}</p>
					</div>
				</div>
			</div>

			<div class="config-item" v-show="passwordEditing">
				<div class="item-label">{{t('users_update@确认密码')}}</div>
				<div class="item-content">
					<input type="password" name="pass2" maxlength="100" class="ui input"/>
				</div>
			</div>

			<div class="config-item">
				<div class="item-label">{{t('users_update@全名')}}</div>
				<div class="item-content">
					<input type="text" name="fullname" maxlength="100" v-model="user.fullname" class="ui input"/>
					<p class="comment">{{t('users_update@用户姓名或者公司名称等等')}}</p>
				</div>
			</div>

			<div class="config-item">
				<div class="item-label">{{t('users_update@关联集群')}}</div>
				<div class="item-content">
					<cluster-selector :v-cluster-id="clusterId"></cluster-selector>
					<p class="comment">{{t('users_update@用户发布的网站会自动部署到此集群，修改此选项会同步修改当前用户下的所有网站，但不影响和套餐绑定的服务')}}</p>
				</div>
			</div>

			<div class="config-item">
				<div class="item-label">{{t('users_update@更多选项')}}</div>
				<div class="item-content">
					<a href="" @click.prevent="moreOptionsVisible = !moreOptionsVisible" class="more-options-toggle">
						<i class="icon angle" :class="{down:!moreOptionsVisible, right:moreOptionsVisible}"></i>
						<span v-if="!moreOptionsVisible">{{t('users_update@显示更多选项')}}</span>
						<span v-if="moreOptionsVisible">{{t('users_update@收起选项')}}</span>
					</a>
				</div>
			</div>

			<div v-show="moreOptionsVisible">
				<div class="config-item">
					<div class="item-label">{{t('users_update@手机号')}}</div>
					<div class="item-content">
						<input type="text" name="mobile" maxlength="11" v-model="user.mobile" class="ui input"/>
					</div>
				</div>

				<div class="config-item">
					<div class="item-label">{{t('users_update@联系电话')}}</div>
					<div class="item-content">
						<input type="text" name="tel" maxlength="100" v-model="user.tel" class="ui input"/>
					</div>
				</div>

				<div class="config-item">
					<div class="item-label">{{t('users_update@电子邮箱')}}</div>
					<div class="item-content">
						<input type="text" name="email" maxlength="100" v-model="user.email" class="ui input"/>
					</div>
				</div>

				<div class="config-item">
					<div class="item-label">{{t('users_update@OTP认证')}}</div>
					<div class="item-content">
						<checkbox name="otpOn" v-model="user.otpLoginIsOn">{{t('users_update@启用OTP')}}</checkbox>
						<p class="comment">{{t('users_update@启用OTP认证后，在用户登录的时候需要同时填写OTP动态密码')}}</p>
					</div>
				</div>

				<div class="config-item">
					<div class="item-label">{{t('users_update@备注')}}</div>
					<div class="item-content">
						<textarea rows="3" name="remark" v-model="user.remark" class="ui input"></textarea>
					</div>
				</div>

				<div class="config-item">
					<div class="item-label">{{t('users_update@带宽算法')}}</div>
					<div class="item-content">
						<b-select
							name="bandwidthAlgo"
							v-model="user.bandwidthAlgo"
							auto-width
							:options="[
								{label: t('users_update@使用默认'), value: ''},
								{label: t('users_update@峰值带宽'), value: 'secondly'},
								{label: t('users_update@平均带宽'), value: 'avg'},
							]"
						></b-select>
						<p class="comment" v-if="user.bandwidthAlgo == 'secondly'">{{t('users_update@按在计时时间段内（5分钟）最高带宽峰值计算，比如5分钟内最高的某个时间点带宽为100Mbps，那么就认为此时间段内的峰值带宽为100Mbps')}}</p>
						<p class="comment" v-if="user.bandwidthAlgo == 'avg'">{{t('users_update@按在计时时间段内（5分钟）平均带宽计算，即此时间段内的总流量除以时间段的秒数，比如5分钟（300秒）内总流量600MiB，那么带宽即为')}}<code-label>600MiB * 8bit/300s = 16Mbps</code-label>{{t('users_update@；通常平均带宽算法要比峰值带宽要少很多')}}</p>
					</div>
				</div>

				<div class="config-item">
					<div class="item-label">{{t('users_update@启用当前用户')}}</div>
					<div class="item-content">
						<checkbox name="isOn" v-model="user.isOn"></checkbox>
					</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>