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

{% block title %}New Family - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">New Family</h1>
        <p class="page-subtitle">Create a family group for related patients</p>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="/families/new">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <div class="form-group">
                <label for="name">Family Name *</label>
                <input type="text" id="name" name="name" class="form-input" required placeholder="e.g., Smith Family">
            </div>
            <div class="form-group">
                <label for="notes">Notes</label>
                <textarea id="notes" name="notes" class="form-textarea" rows="4" placeholder="Optional notes..."></textarea>
            </div>
            <div class="form-group">
                <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 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>
                {% if not site_options %}
                <p class="form-hint text-error">No active sites are configured for this organization.</p>
                {% endif %}
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Create Family</button>
                <a href="/families" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}