irdb/ui/resources/views/pages/ips/index.twig

{% extends 'layout.twig' %}

{% block title %}IPs — IRDB{% endblock %}

{% macro flag(country) %}
    {%- set emoji = flag_emoji(country) -%}
    {%- if emoji -%}
        <span class="text-base leading-none">{{- emoji -}}</span>
    {%- else -%}
        <span class="rounded bg-slate-100 px-1.5 py-0.5 font-mono text-[0.65rem] text-slate-500 dark:bg-slate-800 dark:text-slate-400">??</span>
    {%- endif -%}
{% endmacro %}

{% macro status_pill(status) %}
    {%- set classes = {
        'allowlisted':      'bg-emerald-100 text-emerald-900 dark:bg-emerald-900 dark:text-emerald-100',
        'manually_blocked': 'bg-amber-100 text-amber-900 dark:bg-amber-900 dark:text-amber-100',
        'scored':           'bg-red-100 text-red-900 dark:bg-red-900 dark:text-red-100',
        'clean':            'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300',
        'manual':           'bg-amber-100 text-amber-900 dark:bg-amber-900 dark:text-amber-100',
    } -%}
    <span class="rounded px-2 py-0.5 font-mono text-[0.65rem] uppercase {{ classes[status]|default('bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300') }}">{{ status }}</span>
{% endmacro %}

