{% extends 'familytouch/base.html' %}

{% block title %}Doctor Sign Up - FamilyTouch{% endblock %}

{% block extra_css %}
<style>
    .signup-card { max-width: 520px; margin: 2rem auto; background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); }
    .form-row { margin-bottom: 1rem; }
    label { display:block; margin-bottom: .5rem; color: #333; }
    input[type="text"], input[type="password"], input[type="email"] { width: 100%; padding: .75rem; border: 1px solid #ddd; border-radius: 6px; }
    .submit-row { text-align: center; margin-top: 1.25rem; }
</style>
{% endblock %}

{% block content %}
<div class="signup-card">
    <h2 style="margin-bottom: .5rem;">Register as a Healthcare Provider</h2>
    <p style="color:#666; margin-bottom:1rem;">Create an account to manage patients and communicate securely.</p>

    <form method="post" novalidate>
        {% csrf_token %}
        {{ form.non_field_errors }}
        {{ form.as_p }}
        <div class="submit-row">
            <button type="submit" class="btn">Create Account</button>
        </div>
    </form>
</div>
{% endblock %}