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

{% block title %}Tube {{ tube.container_euid }} - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Tube <code>{{ tube.container_euid }}</code></h1>
        <p class="page-subtitle">Bloom container managed through Atlas</p>
    </div>
    <div class="flex gap-md">
        <a href="/collection-events" class="btn btn-ghost">Collection Events</a>
    </div>
</div>

<div class="grid grid-cols-2 gap-lg">
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Tube State</h2>
        </div>
        <div class="card-body">
            <dl class="detail-list">
                <div class="detail-item">
                    <dt>Status</dt>
                    <dd>{{ tube.status }}</dd>
                </div>
                <div class="detail-item">
                    <dt>Test</dt>
                    <dd>{% if tube.test %}<a href="/trfs/tests/{{ tube.test.id }}">{{ tube.test.id }}</a>{% else %}—{% endif %}</dd>
                </div>
                <div class="detail-item">
                    <dt>Shipment</dt>
                    <dd>{% if tube.shipment %}<a href="/shipments/{{ tube.shipment.label }}">{{ tube.shipment.label }}</a>{% else %}—{% endif %}</dd>
                </div>
                <div class="detail-item">
                    <dt>Test Kit</dt>
                    <dd>{% if tube.testkit %}<a href="/testkits/{{ tube.testkit.id }}">{{ tube.testkit.label }}</a>{% else %}—{% endif %}</dd>
                </div>
                <div class="detail-item">
                    <dt>Tube Site</dt>
                    <dd>{% if tube.site %}{{ tube.site.label }}{% else %}—{% endif %}</dd>
                </div>
                <div class="detail-item">
                    <dt>Specimen</dt>
                    <dd>{% if tube.specimen %}<code>{{ tube.specimen.specimen_euid }}</code>{% else %}Empty{% endif %}</dd>
                </div>
            </dl>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Collection Event</h2>
        </div>
        <div class="card-body">
            {% if tube.collection_event %}
            <dl class="detail-list">
                <div class="detail-item">
                    <dt>Event</dt>
                    <dd><a href="/collection-events/{{ tube.collection_event.id }}">{{ tube.collection_event.id }}</a></dd>
                </div>
                <div class="detail-item">
                    <dt>Patient</dt>
                    <dd>{{ tube.collection_event.patient_name or tube.collection_event.patient_euid }}</dd>
                </div>
                <div class="detail-item">
                    <dt>Collection Site</dt>
                    <dd>{{ tube.collection_event.site_euid }}</dd>
                </div>
                <div class="detail-item">
                    <dt>Collected At</dt>
                    <dd>{{ tube.collection_event.collected_at or "—" }}</dd>
                </div>
                <div class="detail-item">
                    <dt>Collection Type</dt>
                    <dd>{{ tube.collection_event.collection_type or "—" }}</dd>
                </div>
                <div class="detail-item">
                    <dt>Collected By</dt>
                    <dd>{{ tube.collection_event.collected_by or "—" }}</dd>
                </div>
            </dl>
            <a href="/collection-events/{{ tube.collection_event.id }}/edit" class="btn btn-secondary">Edit Collection Event</a>
            {% else %}
            <p class="text-muted">This tube is still empty.</p>
            {% endif %}
        </div>
    </div>
</div>

