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

{% block title %}Test Kit {{ testkit.display_label }} - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">
            Test Kit: <code>{{ testkit.display_label }}</code>
        </h1>
        <p class="page-subtitle">Created {{ testkit.created_at | format_dt(user_preferences) if testkit.created_at else 'Unknown' }}</p>
    </div>
    <div class="flex gap-md">
        <a href="/testkits" class="btn btn-ghost">← Back to Test Kits</a>
    </div>
</div>

<div class="grid grid-2 gap-lg">
    <!-- Kit Information -->
    <div class="card">
        <h3 class="mb-md">Kit Information</h3>
        <dl class="detail-list">
            <div class="detail-row">
                <dt>Operational Label</dt>
                <dd><code>{{ testkit.display_label }}</code></dd>
            </div>
            <div class="detail-row">
                <dt>Barcode</dt>
                <dd><code>{{ testkit.kit_barcode or 'Not yet assigned' }}</code></dd>
            </div>
            <div class="detail-row">
                <dt>Type</dt>
                <dd>{{ revision.kit_type or '—' }}</dd>
            </div>
            <div class="detail-row">
                <dt>Status</dt>
                <dd>
                    <span class="badge badge-{{ 'success' if revision.status == 'CREATED' else 'secondary' }}">
                        {{ revision.status or 'CREATED' }}
                    </span>
                </dd>
            </div>
            <div class="detail-row">
                <dt>Expiration Date</dt>
                <dd>{{ revision.expiration_date.strftime('%Y-%m-%d') if revision.expiration_date else '—' }}</dd>
            </div>
            <div class="detail-row">
                <dt>Origin Site</dt>
                <dd>
                    {% if origin_site %}
                    {% if origin_site_detail_path %}
                    <a href="{{ origin_site_detail_path }}">{{ origin_site.name }}</a>
                    {% else %}
                    {{ origin_site.name }}
                    {% endif %}
                    {% else %}
                    —
                    {% endif %}
                </dd>
            </div>
        </dl>
    </div>

    <!-- System Information -->
    <div class="card">
        <h3 class="mb-md">System Information</h3>
        <dl class="detail-list">
            <div class="detail-row">
                <dt>EUID</dt>
                <dd class="text-mono text-sm"><a href="/tapdb/object/{{ testkit.euid }}">{{ testkit.euid }}</a></dd>
            </div>
            <div class="detail-row">
                <dt>Tenant ID</dt>
                <dd class="text-mono text-sm">{{ testkit.tenant_id }}</dd>
            </div>
            <div class="detail-row">
                <dt>Revision</dt>
                <dd>{{ revision.revision_no }}</dd>
            </div>
            <div class="detail-row">
                <dt>Created</dt>
                <dd>{{ testkit.created_at | format_dt(user_preferences) if testkit.created_at else '—' }}</dd>
            </div>
        </dl>
    </div>
</div>

<div class="card mt-lg">
    <div class="card-header">
        <h3 class="card-title">Linked TRFs</h3>
    </div>
    <div class="card-body">
        {% if linked_trfs %}
        <table class="table">
            <thead>
                <tr>
                    <th>TRF</th>
                    <th>Status</th>
                    <th>Linked</th>
                    {% if user.can_write and can_write_in_tenant %}<th></th>{% endif %}
                </tr>
            </thead>
            <tbody>
                {% for trf in linked_trfs %}
                <tr>
                    <td><a href="/trfs/{{ trf.number }}"><code>{{ trf.number }}</code></a></td>
                    <td>{{ trf.status or '—' }}</td>
                    <td>{{ trf.linked_at | format_dt(user_preferences) if trf.linked_at else '—' }}</td>
                    {% if user.can_write and can_write_in_tenant %}
                    <td style="text-align: right;">
                        <form method="POST" action="/testkits/{{ testkit.euid }}/unlink-trf" style="margin: 0;">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                            <input type="hidden" name="trf_euid" value="{{ trf.euid }}">
                            <button type="submit" class="btn btn-sm btn-danger">Unlink</button>
                        </form>
                    </td>
                    {% endif %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p class="text-muted">No TRFs are linked to this test kit yet.</p>
        {% endif %}

        {% if user.can_write and can_write_in_tenant %}
        <hr class="my-md">
        <form method="POST" action="/testkits/{{ testkit.euid }}/link-trf">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <div class="form-group">
                <label class="form-label" for="link-trf">Link TRF</label>
                <select id="link-trf" name="trf_euid" class="form-control" required>
                    <option value="">-- Select TRF --</option>
                    {% for trf in trf_options %}
                    <option value="{{ trf.id }}">{{ trf.number }}{% if trf.status %} ({{ trf.status|lower }}){% endif %}</option>
                    {% endfor %}
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Link TRF</button>
        </form>
        {% endif %}
    </div>
</div>

<div class="card mt-lg">
    <div class="card-header">
        <h3 class="card-title">Create Bloom Tube</h3>
    </div>
    <div class="card-body">
        <p class="text-sm text-muted mb-md">
            Create a Bloom tube from this kit. Patient is optional; if set, Atlas also creates a specimen linked to the patient and container.
        </p>
        {% if user.can_write and can_write_in_tenant %}
        <form method="POST" action="/testkits/{{ testkit.euid }}/create-bloom-tube">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <div class="form-group">
                <label class="form-label" for="tube-test">Test *</label>
                <select id="tube-test" name="test_euid" class="form-control" required>
                    <option value="">-- Select Test --</option>
                    {% for test in test_options %}
                    <option value="{{ test.id }}">{{ test.label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label class="form-label" for="tube-patient">Patient (optional)</label>
                <select id="tube-patient" name="patient_euid" class="form-control">
                    <option value="">-- Tube only (no specimen) --</option>
                    {% for patient in available_patients %}
                    <option value="{{ patient.id }}">{{ patient.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label class="form-label" for="tube-origin-site">Origin Site (optional)</label>
                <select id="tube-origin-site" name="origin_site_id" class="form-control">
                    <option value="">Use kit/site defaults</option>
                    {% for site in site_options %}
                    <option value="{{ site.id }}" {% if selected_origin_site_id and selected_origin_site_id == site.id %}selected{% endif %}>
                        {{ site.name }}{% if site.site_code %} ({{ site.site_code }}){% endif %}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Create Bloom Tube</button>
        </form>
        {% else %}
        <p class="text-muted">You do not have write access for this test kit tenant.</p>
        {% endif %}
    </div>
</div>

{% include "partials/tube_panel.html" %}
{% endblock %}