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

{% block title %}Patients - LSMC Hub{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Patients</h1>
        <p class="page-subtitle">View and manage patient records</p>
    </div>
    {% if user.can_write %}
    <a href="/patients/new?redirect=/patients" class="btn btn-primary">+ New Patient</a>
    {% endif %}
</div>

<div class="card">
    <div class="card-header">
        <form method="get" action="/patients" class="flex gap-md items-center">
            <input type="search" name="search" class="form-input" style="width: 300px;" 
                   placeholder="Search by name..." value="{{ search }}">
            <button type="submit" class="btn btn-secondary">Search</button>
            {% if search %}
            <a href="/patients" class="btn btn-ghost">Clear</a>
            {% endif %}
        </form>
        <span class="text-muted text-sm">{{ patients|length }} patients</span>
    </div>
    
    {% if patients %}
    <div class="table-container">
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>EUID</th>
                    <th>MRN</th>
                    <th>Date of Birth</th>
                    <th>Biologic Sex</th>
                    <th>Contact</th>
                    <th>Created</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for patient in patients %}
                <tr>
                    <td>
                        <a href="/patients/{{ patient.id }}" class="font-medium">
                            {{ patient.full_name }}
                        </a>
                    </td>
                    <td><a class="text-mono text-sm" href="/tapdb/object/{{ patient.id }}">{{ patient.id }}</a></td>
                    <td class="text-mono">{{ patient.mrn or "—" }}</td>
                    <td>{{ patient.date_of_birth or "—" }}</td>
                    <td>{% if patient.sex == 'F' %}Female{% elif patient.sex == 'M' %}Male{% elif patient.sex == 'O' or patient.sex == 'Other' %}Other{% elif patient.sex == 'U' or patient.sex == 'Unknown' %}Unknown{% else %}{{ patient.sex or "—" }}{% endif %}</td>
                    <td>
                        {% if patient.email %}
                        <span class="text-sm">{{ patient.email }}</span>
                        {% elif patient.phone %}
                        <span class="text-sm">{{ patient.phone }}</span>
                        {% else %}
                        —
                        {% endif %}
                    </td>
                    <td class="text-muted text-sm">{{ patient.created_at | format_dt(user_preferences) }}</td>
                    <td>
                        <a href="/patients/{{ patient.id }}" class="btn btn-sm btn-ghost">View</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-state-icon">👤</div>
        <p>No patients found</p>
        {% if search %}
        <p class="text-muted text-sm">Try a different search term</p>
        {% else %}
        {% if user.can_write %}
        <a href="/patients/new?redirect=/patients" class="btn btn-primary mt-md">Add Patient</a>
        {% endif %}
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}