{% extends "base.html" %}
{% block title %}Sign Up — Task 1{% endblock %}

{% block content %}
<div class="card card-narrow">
  <h2>Create Account</h2>
  <p class="subtitle">Fill in your details to get started</p>

  <form method="POST" action="/signup" id="signup-form">
    <div class="form-group">
      <label for="name">Full Name</label>
      <input type="text" id="name" name="name" placeholder="John Doe" required>
    </div>

    <div class="form-row">
      <div class="form-group">
        <label for="age">Age</label>
        <input type="number" id="age" name="age" placeholder="25" min="1" max="150" required>
      </div>
      <div class="form-group">
        <label for="mobile_number">Mobile Number</label>
        <input type="tel" id="mobile_number" name="mobile_number" placeholder="9876543210" required>
      </div>
    </div>

    <div class="form-group">
      <label for="address">Address</label>
      <textarea id="address" name="address" placeholder="123 Main Street, City" required></textarea>
    </div>

    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" id="email" name="email" placeholder="you@example.com" required>
    </div>

    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" id="password" name="password" placeholder="••••••••" minlength="6" required>
    </div>

    <button type="submit" class="btn btn-primary" style="width:100%; margin-top:.5rem;">Sign Up</button>
  </form>

  <p class="form-footer">Already have an account? <a href="/login">Log in</a></p>
</div>
{% endblock %}