{% extends "base.html" %}
{% block content %}
<div class="container d-flex align-items-center justify-content-center py-5" style="min-height: 80vh;">
  <div class="row w-100 justify-content-center">
    <div class="col-lg-6 col-md-8 col-sm-10">
      <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">
          
          <div class="text-center mb-4">
            <div class="d-inline-flex align-items-center justify-content-center bg-success-subtle text-success rounded-circle mb-3 shadow" style="width: 80px; height: 80px;">
              <i class="bi bi-person-plus-fill" style="font-size: 2.5rem;"></i>
            </div>
            <h3 class="fw-bold mb-1" style="color: var(--primary);">Patient Registration</h3>
            <p class="text-muted small">Create your portal access</p>
          </div>

          {% 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 %}

          <form method="POST" action="{{ url_for('register') }}">
            <div class="row">
               <div class="col-md-6 form-floating mb-3">
                 <input type="text" name="name" class="form-control" id="regName" placeholder="Full Name" required>
                 <label for="regName" class="text-muted ms-2"><i class="bi bi-person-badge me-2"></i>Full Name</label>
               </div>
               <div class="col-md-6 form-floating mb-3">
                 <input type="number" name="age" class="form-control" id="regAge" placeholder="Age" required min="1" max="150">
                 <label for="regAge" class="text-muted ms-2"><i class="bi bi-calendar3 me-2"></i>Age</label>
               </div>
            </div>
            <div class="row">
               <div class="col-md-6 form-floating mb-3">
                 <select name="gender" class="form-select" id="regGender" required>
                    <option value="" disabled selected>Select Gender</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                    <option value="Other">Other</option>
                 </select>
                 <label for="regGender" class="text-muted ms-2"><i class="bi bi-gender-ambiguous me-2"></i>Gender</label>
               </div>
               <div class="col-md-6 form-floating mb-3">
                 <input type="text" name="contact_no" class="form-control" id="regContact" placeholder="Contact" required>
                 <label for="regContact" class="text-muted ms-2"><i class="bi bi-telephone me-2"></i>Contact No.</label>
               </div>
            </div>
            <div class="form-floating mb-3">
              <input type="text" name="disease" class="form-control" id="regDisease" placeholder="Primary Concern">
              <label for="regDisease" class="text-muted"><i class="bi bi-bandaid me-2"></i>Primary Concern / Disease</label>
            </div>
            
            <hr class="my-4">
            
            <div class="form-floating mb-3">
              <input type="text" name="username" class="form-control" id="regUser" placeholder="Username" required>
              <label for="regUser" class="text-muted"><i class="bi bi-person me-2"></i>Choose Username</label>
            </div>

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

            <button type="submit" class="btn btn-success w-100 py-3 fw-bold rounded-3 shadow">
              Create Account <i class="bi bi-check-circle ms-2"></i>
            </button>
            
          </form>

          <div class="text-center mt-4 pt-3 border-top">
            <p class="text-muted small mb-0">
              Already have an account? <br>
              <a href="{{ url_for('login') }}" class="text-decoration-none fw-semibold" style="color: var(--primary-accent);">Back to Login</a>
            </p>
          </div>

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