{% if user.can_write %}
<div class="card mt-lg">
    <div class="card-header">
        <h2 class="card-title">Update Tube</h2>
    </div>
    <div class="card-body">
        <form method="POST" action="/tubes/{{ tube.container_euid }}/update">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <input type="hidden" name="return_to" value="/tubes/{{ tube.container_euid }}">
            <div class="grid grid-cols-2 gap-lg">
                <div class="form-group">
                    <label class="form-label" for="tube-status">Status</label>
                    <input id="tube-status" type="text" name="status" class="form-input" value="{{ tube.status }}">
                </div>
                <div class="form-group">
                    <label class="form-label" for="tube-test">Test</label>
                    <select id="tube-test" name="test_euid" class="form-control">
                        <option value="">-- None --</option>
                        {% for test in tube_test_options %}
                        <option value="{{ test.id }}" {% if tube.test and tube.test.id == test.id %}selected{% endif %}>{{ test.label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label" for="tube-shipment">Shipment</label>
                    <select id="tube-shipment" name="shipment_euid" class="form-control">
                        <option value="">-- None --</option>
                        {% for shipment in tube_shipment_options %}
                        <option value="{{ shipment.id }}" {% if tube.shipment and tube.shipment.id == shipment.id %}selected{% endif %}>{{ shipment.label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label" for="tube-testkit">Test Kit</label>
                    <select id="tube-testkit" name="testkit_euid" class="form-control">
                        <option value="">-- None --</option>
                        {% for testkit in tube_testkit_options %}
                        <option value="{{ testkit.id }}" {% if tube.testkit and tube.testkit.id == testkit.id %}selected{% endif %}>{{ testkit.label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label" for="tube-site">Tube Site</label>
                    <select id="tube-site" name="site_euid" class="form-control">
                        <option value="">-- None --</option>
                        {% for site in tube_site_options %}
                        <option value="{{ site.id }}" {% if tube.site and tube.site.id == site.id %}selected{% endif %}>{{ site.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Update Tube</button>
            </div>
        </form>
    </div>
</div>

{% if not tube.collection_event %}
<div class="card mt-lg">
    <div class="card-header">
        <h2 class="card-title">Fill Tube</h2>
    </div>
    <div class="card-body">
        <form method="POST" action="/tubes/{{ tube.container_euid }}/fill">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <input type="hidden" name="return_to" value="/tubes/{{ tube.container_euid }}">
            <input type="hidden" name="test_euid" value="{{ tube.test.id if tube.test else '' }}">
            <input type="hidden" name="shipment_euid" value="{{ tube.shipment.id if tube.shipment else '' }}">
            <input type="hidden" name="testkit_euid" value="{{ tube.testkit.id if tube.testkit else '' }}">
            <input type="hidden" name="site_euid" value="{{ tube.site.id if tube.site else '' }}">
            <div class="grid grid-cols-2 gap-lg">
                <div class="form-group">
                    <label class="form-label" for="fill-patient">Patient *</label>
                    <select id="fill-patient" name="patient_euid" class="form-control" required>
                        <option value="">-- Select Patient --</option>
                        {% for patient in tube_patient_options %}
                        <option value="{{ patient.id }}">{{ patient.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label" for="fill-site">Collection Site *</label>
                    <select id="fill-site" name="collection_site_euid" class="form-control" required>
                        <option value="">-- Select Site --</option>
                        {% for site in tube_site_options %}
                        <option value="{{ site.id }}">{{ site.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label" for="fill-collected-at">Collected At</label>
                    <input id="fill-collected-at" type="datetime-local" name="collected_at" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label" for="fill-collection-type">Collection Type</label>
                    <input id="fill-collection-type" type="text" name="collection_type" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label" for="fill-collected-by">Collected By</label>
                    <input id="fill-collected-by" type="text" name="collected_by" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label" for="fill-expected-mrn">Expected MRN</label>
                    <input id="fill-expected-mrn" type="text" name="expected_mrn" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label" for="fill-expected-dob">Expected DOB</label>
                    <input id="fill-expected-dob" type="text" name="expected_dob" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label" for="fill-expected-name">Expected Name</label>
                    <input id="fill-expected-name" type="text" name="expected_name" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label" for="fill-expected-label-text">Expected Label Text</label>
                    <input id="fill-expected-label-text" type="text" name="expected_label_text" class="form-input">
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Fill Tube</button>
            </div>
        </form>
    </div>
</div>
{% endif %}
{% endif %}

{% if collection_events %}
<div class="card mt-lg">
    <div class="card-header">
        <h2 class="card-title">Collection Event History</h2>
    </div>
    <div class="card-body">
        <ul>
            {% for event in collection_events %}
            <li><a href="/collection-events/{{ event.id }}">{{ event.id }}</a></li>
            {% endfor %}
        </ul>
    </div>
</div>
{% endif %}
{% endblock %}