{% extends "base.html" %}

{% block title %}角色管理 - 图书管理系统{% endblock %}

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

{% block content %}
<div class="roles-container">
    <!-- 页面标题 -->
    <div class="page-header">
        <h1>角色管理</h1>
        <div class="actions">
            <button class="btn btn-primary" id="addRoleBtn">
                <i class="fas fa-plus"></i> 添加角色
            </button>
        </div>
    </div>

    <!-- 角色列表卡片 -->
    <div class="role-list">
        {% for role in roles %}
        <div class="role-card" data-id="{{ role.id }}">
            <div class="role-header">
                <h3 class="role-name">{{ role.role_name }}</h3>
                <div class="role-actions">
                    <button class="btn btn-sm btn-edit-role" title="编辑角色">
                        <i class="fas fa-edit"></i>
                    </button>
                    {% if role.id not in [1, 2] %}
                    <button class="btn btn-sm btn-delete-role" title="删除角色">
                        <i class="fas fa-trash"></i>
                    </button>
                    {% endif %}
                </div>
            </div>
            <div class="role-description">
                {% if role.description %}
                {{ role.description }}
                {% else %}
                <span class="text-muted">暂无描述</span>
                {% endif %}
            </div>
            <div class="role-stats">
                <div class="stat-item">
                    <i class="fas fa-users"></i> <span id="userCount-{{ role.id }}">--</span> 用户
                </div>
                {% if role.id == 1 %}
                <div class="role-badge admin">管理员</div>
                {% elif role.id == 2 %}
                <div class="role-badge user">普通用户</div>
                {% else %}
                <div class="role-badge custom">自定义</div>
                {% endif %}
            </div>
        </div>
        {% else %}
        <div class="no-data-message">
            <i class="fas fa-users-slash"></i>
            <p>暂无角色数据</p>
        </div>
        {% endfor %}
    </div>

    <!-- 权限描述 -->
    <div class="permissions-info">
        <h3>角色权限说明</h3>
        <div class="card">
            <div class="card-body">
                <table class="table permission-table">
                    <thead>
                        <tr>
                            <th>功能模块</th>
                            <th>管理员</th>
                            <th>普通用户</th>
                            <th>自定义角色</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>图书浏览</td>
                            <td><i class="fas fa-check text-success"></i></td>
                            <td><i class="fas fa-check text-success"></i></td>
                            <td><i class="fas fa-check text-success"></i></td>
                        </tr>
                        <tr>
                            <td>借阅图书</td>
                            <td><i class="fas fa-check text-success"></i></td>
                            <td><i class="fas fa-check text-success"></i></td>
                            <td><i class="fas fa-check text-success"></i></td>
                        </tr>
                        <tr>
                            <td>图书管理</td>
                            <td><i class="fas fa-check text-success"></i></td>
                            <td><i class="fas fa-times text-danger"></i></td>
                            <td>可配置</td>
                        </tr>
                        <tr>
                            <td>用户管理</td>
                            <td><i class="fas fa-check text-success"></i></td>
                            <td><i class="fas fa-times text-danger"></i></td>
                            <td>可配置</td>
                        </tr>
                        <tr>
                            <td>借阅管理</td>
                            <td><i class="fas fa-check text-success"></i></td>
                            <td><i class="fas fa-times text-danger"></i></td>
                            <td>可配置</td>
                        </tr>
                        <tr>
                            <td>库存管理</td>
                            <td><i class="fas fa-check text-success"></i></td>
                            <td><i class="fas fa-times text-danger"></i></td>
                            <td>可配置</td>
                        </tr>
                        <tr>
                            <td>统计分析</td>
                            <td><i class="fas fa-check text-success"></i></td>
                            <td><i class="fas fa-times text-danger"></i></td>
                            <td>可配置</td>
                        </tr>
                        <tr>
                            <td>系统设置</td>
                            <td><i class="fas fa-check text-success"></i></td>
                            <td><i class="fas fa-times text-danger"></i></td>
                            <td>可配置</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 角色编辑模态框 -->
<div class="modal fade" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="roleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="roleModalLabel">添加角色</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="roleForm">
                    <input type="hidden" id="roleId" value="">

                    <div class="form-group">
                        <label for="roleName">角色名称</label>
                        <input type="text" class="form-control" id="roleName" required>
                    </div>

                    <div class="form-group">
                        <label for="roleDescription">角色描述</label>
                        <textarea class="form-control" id="roleDescription" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveRoleBtn">保存</button>
            </div>
        </div>
    </div>
</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">
                您确定要删除这个角色吗？此操作不可逆。
                <p class="text-danger mt-3">注意：删除角色将会影响所有使用此角色的用户。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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