{% extends "base.html" %}

{% block main %}

<div class="container">
  <div class="row justify-content-center my-5" style="width: 100%;">
    <div class="col-md-6 mx-auto"> <!-- Centering the form -->
      <h2 class="text-center">Login</h2>

      <!-- Flash messages for feedback -->
      {% with messages = get_flashed_messages(with_categories=true) %} 
      {% if messages %}
      <div class="alert alert-dismissible fade show" role="alert">
        {% for category, message in messages %}
        <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
          {{ message }}
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endfor %}
      </div>
      {% endif %} 
      {% endwith %}

      <form id="loginForm" method="post" class="p-4 border rounded bg-light">
        <div class="mb-3">
          <label for="username" class="form-label">Username:</label>
          <input
            type="text"
            class="form-control"
            id="username"
            name="username"
            placeholder="Enter your username"
            required
          />
        </div>

        <div class="mb-3">
          <label for="password" class="form-label">Password:</label>
          <input
            type="password"
            class="form-control"
            id="password"
            name="password"
            placeholder="Enter your password"
            required
          />
        </div>

        <button type="submit" class="btn btn-primary w-100">Login</button>
      </form>
      <p class="mt-3 text-center">
        Don't have an account?
        <a href="{{ url_for('register') }}">Register here</a>
      </p>
    </div>
  </div>
</div>

<script src="{{ url_for('static', filename='js/login.js') }}"></script>

{% endblock main %}
