{% extends "base.html" %}
{% block page_content %}
<div class="row justify-content-center">
  <div class="col-md-5">
    <div class="card mt-5">
      <div class="card-header bg-dark text-white">
        <h4 class="text-center">Register New User</h4>
      </div>
      {% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    {% 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"></button>
      </div>
    {% endfor %}
  {% endif %}
{% endwith %}
      <div class="card-body">
        <form method="POST">
          <div class="mb-3">
            <label for="username" class="form-label">Username</label>
            <input name="username" id="username" class="form-control" placeholder="Enter username" required>
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input name="email" id="email" type="email" class="form-control" placeholder="Enter email" required>
          </div>
          <div class="mb-3">
            <label for="role" class="form-label">Role</label>
            <select name="role" id="role" class="form-select" required>
              <option value="">-- Select Role --</option>
              <option value="Admin">Admin</option>
              <option value="HR">HR</option>
              <option value="Employee">Employee</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input name="password" id="password" type="password" class="form-control" placeholder="Enter password" required>
          </div>
          <button type="submit" class="btn btn-dark w-100">Register</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}