{% extends "base.html" %}

{% block title %}HappyWedding{% endblock %}

{% block content %}
  <section class="mb-5 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
    <div class="flex items-center gap-2">
      <h2 class="page-title">账号管理</h2>
      <span class="status-badge status-badge-muted">{{ accounts|length }} 个</span>
    </div>
    <div class="flex flex-wrap items-center gap-2">
      <span class="summary-metric">启用 {{ accounts | selectattr('status', 'equalto', 'active') | list | length }}</span>
      <span class="summary-metric">停用 {{ accounts | selectattr('status', 'equalto', 'disabled') | list | length }}</span>
      <a href="{{ url_for('admin.create_account') }}" class="btn btn-primary shrink-0">新增账号</a>
    </div>
  </section>

  <section class="table-container shadow-soft">
    <div class="overflow-x-auto">
      <table class="min-w-full text-left text-sm">
        <thead class="table-header">
          <tr>
            <th class="px-4 py-3">账号名</th>
            <th class="px-4 py-3">显示名</th>
            <th class="px-4 py-3">角色</th>
            <th class="px-4 py-3">状态</th>
            <th class="px-4 py-3">最近登录</th>
            <th class="px-4 py-3">操作</th>
          </tr>
        </thead>
        <tbody>
          {% for account in accounts %}
            <tr class="table-row">
              <td class="px-4 py-3 font-medium text-neutral-800 dark:text-neutral-100">{{ account.username }}</td>
              <td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">{{ account.display_name or '-' }}</td>
              <td class="px-4 py-3">
                <span class="status-badge status-badge-muted">{{ account.role }}</span>
              </td>
              <td class="px-4 py-3">
                {% if account.status == 'active' %}
                  <span class="status-badge bg-green-50 text-green-700 dark:bg-green-950/50 dark:text-green-300">启用</span>
                {% else %}
                  <span class="status-badge status-badge-muted">停用</span>
                {% endif %}
              </td>
              <td class="px-4 py-3 text-neutral-500 dark:text-neutral-400">{{ account.last_login_at.strftime('%Y-%m-%d %H:%M') if account.last_login_at else '-' }}</td>
              <td class="px-4 py-3">
                <div class="flex flex-wrap gap-2">
                  <a class="btn btn-secondary btn-sm" href="{{ url_for('admin.edit_account', account_id=account.id) }}">编辑</a>
                  <a class="btn btn-secondary btn-sm" href="{{ url_for('admin.reset_account_password', account_id=account.id) }}">重置密码</a>
                  <form action="{{ url_for('admin.toggle_account_status', account_id=account.id) }}" method="post" class="inline">
                    <button type="submit" class="btn btn-secondary btn-sm">{{ '停用' if account.status == 'active' else '启用' }}</button>
                  </form>
                </div>
              </td>
            </tr>
          {% else %}
            <tr>
              <td colspan="6" class="empty-state">暂无账号</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>
{% endblock %}