{# templates/adminpanel/login.html #}
{% load static %}
<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Admin Login | {{ SITE_NAME }}</title>

  <!-- Bootstrap (LTR) + fallback -->
  <link id="bs-css" rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
  <script>
  window.addEventListener('load',function(){
    const el=document.getElementById('bs-css');let bad=false;
    try{bad=!el||!el.sheet||!el.sheet.cssRules||el.sheet.cssRules.length===0}catch(e){bad=true}
    if(bad){const l=document.createElement('link');l.rel='stylesheet';l.href='{% static "vendor/bootstrap.min.css" %}';document.head.appendChild(l)}
  });
  </script>

  <!-- Admin theme -->
  <link rel="stylesheet" href="{% static 'adminpanel/admin.css' %}">
</head>
<body class="admin-auth-wrap d-flex align-items-center justify-content-center">

  <div class="auth-brand text-center mb-3">
    <a href="/" class="btn btn-sm fw-bold text-dark bg-white border-0 px-3 rounded-3 shadow-sm">
      {{ SITE_NAME }}
    </a>
  </div>

  <div class="admin-auth-card card shadow-lg">
    <div class="card-body p-4">
      <h1 class="h5 mb-3 text-center fw-bold">Admin Login</h1>

      {% if messages %}
        {% for m in messages %}
          <div class="alert alert-{{ m.tags|default:'danger' }} mb-2">{{ m }}</div>
        {% endfor %}
      {% endif %}

      {% if form and form.non_field_errors %}
        <div class="alert alert-danger mb-2">
          {% for e in form.non_field_errors %}{{ e }}<br>{% endfor %}
        </div>
      {% endif %}

      <form method="post" novalidate>
        {% csrf_token %}
        {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}

        <div class="mb-3">
          <label class="form-label">Username</label>
          <input class="form-control" type="text" name="username" required autofocus placeholder="Username">
        </div>
        <div class="mb-2">
          <label class="form-label">Password</label>
          <input class="form-control" type="password" name="password" required placeholder="Password">
        </div>

        <div class="d-flex align-items-center justify-content-between mb-3">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="remember" name="remember">
            <label class="form-check-label" for="remember">Remember me</label>
          </div>
          <a class="small text-muted text-decoration-none" href="/accounts/password_reset/">Forgot password?</a>
        </div>

        <button class="btn btn-primary w-100 py-2">Sign in</button>
      </form>
    </div>
  </div>

  <!-- Bootstrap JS + fallback -->
  <script id="bs-js" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  <script>
  window.addEventListener('load',function(){
    if(!window.bootstrap){
      const s=document.createElement('script');
      s.src='{% static "vendor/bootstrap.bundle.min.js" %}';
      document.body.appendChild(s);
    }
  });
  </script>
</body>
</html>
