{% extends 'snippet/layout.html' %}
{% load forum_extras %}

{% block main %}
    <div class="container-box">
        <form class="form-horizontal setting" action='' method="POST">
            <fieldset>
                <div id="legend">
                    <legend class="">用户信息设置</legend>
                </div>
                {% if success_message %}
                <ul class="alert alert-success">
                    <li>{{ success_message }}</li>
                </ul>
                {% endif %}
                {{ errors|dump_errors }}
                <div class="control-group">
                    <!-- Avatar -->
                    <label class="control-label" for="username">头像</label>
                    <div class="controls">
                        <img src="/static/avatar/b_{% if user.avatar %}{{ user.avatar }}{% else %}default.png{% endif %}?t={% gen_random %}" alt="" class="avatar" />
                        <img src="/static/avatar/m_{% if user.avatar %}{{ user.avatar }}{% else %}default.png{% endif %}?t={% gen_random %}" alt="" class="avatar" />
                        <img src="/static/avatar/s_{% if user.avatar %}{{ user.avatar }}{% else %}default.png{% endif %}?t={% gen_random %}" alt="" class="avatar" />
                        <a href="/setting/avatar/" class="btn btn-block set-avatar-btn">设置头像</a>
                    </div>
                </div>

                <div class="control-group">
                    <!-- Username -->
                    <label class="control-label" for="username">用户名</label>
                    <div class="controls">
                        <input type="text" id="username" name="username" placeholder="" class="input-xlarge" value="{% if user.username %}{{ user.username }}{% endif %}" readonly>
                        <p class="help-block">用户名由字母开头，只能含有字母、数字或者下划线</p>
                    </div>
                </div>

                <div class="control-group">
                    <!-- E-mail -->
                    <label class="control-label" for="email">E-mail</label>
                    <div class="controls">
                        <input type="text" id="email" name="email" placeholder="" class="input-xlarge" value="{% if user.email %}{{ user.email }}{% endif %}" readonly>
                        <p class="help-block">你的E-mail，便于登录和找回密码</p>
                    </div>
                </div>

                <div class="control-group">
                    <!-- Nickname -->
                    <label class="control-label" for="nickname">昵称</label>
                    <div class="controls">
                        <input type="text" id="nickname" name="nickname" placeholder="" class="input-xlarge" value="{% if user.nickname %}{{ user.nickname }}{% endif %}">
                        <p class="help-block">你的昵称，便于其他人更好的认识你</p>
                    </div>
                </div>

                <div class="control-group">
                    <!-- E-mail -->
                    <label class="control-label" for="signature">个性签名</label>
                    <div class="controls">
                        <input type="text" id="signature" name="signature" placeholder="" class="input-xlarge" value="{% if user.signature %}{{ user.signature }}{% endif %}">
                        <p class="help-block">你的签名，将展示在你的个人资料页面</p>
                    </div>
                </div>

                <div class="control-group">
                    <!-- Location -->
                    <label class="control-label" for="location">城市</label>
                    <div class="controls">
                        <input type="text" id="location" name="location" placeholder="" class="input-xlarge" value="{% if user.location %}{{ user.location }}{% endif %}">
                        <p class="help-block">你的城市，有助于后续你在社区的交友</p>
                    </div>
                </div>

                <div class="control-group">
                    <!-- E-mail -->
                    <label class="control-label" for="website">个人网站</label>
                    <div class="controls">
                        <input type="text" id="website" name="website" placeholder="" class="input-xlarge" value="{% if user.website %}{{ user.website }}{% endif %}">
                        <p class="help-block">你的个人网站，让你的朋友了解你更多一点</p>
                    </div>
                </div>

                <div class="control-group">
                    <!-- E-mail -->
                    <label class="control-label" for="company">所在公司</label>
                    <div class="controls">
                        <input type="text" id="company" name="company" placeholder="" class="input-xlarge" value="{% if user.company %}{{ user.company }}{% endif %}">
                        <p class="help-block">你所在的公司，让你的朋友了解你更多一点</p>
                    </div>
                </div>

                <div class="control-group">
                    <!-- E-mail -->
                    <label class="control-label" for="github">Github用户名：</label>
                    <div class="controls">
                        <input type="text" id="github" name="github" placeholder="" class="input-xlarge" value="{% if user.github %}{{ user.github }}{% endif %}">
                        <p class="help-block">你的Github用户名，用以在你的个人页面展示你的开源项目。</p>
                    </div>
                </div>

                <div class="control-group">
                    <!-- E-mail -->
                    <label class="control-label" for="twitter">Twitter用户名：</label>
                    <div class="controls">
                        <input type="text" id="twitter" name="twitter" placeholder="" class="input-xlarge" value="{% if user.twitter %}{{ user.twitter }}{% endif %}">
                        <p class="help-block">你的Twitter用户名，用以在你的个人页面展示你的Twitter地址。</p>
                    </div>
                </div>

                <div class="control-group">
                    <!-- E-mail -->
                    <label class="control-label" for="douban">豆瓣用户名：</label>
                    <div class="controls">
                        <input type="text" id="douban" name="douban" placeholder="" class="input-xlarge" value="{% if user.douban %}{{ user.douban }}{% endif %}">
                        <p class="help-block">你的豆瓣用户名，用以在你的个人页面展示你正在读的书。</p>
                    </div>
                </div>

                <div class="control-group">
                    <!-- E-mail -->
                    <label class="control-label" for="self_intro">个人简介：</label>
                    <div class="controls">
                        <textarea type="text" id="self_intro" name="self_intro" placeholder="" class="input-xlarge">{% if user.self_intro %}{{ user.self_intro }}{% endif %}</textarea>
                        <p class="help-block">可以稍微详细的介绍自己。</p>
                    </div>
                </div>

                <div class="control-group">
                    <!-- Button -->
                    <div class="controls">
                        <button class="btn btn-success">保存改动</button>
                        <a href="/setting/password/" class="ml10 btn">设置密码</a>
                    </div>
                </div>
            </fieldset>
            {% csrf_token %}
        </form>
    </div>
{% endblock %}

{% block sidebar %}
    <div class="sidenav container-box">
        <ul>
            <li class="current"><a href="/setting/">用户中心</a></li>
            <li><a href="/setting/avatar/">设置头像</a></li>
            <li><a href="/setting/password/">设置密码</a></li>
            <li><a href="/">返回首页</a></li>
        </ul>
    </div>
{% endblock %}
