<div class="setup-header">
    <div class="setup-icon">🔐</div>
    <h1 class="setup-title">创建管理员账户</h1>
    <p class="setup-subtitle">这是系统的首个管理员账户，安装后需要密码才能修改配置</p>
</div>

<form method="post" action="{% url 'setup_wizard:step' step='admin_password' %}" onsubmit="return validatePasswordMatch()">
    {% csrf_token %}
    
    <div class="form-group">
        <label for="username">用户名 *</label>
        <input type="text" 
               id="username" 
               name="username" 
               class="form-control" 
               required 
               pattern="[a-zA-Z][a-zA-Z0-9_-]{2,}"
               placeholder="3-150字符，字母开头"
               value="admin">
        <div class="hint">用于登录系统和管理后台</div>
    </div>

    <div class="form-group">
        <label for="email">邮箱（可选）</label>
        <input type="email" 
               id="email" 
               name="email" 
               class="form-control" 
               placeholder="admin@example.com">
        <div class="hint">用于接收系统通知和密码重置</div>
    </div>

    <div class="form-row">
        <div class="form-group">
            <label for="password">密码 *</label>
            <input type="password" 
                   id="password" 
                   name="password" 
                   class="form-control" 
                   required 
                   minlength="8"
                   placeholder="至少8位，含字母和数字">
        </div>
        <div class="form-group">
            <label for="confirm_password">确认密码 *</label>
            <input type="password" 
                   id="confirm_password" 
                   name="confirm_password" 
                   class="form-control" 
                   required 
                   minlength="8"
                   placeholder="再次输入密码">
        </div>
    </div>

    <div class="password-strength" id="strength-container" style="display: none;">
        <div class="strength-bar">
            <div class="strength-fill" id="strength-fill"></div>
        </div>
        <div class="strength-text" id="strength-text"></div>
    </div>

    <div class="alert alert-warning">
        <strong>重要提示</strong><br>
        请牢记此密码！安装完成后，修改配置需要输入此密码验证身份。
    </div>

    <div class="btn-group">
        <div></div>
        <div class="btn-group-right">
            <button type="submit" class="btn btn-primary">创建并继续 →</button>
        </div>
    </div>
</form>
