{% extends "base.html" %}

{% block title %}用户管理 - 图书管理系统{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/user-list.css') }}">
{% endblock %}

{% block content %}
<div class="user-list-container">
    <!-- 页面标题 -->
    <div class="page-header">
        <h1>用户管理</h1>
        <div class="actions">
            <a href="{{ url_for('user.add_user') }}" class="btn btn-primary">
                <i class="fas fa-user-plus"></i> 添加用户
            </a>
        </div>
    </div>

    <!-- 搜索和过滤区域 -->
    <div class="search-filter-container">
        <form method="GET" action="{{ url_for('user.user_list') }}" class="search-filter-form">
            <div class="form-row">
                <div class="search-box">
                    <input type="text" name="search" value="{{ search }}" placeholder="搜索用户名/邮箱/昵称/手机" class="form-control">
                    <button type="submit" class="btn btn-search">
                        <i class="fas fa-search"></i>
                    </button>
                </div>

                <div class="filter-box">
                    <select name="status" class="form-control">
                        <option value="">所有状态</option>
                        <option value="1" {% if status == 1 %}selected{% endif %}>正常</option>
                        <option value="0" {% if status == 0 %}selected{% endif %}>禁用</option>
                    </select>

                    <select name="role_id" class="form-control">
                        <option value="">所有角色</option>
                        {% for role in roles %}
                        <option value="{{ role.id }}" {% if role_id == role.id %}selected{% endif %}>{{ role.role_name }}</option>
                        {% endfor %}
                    </select>

                    <button type="submit" class="btn btn-filter">筛选</button>
                    <a href="{{ url_for('user.user_list') }}" class="btn btn-reset">重置</a>
                </div>
            </div>
        </form>
    </div>

    <!-- 用户列表表格 -->
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>昵称</th>
                    <th>邮箱</th>
                    <th>手机号</th>
                    <th>角色</th>
                    <th>状态</th>
                    <th>注册时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for user in pagination.items %}
                <tr>
                    <td>{{ user.id }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.nickname or '-' }}</td>
                    <td>{{ user.email or '-' }}</td>
                    <td>{{ user.phone or '-' }}</td>
                    <td>
                        {% for role in roles %}
                            {% if role.id == user.role_id %}
                                {{ role.role_name }}
                            {% endif %}
                        {% endfor %}
                    </td>
                    <td>
                        <span class="status-badge {% if user.status == 1 %}active{% else %}inactive{% endif %}">
                            {{ '正常' if user.status == 1 else '禁用' }}
                        </span>
                    </td>
                    <td>{{ user.created_at }}</td>
                    <td class="actions">
                        <a href="{{ url_for('user.user_edit', user_id=user.id) }}" class="btn btn-sm btn-info" title="编辑">
                            <i class="fas fa-edit"></i>
                        </a>

                        {% if user.id != session.get('user_id') %}
                            {% if user.status == 1 %}
                            <button class="btn btn-sm btn-warning toggle-status" data-id="{{ user.id }}" data-status="0" title="禁用">
                                <i class="fas fa-ban"></i>
                            </button>
                            {% else %}
                            <button class="btn btn-sm btn-success toggle-status" data-id="{{ user.id }}" data-status="1" title="启用">
                                <i class="fas fa-check"></i>
                            </button>
                            {% endif %}

                            <button class="btn btn-sm btn-danger delete-user" data-id="{{ user.id }}" title="删除">
                                <i class="fas fa-trash"></i>
                            </button>
                        {% else %}
                            <span class="text-muted">(当前用户)</span>
                        {% endif %}
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="9" class="text-center">暂无用户数据</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- 分页控件 -->
    {% if pagination.pages > 1 %}
    <div class="pagination-container">
        <ul class="pagination">
            {% if pagination.has_prev %}
            <li class="page-item">
                <a class="page-link" href="{{ url_for('user.user_list', page=pagination.prev_num, search=search, status=status, role_id=role_id) }}">
                    <i class="fas fa-chevron-left"></i>
                </a>
            </li>
            {% endif %}

            {% for page in pagination.iter_pages(left_edge=2, left_current=2, right_current=3, right_edge=2) %}
                {% if page %}
                    {% if page == pagination.page %}
                    <li class="page-item active">
                        <span class="page-link">{{ page }}</span>
                    </li>
                    {% else %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('user.user_list', page=page, search=search, status=status, role_id=role_id) }}">{{ page }}</a>
                    </li>
                    {% endif %}
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                {% endif %}
            {% endfor %}

            {% if pagination.has_next %}
            <li class="page-item">
                <a class="page-link" href="{{ url_for('user.user_list', page=pagination.next_num, search=search, status=status, role_id=role_id) }}">
                    <i class="fas fa-chevron-right"></i>
                </a>
            </li>
            {% endif %}
        </ul>
    </div>
    {% endif %}
</div>

<!-- 确认删除模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                您确定要删除这个用户吗？此操作不可逆。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">确认删除</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/user-list.js') }}"></script>
{% endblock %}