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

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

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">New Clinician</h1>
        <p class="page-subtitle">Add a new clinician to the system</p>
    </div>
    <a href="{{ redirect_url }}" class="btn btn-ghost">← Cancel</a>
</div>

<form method="POST" action="/clinicians/new" class="card">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="redirect_url" value="{{ redirect_url }}">
    
    <h3 class="mb-lg">Clinician Information</h3>
    
    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="first_name">First Name <span class="text-error">*</span></label>
            <input type="text" id="first_name" name="first_name" class="form-input" required maxlength="100">
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="last_name">Last Name <span class="text-error">*</span></label>
            <input type="text" id="last_name" name="last_name" class="form-input" required maxlength="100">
        </div>
    </div>

    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="credentials">Credentials</label>
            <input type="text" id="credentials" name="credentials" class="form-input" maxlength="100" placeholder="MD, DO, NP, PA, etc.">
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="specialty">Specialty</label>
            <input type="text" id="specialty" name="specialty" class="form-input" maxlength="100" placeholder="Cardiology, Oncology, etc.">
        </div>
    </div>

    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="npi">NPI (National Provider Identifier)</label>
            <input type="text" id="npi" name="npi" class="form-input" maxlength="50" placeholder="Optional">
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="site_id">Site{% if site_options|length > 1 %} <span class="text-error">*</span>{% endif %}</label>
            <select id="site_id" name="site_id" class="form-select" {% if site_options|length > 1 %}required{% endif %}>
                {% if site_options|length != 1 %}
                <option value="">-- Select Site --</option>
                {% endif %}
                {% for site in site_options %}
                <option value="{{ site.id }}" {% if selected_site_id == site.id %}selected{% endif %}>
                    {{ site.name }}{% if site.site_code %} ({{ site.site_code }}){% endif %}
                </option>
                {% endfor %}
            </select>
        </div>
    </div>

    <h3 class="mb-lg mt-lg">Contact Information</h3>

    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="email">Email</label>
            <input type="email" id="email" name="email" class="form-input" maxlength="255" placeholder="clinician@example.com">
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label" for="phone">Phone</label>
            <input type="tel" id="phone" name="phone" class="form-input" maxlength="50" placeholder="(555) 123-4567">
        </div>
    </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="{{ redirect_url }}" class="btn btn-ghost">Cancel</a>
        <button type="submit" class="btn btn-primary">Create Clinician</button>
    </div>
</form>
{% endblock %}