terra-view/templates/partials/modem_list.html

<!-- Modem List -->
{% if modems %}
<div class="overflow-x-auto">
    <table class="w-full">
        <thead class="bg-gray-50 dark:bg-slate-700 border-b border-gray-200 dark:border-gray-600">
            <tr>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Unit ID</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Status</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">IP Address</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Phone</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Paired Device</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Location</th>
                <th class="px-4 py-3 text-right text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
            {% for modem in modems %}
            <tr class="hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors">
                <td class="px-4 py-3 whitespace-nowrap">
                    <div class="flex items-center gap-2">
                        <a href="/unit/{{ modem.id }}" class="font-medium text-blue-600 dark:text-blue-400 hover:underline">
                            {{ modem.id }}
                        </a>
                        {% if modem.hardware_model %}
                        <span class="text-xs text-gray-500 dark:text-gray-400">({{ modem.hardware_model }})</span>
                        {% endif %}
                    </div>
                </td>
                <td class="px-4 py-3 whitespace-nowrap">
                    {% if modem.status == "retired" %}
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
                        Retired
                    </span>
                    {% elif modem.status == "benched" %}
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300">
                        Benched
                    </span>
                    {% elif modem.status == "in_use" %}
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
                        In Use
                    </span>
                    {% elif modem.status == "spare" %}
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                        Spare
                    </span>
                    {% else %}
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                        —
                    </span>
                    {% endif %}
                </td>
                <td class="px-4 py-3 whitespace-nowrap text-sm">
                    {% if modem.ip_address %}
                    <span class="font-mono text-gray-900 dark:text-gray-300">{{ modem.ip_address }}</span>
                    {% else %}
                    <span class="text-gray-400 dark:text-gray-600">—</span>
                    {% endif %}
                </td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">
                    {% if modem.phone_number %}
                    {{ modem.phone_number }}
                    {% else %}
                    <span class="text-gray-400 dark:text-gray-600">—</span>
                    {% endif %}
                </td>
                <td class="px-4 py-3 whitespace-nowrap text-sm">
                    {% if modem.paired_device %}
                    <a href="/unit/{{ modem.paired_device.id }}" class="text-blue-600 dark:text-blue-400 hover:underline">
                        {{ modem.paired_device.id }}
                        <span class="text-gray-500 dark:text-gray-400">({{ modem.paired_device.device_type }})</span>
                    </a>
                    {% else %}
                    <span class="text-gray-400 dark:text-gray-600">None</span>
                    {% endif %}
                </td>
                <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-300">
                    {% if modem.project_id %}
                    <span class="bg-gray-200 dark:bg-gray-700 px-1.5 py-0.5 rounded text-xs mr-1">{{ modem.project_id }}</span>
                    {% endif %}
                    {% if modem.location %}
                    <span class="truncate max-w-xs inline-block" title="{{ modem.location }}">{{ modem.location }}</span>
                    {% elif not modem.project_id %}
                    <span class="text-gray-400 dark:text-gray-600">—</span>
                    {% endif %}
                </td>
                <td class="px-4 py-3 whitespace-nowrap text-right text-sm">
                    <div class="flex items-center justify-end gap-2">
                        <button onclick="pingModem('{{ modem.id }}')"
                                id="ping-btn-{{ modem.id }}"
                                class="text-xs px-2 py-1 bg-blue-100 hover:bg-blue-200 text-blue-700 dark:bg-blue-900/30 dark:hover:bg-blue-900/50 dark:text-blue-300 rounded transition-colors">
                            Ping
                        </button>
                        <a href="/unit/{{ modem.id }}" class="text-blue-600 dark:text-blue-400 hover:underline">
                            View →
                        </a>
                    </div>
                    <!-- Ping Result (hidden by default) -->
                    <div id="ping-result-{{ modem.id }}" class="mt-1 text-xs hidden"></div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% if search %}
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
    Found {{ modems|length }} modem(s) matching "{{ search }}"
</div>
{% endif %}

{% else %}
<div class="text-center py-12 text-gray-500 dark:text-gray-400">
    <svg class="w-12 h-12 mx-auto mb-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"></path>
    </svg>
    <p>No modems found</p>
    {% if search %}
    <button onclick="document.getElementById('modem-search').value = ''; htmx.trigger('#modem-search', 'keyup');"
            class="mt-3 text-blue-600 dark:text-blue-400 hover:underline">
        Clear search
    </button>
    {% else %}
    <p class="text-sm mt-1">Add modems from the <a href="/roster" class="text-seismo-orange hover:underline">Fleet Roster</a></p>
    {% endif %}
</div>
{% endif %}