{% extends "base.html" %}

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

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

{% block content %}
<div class="user-form-container">
    <div class="page-header">
        <h1>添加用户</h1>
        <div class="actions">
            <a href="{{ url_for('user.user_list') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回用户列表
            </a>
        </div>
    </div>

    <div class="form-card">
        <form id="addUserForm" method="POST" action="{{ url_for('user.add_user') }}">
            {% if error %}
            <div class="alert alert-danger">{{ error }}</div>
            {% endif %}

            <div class="form-group required">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" class="form-control" required
                       placeholder="请输入用户名（3-20个字符）" minlength="3" maxlength="20">
                <small class="form-text text-muted">用户名将用于登录，不可重复</small>
            </div>

            <div class="form-group required">
                <label for="password">密码</label>
                <div class="password-field">
                    <input type="password" id="password" name="password" class="form-control" required
                           placeholder="请输入密码（至少6位）" minlength="6">
                    <button type="button" class="toggle-password">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                <small class="form-text text-muted">密码至少包含6个字符</small>
            </div>

            <div class="form-group required">
                <label for="confirm_password">确认密码</label>
                <div class="password-field">
                    <input type="password" id="confirm_password" name="confirm_password" class="form-control" required
                           placeholder="请再次输入密码" minlength="6">
                    <button type="button" class="toggle-password">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                <small id="password-match-message" class="form-text"></small>
            </div>

            <div class="form-group required">
                <label for="email">电子邮箱</label>
                <div class="input-with-button">
                    <input type="email" id="email" name="email" class="form-control" required
                           placeholder="请输入有效的电子邮箱">
                    <button type="button" id="sendVerificationCode" class="btn btn-outline-primary">
                        发送验证码
                    </button>
                </div>
            </div>

            <div class="form-group required">
                <label for="verification_code">验证码</label>
                <input type="text" id="verification_code" name="verification_code" class="form-control" required
                       placeholder="请输入邮箱验证码" maxlength="6">
                <small class="form-text text-muted">请输入发送到邮箱的6位验证码</small>
            </div>

            <div class="form-group">
                <label for="nickname">昵称</label>
                <input type="text" id="nickname" name="nickname" class="form-control"
                       placeholder="请输入昵称（选填）" maxlength="64">
            </div>

            <div class="form-group">
                <label for="phone">手机号码</label>
                <input type="tel" id="phone" name="phone" class="form-control"
                       placeholder="请输入手机号码（选填）" maxlength="20">
            </div>

            <div class="form-group required">
                <label for="role_id">用户角色</label>
                <select id="role_id" name="role_id" class="form-control" required>
                    {% for role in roles %}
                    <option value="{{ role.id }}">{{ role.role_name }}</option>
                    {% endfor %}
                </select>
                <small class="form-text text-muted">默认为普通用户，请根据需要选择合适的角色</small>
            </div>

            <div class="form-group required">
                <label for="status">账号状态</label>
                <select id="status" name="status" class="form-control" required>
                    <option value="1" selected>正常</option>
                    <option value="0">禁用</option>
                </select>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> 保存用户
                </button>
                <button type="reset" class="btn btn-secondary">
                    <i class="fas fa-undo"></i> 重置表单
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

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