{% extends "base.html" %}

{% block title %}Query Profile{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <h2 class="text-center">Query User Profile</h2>

        <!-- Flash messages -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        
        <form id="queryForm" class="needs-validation" novalidate method="POST" action="/admin/queryprofile">
            {{ form.hidden_tag() }}
            <div class="form-group">
                <label for="username">Username</label>
                {{ form.username(class="form-control", placeholder="Enter the username to query", id="username", maxlength="20", pattern="^[a-zA-Z][a-zA-Z0-9_]{0,19}$") }}
                <div class="invalid-feedback">
                    Username must start with a letter and can only contain letters, numbers, and underscores (max 20 characters).
                </div>
            </div>
            <button type="submit" class="btn btn-primary btn-block">Query</button>
        </form>

        {% if user_info %}
        <div class="card mt-4 border-custom">
            <div class="card-body">
                <h4 class="card-title">{{ user_info.name }}</h4>
                <p class="card-text"><strong>Username:</strong> {{ user_info.username }}</p>
                <p class="card-text"><strong>Email:</strong> {{ user_info.email }}</p>
                <p class="card-text"><strong>Privilege:</strong> {{ user_info.privilege }}</p>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<script>
    // JavaScript for form validation
    document.addEventListener('DOMContentLoaded', function() {
        const queryForm = document.getElementById('queryForm');
        queryForm.addEventListener('submit', function(event) {
            if (!queryForm.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            queryForm.classList.add('was-validated');
        });

        // Real-time validation for username
        const usernameInput = document.getElementById('username');
        usernameInput.addEventListener('input', function() {
            if (usernameInput.checkValidity()) {
                usernameInput.classList.remove('is-invalid');
                usernameInput.classList.add('is-valid');
            } else {
                usernameInput.classList.remove('is-valid');
                usernameInput.classList.add('is-invalid');
            }
        });
    });
</script>

<style>
    .border-custom {
        border: 2px solid #007bff; /* 蓝色边框 */
        border-radius: 15px; /* 圆角边框 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    }
    .card-body {
        padding: 20px;
    }
</style>

{% endblock %}