{% extends "users/center/base.html" %}
{% load static %}

{% block body_main %}
<div class="container mt-5">
    <div class="row">
        <!-- 左侧导航 -->
        <div class="col-md-3">
            <div class="card mb-4">
                <div class="card-body text-center">
                    <div class="ratio ratio-1x1" style="width:4rem">{% if profile.avatar %}<img src="{{ profile.avatar }}" alt="" class="rounded-circle">{% else %} <i class="bi bi-person-circle text-secondary" style="font-size:3rem"></i>   {% endif %}</div>
                    <h5 class="card-title">{{ user.get_full_name|default:user.username }}</h5>
                    <p class="text-muted mb-1">{{ profile.job_title|default:"暂无职位" }}</p>
                    <p class="text-muted">{{ profile.department|default:"暂无部门" }}</p>
                </div>
            </div>

            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action active">个人中心</a>
                <a href="#" class="list-group-item list-group-item-action">账号设置</a>
                <a href="#" class="list-group-item list-group-item-action">安全设置</a>
                <a href="{% url 'users:change_password' %}" class="list-group-item list-group-item-action">修改密码</a>
                <a href="#" class="list-group-item list-group-item-action">登录记录</a>
            </div>
        </div>

        <!-- 右侧内容 -->
        <div class="col-md-9">
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% block user_center_right %}
            <!-- 基础信息 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">基本信息</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>用户名:</strong> {{ user.username }}</p>
                            <p><strong>性别:</strong> {{ profile.get_gender_display|default:"未设置" }}</p>
                            <p><strong>出生日期:</strong> {{ profile.birth_date|date:"Y-m-d"|default:"未设置" }}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>注册时间:</strong> {{ user.date_joined|date:"Y-m-d H:i" }}</p>
                            <p><strong>最后登录:</strong> {{ user.last_login|date:"Y-m-d H:i" }}</p>
                            <p><strong>时区:</strong> {{ profile.timezone }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 联系信息 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">联系信息</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>手机号码:</strong> {{ profile.mobile_phone|default:"未设置" }}</p>
                            <p><strong>微信ID:</strong> {{ profile.wechat_id|default:"未设置" }}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>城市:</strong> {{ profile.address_city|default:"未设置" }}</p>
                            <p><strong>详细地址:</strong> {{ profile.address_street|default:"未设置" }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 职业信息 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">职业信息</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>入职日期:</strong> {{ profile.hire_date|date:"Y-m-d"|default:"未设置" }}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>职位:</strong> {{ profile.job_title|default:"未设置" }}</p>
                            <p><strong>部门:</strong> {{ profile.department|default:"未设置" }}</p>
                        </div>
                    </div>
                </div>
            </div>
        {% endblock %}
        </div>
    </div>
</div>
{% endblock %}
