{% extends "base.html" %}
{% block content %}
<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-5">
      <div class="card shadow-lg p-4 border-0 rounded-4 bg-white">
        
        <!-- ✅ Logo -->
        <div class="text-center mb-3">
          <img src="{{ url_for('static', filename='images/hospital_logo.jpg') }}" 
               alt="Hospital Logo" width="80" height="80" class="rounded-circle shadow-sm">
        </div>

        <!-- ✅ Title -->
        <h3 class="text-center mb-3 text-primary fw-bold">Hospital Management System</h3>
        <h5 class="text-center mb-4">Login Portal</h5>

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

        <!-- ✅ Login Form -->
        <form method="POST" action="{{ url_for('login') }}">
          <div class="mb-3">
            <label class="form-label fw-semibold">Username</label>
            <input type="text" name="username" class="form-control" placeholder="Enter your username" required>
          </div>

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

          <div class="mb-3">
            <label class="form-label fw-semibold">Select Role</label>
            <select name="role" class="form-select" required>
              <option value="" disabled selected>Choose your role</option>
              <option value="admin">Admin</option>
              <option value="doctor">Doctor</option>
              <option value="patient">Patient</option>
            </select>
          </div>

          <button type="submit" class="btn btn-primary w-100 fw-bold">
            <i class="bi bi-box-arrow-in-right me-1"></i> Login
          </button>
        </form>

        <!-- ✅ Optional Help -->
        <p class="text-center text-muted mt-3 mb-0" style="font-size: 0.9rem;">
          Having trouble logging in? <a href="#" class="text-decoration-none fw-semibold text-primary">Contact the administrator</a>.
        </p>

      </div>
    </div>
  </div>
</div>
{% endblock %}