{{template "base.html" .}}
{{define "title"}}Sign in - Homelab{{end}}
{{define "content"}}
<div class="animate-fade-in animate-slide-up w-full max-w-sm mx-4">
  <div class="relative rounded-xl p-8 backdrop-blur-xl bg-white/5 border border-white/10 shadow-2xl">
    <div class="absolute inset-0 rounded-xl bg-gradient-to-br from-primary-600/10 to-transparent pointer-events-none"></div>
    <div class="relative">
      <div class="flex items-center gap-3 mb-8">
        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center text-sm font-bold shadow-lg shadow-primary-600/30">H</div>
        <h1 class="text-lg font-semibold text-text-100">Sign in</h1>
      </div>
      <form method="post" action="/login" class="space-y-5">
        <div>
          <label for="email" class="block text-sm text-text-400 mb-1.5 font-medium">Email</label>
          <input type="email" id="email" name="email" required autofocus
            class="w-full px-3.5 py-2.5 rounded-lg bg-white/5 border border-white/10 text-text-100 placeholder:text-text-400/50 text-sm transition-all duration-200 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500/30 focus:bg-white/[0.07]"
            placeholder="you@example.com">
        </div>
        <div>
          <label for="password" class="block text-sm text-text-400 mb-1.5 font-medium">Password</label>
          <input type="password" id="password" name="password" required
            class="w-full px-3.5 py-2.5 rounded-lg bg-white/5 border border-white/10 text-text-100 placeholder:text-text-400/50 text-sm transition-all duration-200 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500/30 focus:bg-white/[0.07]"
            placeholder="your password">
        </div>
        <button type="submit"
          class="relative w-full py-2.5 rounded-lg bg-gradient-to-r from-primary-600 to-primary-500 text-white text-sm font-medium cursor-pointer transition-all duration-200 hover:from-primary-500 hover:to-primary-400 hover:shadow-lg hover:shadow-primary-600/30 active:scale-[0.98]">
          Sign in
        </button>
        {{if .Error}}<div class="text-error-400 text-sm text-center bg-error-400/10 py-2 px-3 rounded-lg">{{.Error}}</div>{{end}}
      </form>
      <div class="relative mt-6 text-center">
        <p class="text-xs text-text-400">
          <a href="/register" class="text-primary-400 hover:text-primary-300 underline">Register with invite code</a>
        </p>
      </div>
    </div>
  </div>
</div>
{{end}}