{% extends "base.html" %}
{% block content %}
<div class="container d-flex align-items-center justify-content-center" style="min-height: 80vh;">
  <div class="row w-100 justify-content-center">
    <div class="col-lg-5 col-md-7 col-sm-9">
      <!-- Glassmorphic Login Card -->
      <div class="card shadow-lg border-0 rounded-4" style="background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(20px);">
        <div class="card-body p-5">
          
          <!-- ✅ Logo -->
          <div class="text-center mb-4">
            <div class="d-inline-flex align-items-center justify-content-center bg-primary-subtle text-primary rounded-circle mb-3 shadow" style="width: 80px; height: 80px;">
              <i class="bi bi-heart-pulse-fill" style="font-size: 2.5rem;"></i>
            </div>
            <h3 class="fw-bold mb-1" style="color: var(--primary);">Welcome Back</h3>
            <p class="text-muted small">Please sign in to your account</p>
          </div>

          <!-- ✅ 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 rounded-3 py-2 px-3 small" role="alert">
                  {{ message }}
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="padding-top: 10px;"></button>
                </div>
              {% endfor %}
            {% endif %}
          {% endwith %}

          <!-- ✅ Login Form -->
          <form method="POST" action="{{ url_for('login') }}">
            
            <div class="form-floating mb-3">
              <input type="text" name="username" class="form-control" id="floatingInput" placeholder="Username" required>
              <label for="floatingInput" class="text-muted"><i class="bi bi-person me-2"></i>Username</label>
            </div>

            <div class="form-floating mb-3">
              <input type="password" name="password" class="form-control" id="floatingPassword" placeholder="Password" required>
              <label for="floatingPassword" class="text-muted"><i class="bi bi-lock me-2"></i>Password</label>
            </div>

            <div class="form-floating mb-4">
              <select name="role" class="form-select" id="floatingRole" required>
                <option value="" disabled selected>Select access level</option>
                <option value="admin">Administrator</option>
                <option value="doctor">Medical Staff (Doctor)</option>
                <option value="patient">Patient</option>
              </select>
              <label for="floatingRole" class="text-muted"><i class="bi bi-shield-check me-2"></i>Role</label>
            </div>

            <button type="submit" class="btn btn-primary w-100 py-3 fw-bold rounded-3 shadow">
              Secure Login <i class="bi bi-arrow-right ms-2"></i>
            </button>
            
          </form>

          <!-- ✅ Help Section / Register -->
          <div class="text-center mt-4 pt-3 border-top">
            <p class="text-muted small mb-2">
              New patient? Ensure to get registered here <br>
              <a href="{{ url_for('register') }}" class="btn btn-sm btn-outline-success mt-2 fw-semibold rounded-pill px-4">Create Patient Account</a>
            </p>
            <p class="text-muted small mb-0">
              Having trouble logging in? <a href="#" class="text-decoration-none fw-semibold" style="color: var(--primary-accent);">Contact IT Support</a>
            </p>
          </div>

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