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

{% block title %}Family Member 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;">Join as a Family Member</h2>
    <p style="color:#666; margin-bottom:1rem;">Create a FamilyTouch account to connect with your loved one's healthcare team.</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 %}