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

{% block title %}Test Kits - LSMC Hub{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Test Kits</h1>
        <p class="page-subtitle">Manage test kit inventory</p>
    </div>
    <div class="flex gap-md">
        <a href="/testkits/create" class="btn btn-primary">+ Create Test Kit</a>
    </div>
</div>

<!-- Filters -->
<div class="filters-bar mb-lg">
    <form method="get" action="/testkits" class="filter-form">
        <div class="filter-group">
            <label for="barcode">Barcode:</label>
            <input type="text" name="barcode" id="barcode" class="form-input" 
                   value="{{ filter.barcode or '' }}" placeholder="Search by barcode...">
        </div>
        <div class="filter-group">
            <label for="kit_type">Type:</label>
            <select name="kit_type" id="kit_type" onchange="this.form.submit()">
                <option value="">All Types</option>
                {% for kt in kit_types %}
                <option value="{{ kt }}" {% if filter.kit_type == kt %}selected{% endif %}>{{ kt }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="filter-group">
            <label for="status">Status:</label>
            <select name="status" id="status" onchange="this.form.submit()">
                <option value="">All</option>
                <option value="CREATED" {% if filter.status == 'CREATED' %}selected{% endif %}>Created</option>
                <option value="SHIPPED" {% if filter.status == 'SHIPPED' %}selected{% endif %}>Shipped</option>
                <option value="RECEIVED" {% if filter.status == 'RECEIVED' %}selected{% endif %}>Received</option>
            </select>
        </div>
        <button type="submit" class="btn btn-secondary">Search</button>
    </form>
</div>

<!-- Test Kits Table -->
<div class="card">
    <table class="data-table">
        <thead>
            <tr>
                <th>Label</th>
                <th>EUID</th>
                <th>Type</th>
                <th>Status</th>
                <th>Expiration</th>
                <th>Created</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if testkits %}
                {% for kit in testkits %}
                <tr>
                    <td>
                        <code>{{ kit.display_label }}</code>
                        {% if not kit.kit_barcode %}
                        <div class="text-xs text-muted">EUID fallback</div>
                        {% endif %}
                    </td>
                    <td><a class="text-mono text-sm" href="/tapdb/object/{{ kit.euid }}">{{ kit.euid }}</a></td>
                    <td>{{ kit.kit_type or '—' }}</td>
                    <td>
                        <span class="badge badge-{{ 'success' if kit.status == 'CREATED' else 'secondary' }}">
                            {{ kit.status or 'CREATED' }}
                        </span>
                    </td>
                    <td>{{ kit.expiration_date.strftime('%Y-%m-%d') if kit.expiration_date else '—' }}</td>
                    <td>{{ kit.created_at.strftime('%Y-%m-%d') if kit.created_at else '—' }}</td>
                    <td>
                        <a href="/testkits/{{ kit.euid }}" class="btn btn-sm btn-ghost">View</a>
                    </td>
                </tr>
                {% endfor %}
            {% else %}
                <tr>
                    <td colspan="7" class="text-center text-muted">No test kits found</td>
                </tr>
            {% endif %}
        </tbody>
    </table>
</div>

{% if total > limit %}
<div class="pagination mt-lg">
    <span class="text-muted">Showing {{ testkits|length }} of {{ total }} test kits</span>
</div>
{% endif %}
{% endblock %}