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

{% block title %}TRFs - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">TRFs</h1>
        <p class="page-subtitle">Manage test requisition forms (TRFs)</p>
    </div>
    {% if user.can_write %}
    <a href="/trfs/new" class="btn btn-primary">+ New TRF</a>
    {% endif %}
</div>

<div class="card">
    <div class="card-header">
        <div class="flex gap-md items-center">
            <select class="form-select" style="width: auto;" onchange="filterTrfs(this.value)">
                <option value="">All Statuses</option>
                <option value="DRAFT" {% if status_filter == 'DRAFT' %}selected{% endif %}>Draft</option>
                <option value="SUBMITTED" {% if status_filter == 'SUBMITTED' %}selected{% endif %}>Submitted</option>
                <option value="ACTIVE" {% if status_filter == 'ACTIVE' %}selected{% endif %}>Active</option>
                <option value="COMPLETED_REPORT_READY" {% if status_filter == 'COMPLETED_REPORT_READY' %}selected{% endif %}>Completed</option>
                <option value="RELEASED" {% if status_filter == 'RELEASED' %}selected{% endif %}>Released</option>
            </select>
            <input type="search" class="form-input" style="width: 300px;" placeholder="Search TRFs..." id="trfSearch">
        </div>
        <span class="text-muted text-sm">{{ orders|length }} TRFs</span>
    </div>
    
    {% if orders %}
    <div class="table-container">
        <table class="table">
            <thead>
                <tr>
                    <th>TRF EUID</th>
                    <th>Patients</th>
                    <th>Clinician</th>
                    <th>Tests</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="ordersTableBody">
                {% for order in orders %}
                <tr>
                    <td>
                        <a href="/trfs/{{ order.id }}" class="text-mono">{{ order.order_number }}</a>
                    </td>
                    <td>{{ order.patient_name or "—" }}</td>
                    <td>{{ order.clinician_name or "—" }}</td>
                    <td>{{ order.test_order_count }} test{{ 's' if order.test_order_count != 1 }}</td>
                    <td>
                        <span class="status-pill status-{{ order.status|lower|replace('_', '-') }}">
                            {{ order.status|replace('_', ' ') }}
                        </span>
                    </td>
                    <td class="text-muted text-sm">{{ order.created_at | format_dt(user_preferences) }}</td>
                    <td>
                        <a href="/trfs/{{ order.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 TRFs found</p>
        {% if user.can_write %}
        <a href="/trfs/new" class="btn btn-primary mt-md">Create TRF</a>
        {% endif %}
    </div>
    {% endif %}
</div>

<script>
function filterTrfs(status) {
    const url = new URL(window.location);
    if (status) {
        url.searchParams.set('status', status);
    } else {
        url.searchParams.delete('status');
    }
    window.location = url;
}
</script>
{% endblock %}