{# Recent Suspicious Activity - server-rendered on page load #}
<div class="table-container alert-section">
    <h2>Recent Suspicious Activity</h2>
    <table>
        <thead>
            <tr>
                <th>IP Address</th>
                <th>Path</th>
                <th>User-Agent</th>
                <th>Time</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for activity in suspicious_activities %}
            <tr class="ip-row" data-ip="{{ activity.ip | e }}">
                <td class="ip-clickable"
                    hx-get="{{ dashboard_path }}/htmx/ip-detail/{{ activity.ip | e }}"
                    hx-target="next .ip-stats-row .ip-stats-dropdown"
                    hx-swap="innerHTML"
                    @click="toggleIpDetail($event)">
                    {{ activity.ip | e }}
                </td>
                <td>{{ activity.path | e }}</td>
                <td style="word-break: break-all;">{{ (activity.user_agent | default(''))[:80] | e }}</td>
                <td>{{ activity.timestamp | format_ts(time_only=True) }}</td>
                <td>
                    <button class="inspect-btn" @click="openIpInsight('{{ activity.ip | e }}')" title="Inspect IP">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"/></svg>
                    </button>
                </td>
            </tr>
            <tr class="ip-stats-row" style="display: none;">
                <td colspan="5" class="ip-stats-cell">
                    <div class="ip-stats-dropdown">
                        <div class="loading">Loading stats...</div>
                    </div>
                </td>
            </tr>
            {% else %}
            <tr><td colspan="5" style="text-align:center;">No suspicious activity detected</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>