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

{% block title %}Login - FamilyTouch{% endblock %}

{% block content %}
<div style="max-width:420px;margin:2rem auto;background:white;padding:2rem;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.06);">
    <h2>Login</h2>
    <form method="post">
        {% csrf_token %}
        <div style="margin-bottom:1rem;">
            <label for="role">Role:</label>
            <select id="role" name="role" style="width:100%;padding:0.5rem;margin-top:0.25rem;">
                <option value="clinician">Clinician</option>
                <option value="patient">Patient</option>
                <option value="family">Family Member</option>
            </select>
        </div>
        {{ form.as_p }}
        <div style="text-align:center;margin-top:1rem;">
            <button class="btn" type="submit">Sign in</button>
        </div>
        <div style="text-align:center;margin-top:1rem;">
            <a href="{% url 'familytouch:password_reset' %}" style="color:#667eea;text-decoration:underline;">Forgotten password?</a>
        </div>
    </form>
</div>
{% endblock %}