{% extends 'base.html' %}
{% block title %}个人资料{% endblock %}

{% block breadcrumb %}
<ol class="breadcrumb mb-0">
  <li class="breadcrumb-item active">个人资料</li>
</ol>
{% endblock %}

{% block content %}
<div class="row g-4">
  <div class="col-md-4">
    <div class="card shadow-sm text-center p-4">
      <div class="avatar-circle avatar-lg mx-auto mb-3">
        {{ current_user.username[0].upper() }}
      </div>
      <h5>{{ current_user.username }}</h5>
      <p class="text-muted small">{{ current_user.email }}</p>
      <span class="badge bg-{{ 'danger' if current_user.is_admin else 'secondary' }} mb-3">
        {{ '管理员' if current_user.is_admin else '普通用户' }}
      </span>
      <a href="{{ url_for('auth.change_password') }}" class="btn btn-outline-primary btn-sm">
        <i class="bi bi-key me-1"></i>修改密码
      </a>
    </div>
  </div>
  <div class="col-md-8">
    <div class="card shadow-sm h-100">
      <div class="card-header"><h6 class="mb-0">资源统计</h6></div>
      <div class="card-body">
        <div class="row g-3 text-center">
          <div class="col-6 col-sm-3">
            <div class="fs-1 fw-bold text-primary">{{ total }}</div>
            <div class="text-muted small">全部</div>
          </div>
          {% for t, label, color in [('text','文本','secondary'),('image','图片','success'),
                                      ('audio','音频','warning'),('video','视频','danger')] %}
          <div class="col-6 col-sm-3">
            <div class="fs-1 fw-bold text-{{ color }}">{{ by_type[t] }}</div>
            <div class="text-muted small">{{ label }}</div>
          </div>
          {% endfor %}
        </div>
        <hr>
        <div class="row g-2 text-muted small">
          <div class="col-6">
            <i class="bi bi-calendar me-1"></i>注册时间：
            {{ current_user.created_at | datetime_fmt }}
          </div>
          <div class="col-6">
            <i class="bi bi-clock me-1"></i>最后登录：
            {{ current_user.last_login | datetime_fmt if current_user.last_login else '首次登录' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}