<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="{% static 'user/bulma.css' %}">
    <link rel="stylesheet" href="{% static 'user/style.css' %}">
    <script src="{% static 'user/js/all.min.js' %}"></script>
</head>
<body>
    <nav class="navbar has-shadow" role="navigation" aria-label="">
        <div class="container">
{#博客logo部分#}
            <div class="navbar-brand">
                <a class="navbar-item" href="">
                    <img src="{% static 'user/images/logo.png' %}" alt="logo" width="112" height="28">
                </a>
                <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </a>
            </div>
{#用户操作项部分#}
            <div id="navbarBasicExample" class="navbar-menu">
                <div class="navbar-end">
                    <div class="navbar-item">
                        <div class="dropdown is-hoverable">
                            <div class="dropdown-trigger">
                                <button class="button is-white">
                                   <figure class="image is-24x24">
                                       {% if user.userprofile.image %}
                                           <img class="is-rounded" src="/media/{{ user.userprofile.image }}" alt="">
                                       {% else %}
                                           <img class="is-rounded" src="{% static 'user/images/headportrait.jpg' %}" alt="">
                                       {% endif %}
                                   </figure>&nbsp;&nbsp;
                                        {% if user.userprofile.name %}
                                            <span class="has-text-grey-dark">{{ user.userprofile.name }}</span>
                                        {% else %}
                                            <span class="has-text-grey-dark">{{ user.username }}</span>
                                        {% endif %}
                                        <span class="is-small icon">
                                            <i class="fas fa-angle-down" aria-hidden="true"></i>
                                        </span>
                                </button>
                            </div>
                        <div class="dropdown-menu" id="dropdown-menu2" role="menu" >
                                <div class="dropdown-content is-shadowless">
                                    <div class="dropdown-item">
                                        <a class=" has-text-grey-dark" href="">
                                            <span class="icon is-small">
                                                <i class="fas fa-user-cog" aria-hidden="true"></i>
                                            </span>&nbsp;&nbsp;
                                           <a href="{% url 'user:editor' %}">账&nbsp;号&nbsp;设&nbsp;置</a>
                                        </a>
                                    </div>
                                    <hr class="dropdown-divider">
                                    <div class="dropdown-item">
                                        <a class=" has-text-grey-dark" href="{% url 'user:logout' %}">
                                            <span class="icon is-small">
                                                <i class="fas fa-power-off" aria-hidden="true"></i>
                                            </span>&nbsp;&nbsp;
                                            退&nbsp;出&nbsp;登&nbsp;录
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

{#信息内容展示部分#}
    <section class="section">
        <div class="container">
            <div class="columns">
{#左边目录#}
                <div class="column is-2">
{#左边目录的个人中心版块#}
                    <div class="card">
                        <header class="card-header">
                            <p class="card-header-title">个人中心</p>
                            <a href="" class="card-header-icon" aria-label="more options">
                                <span class="icon">
                                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                                </span>
                            </a>
                        </header>
                        <div class="card-content menu">
                            <ul class="content menu-list">
                                <li><a href="{% url 'user:center' %}">个人信息</a></li>
                                <!-- <li><a href="">修改密码</a></li> -->
                            </ul>
                        </div>
                    </div>
{#左边目录的内容管理版块#}
                    <div class="card">
                            <header class="card-header">
                                <p class="card-header-title">内容管理</p>
                                <a href="#" class="card-header-icon" aria-label="more options">
                                    <span class="icon">
                                        <i class="fas fa-angle-down" aria-hidden="true"></i>
                                    </span>
                                </a>
                            </header>
                            <div class="card-content menu">
                                <ul class="content menu-list">
                                    <li><a href="">添加文章</a></li>
                                    <li><a href="">已发布</a></li>
                                    <li><a href="">草稿箱</a></li>
                                    <li><a href="">评论管理</a></li>
                                    <li><a href="">数据分析</a></li>
                                </ul>
                            </div>
                    </div>
                </div>
{#具体内容显示#}
                <div class="column is-10">
                    <div class="box is-radiusless is-shadowless">
                        <div class="tabs">
                            <ul>
                              {% block title %}
                                  <li class="is-active"><a>账号信息</a></li>
                              {% endblock title %}
                            </ul>
                        </div>
                    {% block content %}
                        <div class="columns is-mobile" style="border-bottom: #ededed solid 1px; padding-bottom: 1rem">
                        <div class="column is-narrow">
                            <figure class="image is-96x96">
                                {% if user.userprofile.image %}
                                    <img class="is-rounded" src="/media/{{ user.userprofile.image }}">
                                {% else %}
                                    <img class="is-rounded" src=" {% static 'user/images/headportrait.jpg' %}">
                                {% endif %}
                            </figure>
                        </div>
                        <div class="column is-narrow">
                            <div style="padding-top: 1.5rem;">
                                {% if user.userprofile.name %}
                                    <h1 class="title is-size-4">{{ user.userprofile.name }}</h1>
                                    {% else %}
                                    <h1 class="title is-size-4">{{ user.username }}</h1>
                                {% endif %}

                                {% if user.userprofile.gexing %}
                                    <p class="subtitle is-size-6">{{ user.userprofile.gexing }}</p>
                                {% else %}
                                    <p class="subtitle is-size-6">暂未设置个性签名</p>
                                {% endif %}
                            </div>
                        </div>
                        <div class="column is-narrow-mobile">
                            <a class=" button is-light is-pulled-right" href="{% url 'user:editor' %}" style="margin-top: 1.8rem">修改信息</a>
                        </div>
                    </div>

                    <div class="columns" style="padding: 1rem 0; ">
                        <div class="column is-2">
                            <p>个人信息</p>
                        </div>
                        <div class="column">
                            <div class="columns is-mobile" style="border-bottom: #ededed solid 1px">
                                <div class="column is-2">
                                   <span class=" has-text-grey-light">昵称</span>
                                </div>
                                    <div class="column is-narrow">
                                        {% if user.userprofile.name %}
                                            <span class=" has-text-black-ter">{{ user.userprofile.name }}</span>
                                        {% else %}
                                            <span class=" has-text-black-ter">暂未设置用户昵称</span>
                                        {% endif %}
                                    </div>
                                <!-- <div class="column has-text-right">
                                    <a href="">更改类型</a>
                                </div> -->

                            </div>
                            <div class="columns is-mobile" style="border-bottom: #ededed solid 1px">
                                <div class="column is-2">
                                   <span class=" has-text-grey-light">性别</span>
                                </div>
                                <div class="column is-narrow">
                                    {% if user.userprofile %}
                                        <span class=" has-text-black-ter">{{ user.userprofile.get_gender_display }}</span>
                                    {% else %}
                                        <span class=" has-text-black-ter">暂未设置性别</span>
                                    {% endif %}
                                </div>

                            </div>
                            <div class="columns is-mobile" style="border-bottom: #ededed solid 1px">
                                <div class="column is-2">
                                   <span class=" has-text-grey-light">邮箱</span>
                                </div>
                                <div class="column is-narrow">
                                    <span class=" has-text-black-ter">{{ user.email }}</span>
                                </div>

                            </div>

                            <div class="columns is-mobile" style="border-bottom: #ededed solid 1px">
                                <div class="column is-2">
                                   <span class=" has-text-grey-light">生日</span>
                                </div>
                                <div class="column is-narrow">
                                    {% if user.userprofile %}
                                        <span class=" has-text-black-ter">{{ user.userprofile.birthday }}</span>
                                    {% else %}
                                        <span class=" has-text-black-ter">暂未设置出生年月</span>
                                    {% endif %}

                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="columns" style="padding: 1rem 0; ">
                        <div class="column is-2">
                            <p>个人简介</p>
                        </div>
                        <div class="column">
                            <div class="content">
                                {% if user.userprofile.info %}
                                    {{ user.userprofile.info }}
                                {% else %}
                                    暂未设置
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endblock content %}
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>