{% extends "base.html" %}
{% set active_nav = "trfs" %}

{% block title %}New User - LSMC Hub{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Invite User</h1>
        <p class="page-subtitle">Invite a new user for {{ clinician.full_name }}'s organization</p>
    </div>
    <a href="/clinicians/{{ clinician.id }}" class="btn btn-ghost">← Cancel</a>
</div>

<form method="POST" action="/clinicians/{{ clinician.id }}/users/new" class="card">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    
    <h3 class="mb-lg">User Information</h3>
    
    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="name">Full Name</label>
            <input type="text" id="name" name="name" class="form-input" maxlength="255" placeholder="John Smith">
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="email">Email <span class="text-error">*</span></label>
            <input type="email" id="email" name="email" class="form-input" required maxlength="255" placeholder="user@example.com">
        </div>
    </div>

    <h3 class="mb-lg mt-lg">Roles</h3>
    <p class="text-muted text-sm mb-md">Select one or more roles for this user:</p>

    <div class="form-group mb-lg">
        {% for role in available_roles %}
        <label class="flex items-center gap-sm mb-sm" style="cursor: pointer;">
            <input type="checkbox" name="roles" value="{{ role }}" 
                   {% if role == 'EXTERNAL_USER' %}checked{% endif %}>
            <span class="font-medium">{{ role }}</span>
            {% if role == 'EXTERNAL_USER' %}
            <span class="text-muted text-sm">- Default for clinic/collaborator users</span>
            {% elif role == 'READ_ONLY' %}
            <span class="text-muted text-sm">- View-only access within organization</span>
            {% elif role == 'INTERNAL_USER' %}
            <span class="text-muted text-sm">- LSMC internal staff</span>
            {% elif role == 'ADMIN' %}
            <span class="text-muted text-sm">- Full administrative access</span>
            {% endif %}
        </label>
        {% endfor %}
    </div>

    <div class="flex gap-md justify-between mt-lg" style="border-top: 1px solid var(--border-color); padding-top: var(--space-lg);">
        <a href="/clinicians/{{ clinician.id }}" class="btn btn-ghost">Cancel</a>
        <button type="submit" class="btn btn-primary">Invite User</button>
    </div>
</form>
{% endblock %}