{$layout}
{$template "user_menu"}

<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"/>
	<table class="ui table definition selectable">
        <tr>
            <td class="title">用户名 *</td>
            <td>
                <input type="text" name="username" maxlength="100" ref="focus" v-model="user.username"/>
                <p class="comment">用户名只能是英文、数字、下划线的组合。</p>
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <div>
                    <a href="" @click.prevent="changePasswordEditing">修改密码<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"/>
                    <p class="comment">留空表示不修改。</p>
                </div>
            </td>
        </tr>
        <tr v-show="passwordEditing">
            <td>确认密码</td>
            <td>
                <input type="password" name="pass2" maxlength="100"/>
            </td>
        </tr>
        <tr>
            <td>全名 *</td>
            <td>
                <input type="text" name="fullname" maxlength="100" v-model="user.fullname"/>
                <p class="comment">用户姓名或者公司名称等等。</p>
            </td>
        </tr>
        <tr>
            <td>关联集群 *</td>
            <td>
                <cluster-selector :v-cluster-id="clusterId"></cluster-selector>
                <p class="comment">用户发布的网站服务会自动部署到此集群，修改此选项会同步修改当前用户下的所有服务，但不影响和套餐绑定的服务。</p>
            </td>
        </tr>
        <tr>
            <td colspan="2"><more-options-indicator></more-options-indicator></td>
        </tr>
        <tbody v-show="moreOptionsVisible">
            <tr>
                <td>手机号</td>
                <td>
                    <input type="text" name="mobile" maxlength="11" v-model="user.mobile"/>
                </td>
            </tr>
            <tr>
                <td>联系电话</td>
                <td>
                    <input type="text" name="tel" maxlength="100" v-model="user.tel"/>
                </td>
            </tr>
            <tr>
                <td>电子邮箱</td>
                <td>
                    <input type="text" name="email" maxlength="100" v-model="user.email"/>
                </td>
            </tr>
            <tr>
                <td>OTP认证</td>
                <td>
                    <checkbox name="otpOn" v-model="user.otpLoginIsOn">启用OTP</checkbox>
                    <p class="comment">启用OTP认证后，在用户登录的时候需要同时填写OTP动态密码。</p>
                </td>
            </tr>
            <tr>
                <td>备注</td>
                <td>
                    <textarea rows="3" name="remark" v-model="user.remark"></textarea>
                </td>
            </tr>
            <tr>
                <td>启用当前用户</td>
                <td>
                    <checkbox name="isOn" v-model="user.isOn"></checkbox>
                </td>
            </tr>
        </tbody>
	</table>
	<submit-btn></submit-btn>
</form>