{# HTMX fragment: Attackers table #}
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
    <span class="pagination-info">Page {{ pagination.page }}/{{ pagination.total_pages }} &mdash; {{ pagination.total }} attackers</span>
    <div style="display: flex; gap: 8px;">
        <button class="pagination-btn"
                hx-get="{{ dashboard_path }}/htmx/attackers?page={{ pagination.page - 1 }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
                hx-target="closest .htmx-container"
                hx-swap="innerHTML"
                {% if pagination.page <= 1 %}disabled{% endif %}>Prev</button>
        <button class="pagination-btn"
                hx-get="{{ dashboard_path }}/htmx/attackers?page={{ pagination.page + 1 }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
                hx-target="closest .htmx-container"
                hx-swap="innerHTML"
                {% if pagination.page >= pagination.total_pages %}disabled{% endif %}>Next</button>
    </div>
</div>
<table class="ip-stats-table">
    <thead>
        <tr>
            <th>#</th>
            <th>IP Address</th>
            <th class="sortable {% if sort_by == 'total_requests' %}{{ sort_order }}{% endif %}"
                hx-get="{{ dashboard_path }}/htmx/attackers?page=1&sort_by=total_requests&sort_order={% if sort_by == 'total_requests' and sort_order == 'desc' %}asc{% else %}desc{% endif %}"
                hx-target="closest .htmx-container"
                hx-swap="innerHTML">
                Total Requests
            </th>
            <th>First Seen</th>
            <th>Last Seen</th>
            <th>Location</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for ip in items %}
        <tr class="ip-row" data-ip="{{ ip.ip | e }}">
            <td class="rank">{{ loop.index + (pagination.page - 1) * pagination.page_size }}</td>
            <td class="ip-clickable"
                hx-get="{{ dashboard_path }}/htmx/ip-detail/{{ ip.ip | e }}"
                hx-target="next .ip-stats-row .ip-stats-dropdown"
                hx-swap="innerHTML"
                @click="toggleIpDetail($event)">
                {{ ip.ip | e }}
            </td>
            <td>{{ ip.total_requests }}</td>
            <td>{{ ip.first_seen | format_ts }}</td>
            <td>{{ ip.last_seen | format_ts }}</td>
            <td>{{ ip.city | default('') | e }}{% if ip.city and ip.country_code %}, {% endif %}{{ ip.country_code | default('N/A') | e }}</td>
            <td>
                <button class="inspect-btn" @click="openIpInsight('{{ ip.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="7" class="ip-stats-cell">
                <div class="ip-stats-dropdown">
                    <div class="loading">Loading stats...</div>
                </div>
            </td>
        </tr>
        {% else %}
        <tr><td colspan="7" style="text-align: center;">No attackers found</td></tr>
        {% endfor %}
    </tbody>
</table>