<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Login — BizTrack</title>
  {% load static %}
<link rel="stylesheet" href="{% static 'css/main.css' %}"/>
</head>
<body class="bg-base-200 min-h-screen flex items-center justify-center">

  <div class="card bg-base-100 shadow-xl w-full max-w-sm">
    <div class="card-body">

      <!-- Header -->
      <div class="text-center mb-4">
        <div class="text-3xl font-bold text-primary">BizTrack</div>
        <div class="text-base-content/50 text-sm mt-1">Sign in to your account</div>
      </div>

      <!-- Messages -->
      {% for message in messages %}
        <div class="alert {% if message.tags == 'error' %}alert-error{% else %}alert-info{% endif %} mb-3 text-sm py-2">
          {{ message }}
        </div>
      {% endfor %}

      <!-- Form -->
      <form method="post">
        {% csrf_token %}

        <div class="form-control mb-3">
          <label class="label">
            <span class="label-text">Username</span>
          </label>
          <input
            type="text"
            name="username"
            value="{{ form.username.value|default:'' }}"
            class="input input-bordered w-full {% if form.username.errors %}input-error{% endif %}"
            autofocus
            autocomplete="username"
          />
          {% for error in form.username.errors %}
            <span class="text-error text-xs mt-1">{{ error }}</span>
          {% endfor %}
        </div>

        <div class="form-control mb-6">
          <label class="label">
            <span class="label-text">Password</span>
          </label>
          <input
            type="password"
            name="password"
            class="input input-bordered w-full {% if form.password.errors %}input-error{% endif %}"
            autocomplete="current-password"
          />
          {% for error in form.password.errors %}
            <span class="text-error text-xs mt-1">{{ error }}</span>
          {% endfor %}
        </div>

        <button type="submit" class="btn btn-primary w-full">Login</button>

      </form>
    </div>
  </div>

</body>
</html>