{% extends "base.html" %}
{% block title %}Login{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-md-4">
    <h2 class="text-center my-3">Login</h2>

    <!-- Notification -->
    <div id="notification"></div>

    <form method="POST">
      <div class="mb-3">
        <label>Username</label>
        <input type="text" name="username" class="form-control" required>
      </div>
      <div class="mb-3">
        <label>Password</label>
        <input type="password" name="password" class="form-control" required>
      </div>
      <button type="submit" class="btn btn-primary w-100">Login</button>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function showNotification(message, type="success") {
  const notif = document.getElementById("notification");
  notif.innerText = message;
  notif.className = type;
  notif.style.display = "block";
  setTimeout(() => { notif.style.display = "none"; }, 3000);
}

window.onload = function() {
  {% if message %}
    showNotification("{{ message }}", "{{ msg_type or 'success' }}");
  {% endif %}
}
</script>
{% endblock %}