{% extends 'base.html' %}
{% block content %}
  <section class="card registration-card">
    <div class="card-header">
      <i class="fas fa-user-plus"></i>
      <h2>Register for AI Doctor Consultation</h2>
      <p class="subtitle">Enter your information to get personalized doctor recommendations</p>
    </div>
    
    <form action="/register" method="post" class="registration-form">
      <div class="form-group">
        <label><i class="fas fa-user"></i> Name</label>
        <input name="name" required placeholder="Your full name">
      </div>
      
      <div class="form-group">
        <label><i class="fas fa-envelope"></i> Email</label>
        <input name="email" type="email" required placeholder="Your email address">
      </div>
      
      <div class="form-group">
        <label><i class="fas fa-lock"></i> Password</label>
        <input name="password" type="password" required placeholder="Choose a password">
      </div>
      
      <div class="form-group">
        <label><i class="fas fa-lock"></i> Confirm Password</label>
        <input name="confirm_password" type="password" required placeholder="Confirm your password">
      </div>
      
      <div class="form-row">
        <div class="form-group half">
          <label><i class="fas fa-birthday-cake"></i> Age</label>
          <input name="age" type="number" placeholder="Your age">
        </div>
        
        <div class="form-group half">
          <label><i class="fas fa-venus-mars"></i> Gender</label>
          <select name="gender">
            <option value="">Prefer not to say</option>
            <option>Female</option>
            <option>Male</option>
            <option>Other</option>
          </select>
        </div>
      </div>
      
      <div class="form-group">
        <label><i class="fas fa-map-marker-alt"></i> Location</label>
        <select name="location" required>
          <option value="">Select your city</option>
          <option value="Karachi">Karachi</option>
          <option value="Lahore">Lahore</option>
          <option value="Islamabad">Islamabad</option>
          <option value="Other">Other</option>
        </select>
      </div>
      
      <div class="form-footer">
        <button type="submit" class="btn-primary">
          <i class="fas fa-paper-plane"></i> Save & Start Chat
        </button>
      </div>
    </form>
    
    <div class="form-links">
      <p>Already have an account? <a href="/login">Login here</a></p>
    </div>
    
    <div class="info-box">
      <i class="fas fa-shield-alt"></i>
      <p>Your information is secure and will only be used to provide personalized doctor recommendations.</p>
    </div>
  </section>
{% endblock %}