<tr>
    <td>
        <div class="info-icon-container">
            <i 
            class="fa-solid fa-circle-info info-icon" 
            onclick="parent.openDeviceDetail('{{ device.ip }}')" 
            ></i>
        </div>
    </td>
    <td class="ip">
        <div>{{ device.ip }}</div>
        {% if device.hostname %} 
            <span class="alt no-wrap">{{device.hostname}}</span>
        {% endif %}
    </td>
    <td class="mac">
        <div>{{ device.mac_addr or 'Unknown' }}</div>
        {% if device.manufacturer %} 
            <span class="alt no-wrap">{{device.manufacturer}}</span>
        {% endif %}
    </td>
    <td class="ports">{{ device.ports | join(", ") }}</td>
    <td class="stage">
        {% if device.stage == 'complete' %}
            <span class="badge badge-success">complete</span>
        {% elif device.stage == 'found' %}
            <span class="badge badge-secondary">found</span>
        {% elif device.stage == 'scanning' %}
            <span class="badge badge-info">
                scanning 
                {{ (device.ports_scanned/data.port_list_length*100)|round|int if data.port_list_length > 0 else 0 }}%
            </span>
        {% else %}
            <span class="badge badge-warning">{{device.stage}}</span>
        {% endif %}
    </td>
</tr>