extends /layouts/empty.pug

block pageHead
  //- style.
  //-   body {
  //-     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  //-     min-height: 100vh;
  //-   }

block pageContent
  .h-full.flex.items-center.justify-end.px-4.bg-red-400(class="sm:px-6 lg:px-8")
    .max-w-md.w-full.space-y-8
      .bg-white.py-8.px-4.shadow-xl.rounded-2xl(class="sm:px-10")
        .text-center.mb-8
          h2.text-3xl.font-bold.text-gray-900 欢迎回来
          p.text-gray-600.mt-2 请登录您的账户
        form.space-y-6(hx-post="/login")
          include _ui/username.pug
          include _ui/password.pug
          .flex.items-center.justify-between
            .flex.items-center
              input#remember-me.h-4.w-4.text-blue-600.border-gray-300.rounded(type="checkbox" class="focus:ring-blue-500")
              label.ml-2.block.text-sm.text-gray-900(for="remember-me") 记住我
            .text-sm
              a.font-medium.text-blue-600(href="#" class="hover:text-blue-500") 忘记密码？
          div
            button.group.relative.w-full.flex.justify-center.py-3.px-4.border.border-transparent.text-sm.font-medium.rounded-md.text-white.bg-blue-600(type="submit" class="hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out")
              span.absolute.left-0.inset-y-0.flex.items-center.pl-3
                //- svg.h-5.w-5.text-blue-500(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="group-hover:text-blue-400")
                //-   path(fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd")
              span 登录
          .text-center
            p.text-sm.text-gray-600
              | 还没有账户？ 
              a.font-medium.text-blue-600(href="/register" class="hover:text-blue-500") 立即注册

block pageScripts
  script.
    document.addEventListener('htmx:error', function(evt) {
      if(evt.detail.elt instanceof HTMLElement) {
        if(evt.detail.elt.tagName === 'FORM' && evt.detail.xhr) {
          window.alert(evt.detail.xhr.response || '请求失败')
        }
      }
    });