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

{% block title %}Edit {{ patient.first_name }} {{ patient.last_name }} - LSMC Hub{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <nav class="breadcrumb">
            <a href="/patients">Patients</a>
            <span>/</span>
            <a href="/patients/{{ patient.id }}">{{ patient.first_name }} {{ patient.last_name }}</a>
            <span>/</span>
            <span>Edit</span>
        </nav>
        <h1 class="page-title">Edit Patient</h1>
        <p class="page-subtitle">Changes create a new revision (append-only)</p>
    </div>
</div>

<div class="card">
    <form method="post" action="/patients/{{ patient.id }}/edit">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        
        <div class="card-body">
            <h3 class="form-section-title">Patient Information</h3>
            
            <div class="form-grid">
                <div class="form-group">
                    <label class="form-label" for="first_name">First Name *</label>
                    <input type="text" id="first_name" name="first_name" class="form-input" 
                           value="{{ patient.first_name }}" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="middle_name">Middle Name</label>
                    <input type="text" id="middle_name" name="middle_name" class="form-input"
                           value="{{ patient.middle_name or '' }}">
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="last_name">Last Name *</label>
                    <input type="text" id="last_name" name="last_name" class="form-input" 
                           value="{{ patient.last_name }}" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="date_of_birth">Date of Birth *</label>
                    <input type="date" id="date_of_birth" name="date_of_birth" class="form-input" 
                           value="{{ patient.date_of_birth or '' }}" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="sex">Biologic Sex</label>
                    <select id="sex" name="sex" class="form-select">
                        <option value="">Select...</option>
                        <option value="F" {% if patient.sex == 'F' %}selected{% endif %}>Female</option>
                        <option value="M" {% if patient.sex == 'M' %}selected{% endif %}>Male</option>
                        <option value="O" {% if patient.sex == 'O' or patient.sex == 'Other' %}selected{% endif %}>Other</option>
                        <option value="U" {% if patient.sex == 'U' or patient.sex == 'Unknown' %}selected{% endif %}>Unknown</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="mrn">MRN</label>
                    <input type="text" id="mrn" name="mrn" class="form-input" 
                           value="{{ patient.mrn or '' }}">
                </div>

                <div class="form-group">
                    <label class="form-label" for="site_id">Site{% if site_options|length > 1 %} *{% 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...</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="form-section-title mt-lg">Contact Information</h3>
            
            <div class="form-grid">
                <div class="form-group">
                    <label class="form-label" for="email">Email</label>
                    <input type="email" id="email" name="email" class="form-input" 
                           value="{{ patient.email or '' }}">
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="phone">Phone</label>
                    <input type="tel" id="phone" name="phone" class="form-input" 
                           value="{{ patient.phone or '' }}">
                </div>
            </div>

            <h3 class="form-section-title mt-lg">Address</h3>
            
            <div class="form-grid">
                <div class="form-group col-span-2">
                    <label class="form-label" for="address_line1">Address Line 1</label>
                    <input type="text" id="address_line1" name="address_line1" class="form-input" 
                           value="{{ patient.address.address_line1 or '' }}">
                </div>
                
                <div class="form-group col-span-2">
                    <label class="form-label" for="address_line2">Address Line 2</label>
                    <input type="text" id="address_line2" name="address_line2" class="form-input" 
                           value="{{ patient.address.address_line2 or '' }}">
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="city">City</label>
                    <input type="text" id="city" name="city" class="form-input" 
                           value="{{ patient.address.city or '' }}">
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="state">State</label>
                    <input type="text" id="state" name="state" class="form-input" 
                           value="{{ patient.address.state or '' }}">
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="postal_code">Postal Code</label>
                    <input type="text" id="postal_code" name="postal_code" class="form-input" 
                           value="{{ patient.address.postal_code or '' }}">
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="country">Country</label>
                    <input type="text" id="country" name="country" class="form-input" 
                           value="{{ patient.address.country or 'US' }}">
                </div>
            </div>

            <h3 class="form-section-title mt-lg">Clinical Notes</h3>
            
            <div class="form-group">
                <textarea id="clinical_notes" name="clinical_notes" class="form-textarea" rows="4">{{ patient.clinical_notes or '' }}</textarea>
            </div>

            <h3 class="form-section-title mt-lg">Revision Note</h3>
            
            <div class="form-group">
                <label class="form-label" for="note">Note (optional)</label>
                <input type="text" id="note" name="note" class="form-input" 
                       placeholder="Reason for this update...">
                <p class="form-help">This note will be recorded in the revision history</p>
            </div>
        </div>
        
        <div class="card-footer flex justify-between">
            <a href="/patients/{{ patient.id }}" class="btn btn-ghost">Cancel</a>
            <button type="submit" class="btn btn-primary">Save Changes</button>
        </div>
    </form>
</div>
{% endblock %}