{% extends "main.html" %}

{% block header %}
<title>{{ title }}</title>
<link rel="stylesheet" href="/md/static/md/css/md.css">
{% endblock %}

{% block content %}
<body class="mdui-appbar-with-toolbar">

<div class="mdui-drawer mdui-drawer-close" id="drawer">
    <ul class="mdui-list">
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">library_books</i>
            <div class="mdui-list-item-content"><a href="/md/books">我的书架</a></div>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">directions_run</i>
            <div class="mdui-list-item-content"><a href="/md/similar_user">书友推荐</a></div>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">book</i>
            <div class="mdui-list-item-content"><a href="/md/bookmarks">我的书签</a></div>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">favorite</i>
            <div class="mdui-list-item-content"><a href="/md/book_list">我的书单</a></div>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">notifications</i>
            <div class="mdui-list-item-content"><a href="/md/noti_book">新书提醒</a></div>
        </li>
        <li class="mdui-subheader">设置</li>
        <li class="mdui-list-item mdui-ripple mdui-list-item-active">
            <i class="mdui-list-item-icon mdui-icon material-icons">settings</i>
            <div class="mdui-list-item-content"><a href="/md/setting">个人设置</a></div>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">security</i>
            <div class="mdui-list-item-content">修改密码</div>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">feedback</i>
            <div class="mdui-list-item-content">我要反馈</div>
        </li>
    </ul>
</div>

{% include "toolbar.html" %}

<div class="mdui-container-fluid">
    <div class="mdui-panel mdui-panel-fluid" mdui-panel>
        <div class="mdui-panel-item">
            <div class="mdui-panel-item-header">
                <div class="mdui-panel-item-title">用户名</div>
                <div class="mdui-panel-item-summary mdui-text-color-black-text">{{user}}</div>
                <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
            </div>
            <div class="mdui-panel-item-body">
                <p class="mdui-text-color-black-icon">用户名无法更改</p>
            </div>
        </div>
        <div class="mdui-panel-item">
            <div class="mdui-panel-item-header">
                <div class="mdui-panel-item-title">邮箱</div>
                <div class="mdui-panel-item-summary mdui-text-color-black-text">{{email}}</div>
                <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
            </div>
            <div class="mdui-panel-item-body">
                <div class="mdui-textfield mdui-textfield-floating-label">
                    <label class="mdui-textfield-label">请输入新邮箱</label>
                    <input class="mdui-textfield-input" type="email"/>
                </div>
                <div class="mdui-panel-item-actions">
                    <button class="mdui-btn mdui-ripple">cancel</button>
                    <button class="mdui-btn mdui-ripple">save</button>
                </div>
            </div>
        </div>
        <div class="mdui-panel-item">
            <div class="mdui-panel-item-header">
                <div class="mdui-panel-item-title">修改密码</div>
                <div class="mdui-panel-item-summary mdui-text-color-black-text">*******</div>
                <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
            </div>
            <div class="mdui-panel-item-body">
                <div class="mdui-textfield mdui-textfield-floating-label">
                    <label class="mdui-textfield-label">请输入原密码</label>
                    <input class="mdui-textfield-input" type="password"/>
                    <label class="mdui-textfield-label">请输入新密码</label>
                    <input class="mdui-textfield-input" type="password"/>
                    <label class="mdui-textfield-label">请再次输入新密码</label>
                    <input class="mdui-textfield-input" type="password"/>
                </div>
                <div class="mdui-panel-item-actions">
                    <button class="mdui-btn mdui-ripple">cancel</button>
                    <button class="mdui-btn mdui-ripple">save</button>
                </div>
            </div>
        </div>
        <div class="mdui-panel-item">
            <div class="mdui-panel-item-header">
                <div class="mdui-panel-item-title">注册时间</div>
                <div class="mdui-panel-item-summary mdui-text-color-black-text">{{register_time}}</div>
                <i class="mdui-icon material-icons">access_time</i></div>
        </div>
    </div>
</div>
{% endblock %}
{% block script %}
<script src="/md/static/md/js/index.js"></script>
{% endblock %}