div(hx-target="this" hx-swap="outerHTML")
    div(class="relative")
        label.block.text-sm.font-medium.text-gray-700.mb-2(for="username") 用户名
        input(type="text" id="username" value=value name="username" placeholder="请输入用户名" hx-indicator="#ind" hx-post="/login/validate/username" hx-trigger="blur delay:500ms" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 ease-in-out" + (error ? ' border-red-500 focus:ring-red-500' : ''))
        div(id="ind" class="htmx-indicator absolute right-3 top-9 transform -translate-y-1/2")
            div(class="animate-spin h-5 w-5 border-2 border-gray-300 border-t-blue-500 rounded-full")
    if error 
        div(class="error-message text-red-500 text-sm mt-2 flex items-center")
            svg.w-4.h-4.mr-1(xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor")
                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z")
            | #{error}