{include:head.html}
{include:header.html}
<link rel="stylesheet" href="/static/member/member.css">

<div class="main">
    <div class="container member-container">
        <div class="member-layout">
            <aside class="member-sidebar">
                {raw:member_sidebar}
            </aside>
            <main class="member-content">
                <div class="auth-wrap">
                    <h2>修改资料</h2>
                    {raw:error}
                    {raw:success}
                    <form method="post" action="{raw:form_action}" enctype="multipart/form-data" class="auth-form">
                        <div class="form-group">
                            <label>用户名</label>
                            <input type="text" value="{var:member.username}" readonly class="readonly-input">
                        </div>
                        <div class="form-group avatar-group">
                            <div class="avatar-row">
                                <div class="avatar-block">
                                    <div class="avatar-label">头像</div>
                                    <div class="avatar-img current">{raw:avatar_html}</div>
                                </div>
                                <div class="avatar-block avatar-block-btn">
                                    <div class="avatar-label" style="visibility:hidden;">选择图片</div>
                                    <input type="file" name="avatar" id="avatarInput" accept="image/jpeg,image/png,image/gif,image/webp" class="avatar-input-file">
                                </div>
                                <div class="avatar-block">
                                    <div class="avatar-label">预览</div>
                                    <div class="avatar-preview-box" id="avatarPreviewBox">
                                        <img id="avatarPreviewImg" alt="预览">
                                    </div>
                                </div>
                            </div>
                            <p class="form-tip">支持 jpg/png/gif/webp，最大 2MB</p>
                        </div>
                        <div class="form-group">
                            <label>昵称</label>
                            <input type="text" name="display_name" value="{var:member.display_name}">
                        </div>
                        <div class="form-group">
                            <label>邮箱</label>
                            <input type="email" name="email" value="{var:member.email}">
                        </div>
                        <div class="form-group">
                            <label>手机</label>
                            <input type="text" name="phone" value="{var:member.phone}">
                        </div>
                        <div class="form-group">
                            <label>QQ号</label>
                            <input type="text" name="qq" value="{var:member.qq}" placeholder="填写QQ号码">
                        </div>
                        <div class="form-group">
                            <label>微信号</label>
                            <input type="text" name="wechat" value="{var:member.wechat}" placeholder="填写微信号">
                        </div>
                        <div class="form-group">
                            <label>性别</label>
                            <select name="gender" class="input-half">
                                <option value="0" {raw:gender_0}>保密</option>
                                <option value="1" {raw:gender_1}>男</option>
                                <option value="2" {raw:gender_2}>女</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>地址</label>
                            <input type="text" name="address" value="{var:member.address}" placeholder="请填写您的联系地址">
                        </div>
                        <div class="form-divider"></div>
                        <div class="form-group">
                            <label>旧密码（修改密码时填写）</label>
                            <input type="password" name="old_password" placeholder="不修改密码请留空">
                        </div>
                        <div class="form-group">
                            <label>新密码</label>
                            <input type="password" name="new_password" placeholder="至少8位，含两类字符">
                        </div>
                        <div class="form-group">
                            <label>确认新密码</label>
                            <input type="password" name="new_password2" placeholder="再输入一次新密码">
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn-submit">保存修改</button>
                        </div>
                    </form>
                </div>
            </main>
        </div>
    </div>
</div>

<script>
(function() {
    var input = document.getElementById('avatarInput');
    var box = document.getElementById('avatarPreviewBox');
    var img = document.getElementById('avatarPreviewImg');
    if (!input || !box || !img) return;
    box.style.display = 'none';
    input.addEventListener('change', function() {
        var file = input.files[0];
        if (!file) { box.style.display = 'none'; return; }
        if (!file.type.match(/^image\/(jpeg|png|gif|webp)$/i)) { box.style.display = 'none'; return; }
        var reader = new FileReader();
        reader.onload = function(e) {
            img.src = e.target.result;
            box.style.display = 'inline-block';
        };
        reader.readAsDataURL(file);
    });
})();
</script>

{include:footer.html}