{#
Modem Search Results Partial
Rendered by /api/roster/search/modems endpoint for HTMX dropdown.

Variables:
- modems: List of modem dicts with id, ip_address, phone_number, note, deployed, display
- query: The search query string
- show_empty: Boolean - show "no results" message
#}

{% set picker_id = request.query_params.get('picker_id', '') %}

{% if modems %}
    {% for modem in modems %}
    <div class="px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer border-b border-gray-100 dark:border-gray-700 last:border-0 transition-colors"
         onclick="selectModem('{{ modem.id }}', '{{ modem.display|e }}', '{{ picker_id }}')">
        <div class="flex items-start justify-between gap-2">
            <div class="flex-1 min-w-0">
                <div class="font-medium text-gray-900 dark:text-white truncate">
                    <span class="text-seismo-orange font-semibold">{{ modem.id }}</span>
                    {% if modem.ip_address %}
                        <span class="text-gray-400 mx-1">-</span>
                        <span class="text-gray-600 dark:text-gray-400 font-mono text-sm">{{ modem.ip_address }}</span>
                    {% endif %}
                </div>
                {% if modem.note %}
                    <div class="text-sm text-gray-500 dark:text-gray-400 truncate">
                        {{ modem.note }}
                    </div>
                {% endif %}
            </div>
            <div class="flex items-center gap-2">
                {% if not modem.deployed %}
                    <span class="flex-shrink-0 text-xs px-2 py-0.5 bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300 rounded">
                        Benched
                    </span>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
{% endif %}

{% if show_empty %}
    <div class="px-4 py-6 text-center text-gray-500 dark:text-gray-400">
        <svg class="w-8 h-8 mx-auto mb-2 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
        <p class="text-sm">No modems found matching "{{ query }}"</p>
    </div>
{% endif %}

{% if not modems and not show_empty %}
    <div class="px-4 py-6 text-center text-gray-500 dark:text-gray-400">
        <svg class="w-8 h-8 mx-auto mb-2 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
        <p class="text-sm">Start typing to search modems...</p>
        <p class="text-xs mt-1">Search by modem ID, IP address, or note</p>
    </div>
{% endif %}