{% block content %}
{% import _self as h %}
<div class="mx-auto max-w-6xl">
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-semibold tracking-tight">IPs</h1>
        {% if list %}
            <span class="text-sm text-slate-500 dark:text-slate-400">{{ list.total }} total</span>
        {% endif %}
    </div>

    {% if error %}
        <div class="mt-4 rounded-md border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-300">{{ error }}</div>
    {% endif %}

    <form method="get" action="/app/ips" class="mt-4 grid grid-cols-2 gap-3 rounded-2xl border border-slate-200 bg-white p-4 text-sm shadow-sm dark:border-slate-800 dark:bg-slate-900 md:grid-cols-7">
        <div class="col-span-2">
            <label for="f-q" class="block text-xs font-medium text-slate-600 dark:text-slate-400">IP / prefix</label>
            <input type="search" id="f-q" name="q" value="{{ filters.q|default('') }}" placeholder="203.0.113."
                   class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 text-sm dark:border-slate-700 dark:bg-slate-950">
        </div>
        <div>
            <label for="f-cat" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Category</label>
            <select id="f-cat" name="category" class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 text-sm dark:border-slate-700 dark:bg-slate-950">
                <option value="">— any —</option>
                {% for c in categories %}
                    <option value="{{ c }}" {% if filters.category == c %}selected{% endif %}>{{ c }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label for="f-min" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Min score</label>
            <input type="number" id="f-min" name="min_score" step="0.01" min="0" value="{{ filters.min_score|default('') }}"
                   class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 text-sm dark:border-slate-700 dark:bg-slate-950">
        </div>
        <div>
            <label for="f-max" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Max score</label>
            <input type="number" id="f-max" name="max_score" step="0.01" min="0" value="{{ filters.max_score|default('') }}"
                   class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 text-sm dark:border-slate-700 dark:bg-slate-950">
        </div>
        <div>
            <label for="f-country" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Country</label>
            {% if countries|default([])|length > 0 %}
                <select id="f-country" name="country" class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 font-mono text-sm uppercase dark:border-slate-700 dark:bg-slate-950">
                    <option value="">— any —</option>
                    {% for c in countries %}
                        <option value="{{ c.code }}" {% if filters.country|upper == c.code|upper %}selected{% endif %}>{{ c.code }} ({{ c.count }})</option>
                    {% endfor %}
                </select>
            {% else %}
                <input type="text" id="f-country" name="country" maxlength="2" value="{{ filters.country|default('') }}"
                       class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 font-mono text-sm uppercase dark:border-slate-700 dark:bg-slate-950">
            {% endif %}
        </div>
        <div>
            <label for="f-asn" class="block text-xs font-medium text-slate-600 dark:text-slate-400">ASN</label>
            <input type="number" id="f-asn" name="asn" min="1" value="{{ filters.asn|default('') }}"
                   class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 text-sm dark:border-slate-700 dark:bg-slate-950">
        </div>
        <div class="col-span-2 md:col-span-7 flex flex-wrap items-end justify-between gap-3">
            <div class="flex items-center gap-2">
                <label for="f-status" class="text-xs font-medium text-slate-600 dark:text-slate-400">Status</label>
                <select id="f-status" name="status" class="rounded-md border border-slate-300 bg-white px-2 py-1.5 text-sm dark:border-slate-700 dark:bg-slate-950">
                    <option value="">any</option>
                    {% for s in statuses %}
                        <option value="{{ s }}" {% if filters.status == s %}selected{% endif %}>{{ s }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="flex gap-2">
                <a href="/app/ips" class="rounded-md border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">Reset</a>
                <button type="submit" class="rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-500">Filter</button>
            </div>
        </div>
    </form>

    {% if list %}
        <div class="mt-6 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <table class="w-full text-sm">
                <thead class="border-b border-slate-200 bg-slate-50 text-left text-xs uppercase tracking-wider text-slate-500 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-400">
                    <tr>
                        <th class="px-4 py-2 font-medium">IP</th>
                        <th class="px-4 py-2 font-medium">Country</th>
                        <th class="px-4 py-2 font-medium">ASN</th>
                        <th class="px-4 py-2 font-medium">Top category</th>
                        <th class="px-4 py-2 text-right font-medium">Max score</th>
                        <th class="px-4 py-2 font-medium">Last report</th>
                        <th class="px-4 py-2 font-medium">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                    {% for item in list.items %}
                        <tr>
                            <td class="px-4 py-2"><a href="/app/ips/{{ item.ip|url_encode }}" class="font-mono text-indigo-600 hover:underline dark:text-indigo-400">{{ item.ip }}</a></td>
                            <td class="px-4 py-2">{{ h.flag(item.enrichment.country_code|default('')) }}</td>
                            <td class="px-4 py-2 font-mono text-slate-500">{{ item.enrichment.asn|default('—') }}</td>
                            <td class="px-4 py-2 font-mono text-slate-600 dark:text-slate-300">{{ item.topCategory|default('—') }}</td>
                            <td class="px-4 py-2 text-right font-mono">{{ item.maxScore|number_format(2) }}</td>
                            <td class="px-4 py-2 text-slate-500 dark:text-slate-400">{% if item.lastReportAt %}<time class="irdb-dt" datetime="{{ item.lastReportAt }}">{{ item.lastReportAt }}</time>{% else %}—{% endif %}</td>
                            <td class="px-4 py-2">{{ h.status_pill(item.status) }}</td>
                        </tr>
                    {% else %}
                        <tr><td colspan="7" class="px-4 py-6 text-center text-slate-400">No results.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% if list.total > list.pageSize %}
            {% set total_pages = list.totalPages() %}
            <nav class="mt-4 flex items-center justify-between text-sm">
                <span class="text-slate-500 dark:text-slate-400">Page {{ page }} of {{ total_pages }}</span>
                <div class="flex gap-2">
                    {% set prev_qs = filters|merge({'page': page - 1}) %}
                    {% set next_qs = filters|merge({'page': page + 1}) %}
                    {% if page > 1 %}
                        <a href="/app/ips?{{ prev_qs|url_encode }}" class="rounded-md border border-slate-300 px-3 py-1.5 hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">‹ Prev</a>
                    {% endif %}
                    {% if page < total_pages %}
                        <a href="/app/ips?{{ next_qs|url_encode }}" class="rounded-md border border-slate-300 px-3 py-1.5 hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">Next ›</a>
                    {% endif %}
                </div>
            </nav>
        {% endif %}
    {% endif %}
</div>
{% endblock %}