<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>RTube - Admin - Change Password</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                max-width: 500px;
                margin: 0 auto;
                padding: 20px;
                background-color: #1a1a1a;
                color: #fff;
            }
            h1 {
                margin-bottom: 10px;
            }
            .header {
                display: flex;
                align-items: center;
                gap: 20px;
                margin-bottom: 30px;
            }
            .back-link {
                color: #888;
                text-decoration: none;
                font-size: 14px;
            }
            .back-link:hover {
                color: #fff;
            }
            .form-container {
                background-color: #2a2a2a;
                padding: 30px;
                border-radius: 8px;
            }
            .form-group {
                margin-bottom: 20px;
            }
            .form-group label {
                display: block;
                margin-bottom: 8px;
                color: #aaa;
                font-size: 14px;
            }
            .form-group input {
                width: 100%;
                padding: 12px;
                border: 1px solid #444;
                border-radius: 4px;
                background-color: #333;
                color: #fff;
                font-size: 14px;
                box-sizing: border-box;
            }
            .form-group input:focus {
                outline: none;
                border-color: #4CAF50;
            }
            .btn-submit {
                width: 100%;
                padding: 12px;
                background-color: #4CAF50;
                color: white;
                border: none;
                border-radius: 4px;
                font-size: 14px;
                cursor: pointer;
                transition: background-color 0.2s;
            }
            .btn-submit:hover {
                background-color: #45a049;
            }
            .flash-messages {
                margin-bottom: 20px;
            }
            .flash-message {
                padding: 12px;
                border-radius: 4px;
                margin-bottom: 10px;
                font-size: 14px;
            }
            .flash-error {
                background-color: #5c1a1a;
                color: #ff6b6b;
                border: 1px solid #8B0000;
            }
            .flash-success {
                background-color: #1a3d1a;
                color: #81C784;
                border: 1px solid #2E7D32;
            }
            .password-requirements {
                margin-top: 20px;
                padding: 15px;
                background-color: #333;
                border-radius: 4px;
                font-size: 12px;
                color: #888;
            }
            .password-requirements h4 {
                margin: 0 0 10px 0;
                color: #aaa;
                font-size: 13px;
            }
            .password-requirements ul {
                margin: 0;
                padding-left: 20px;
            }
            .password-requirements li {
                margin-bottom: 5px;
            }
            footer {
                margin-top: 50px;
                padding-top: 20px;
                border-top: 1px solid #333;
                text-align: center;
                color: #666;
                font-size: 12px;
            }
        </style>
        <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">

</head>
    <body>
        <div class="header">
            <a href="{{ url_for('admin.users') }}" class="back-link">&larr; Back to Users</a>
            <h1>Change Password</h1>
        </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        <div class="flash-messages">
            {% for category, message in messages %}
            <div class="flash-message flash-{{ category }}">{{ message }}</div>
            {% endfor %}
        </div>
        {% endif %}
        {% endwith %}

        <div class="form-container">
            <form method="POST">
                <div class="form-group">
                    <label for="current_password">Current Password</label>
                    <input type="password" id="current_password" name="current_password" required autocomplete="current-password">
                </div>
                <div class="form-group">
                    <label for="new_password">New Password</label>
                    <input type="password" id="new_password" name="new_password" required autocomplete="new-password">
                </div>
                <div class="form-group">
                    <label for="confirm_password">Confirm New Password</label>
                    <input type="password" id="confirm_password" name="confirm_password" required autocomplete="new-password">
                </div>
                <button type="submit" class="btn-submit">Change Password</button>
            </form>

            <div class="password-requirements">
                <h4>Password Requirements</h4>
                <ul>
                    <li>Minimum 12 characters</li>
                    <li>At least one uppercase letter (A-Z)</li>
                    <li>At least one lowercase letter (a-z)</li>
                    <li>At least one digit (0-9)</li>
                    <li>At least one special character</li>
                    <li>No common patterns or sequences</li>
                </ul>
            </div>
        </div>

        <footer>RTube v{{ rtube_version }}</footer>
    </body>
</html>
