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

{% extends 'layout.twig' %}

{% block title %}{{ detail.ip }} — IRDB{% endblock %}

{% macro flag(country) %}
    {%- if country and country|length == 2 -%}
        {%- set code = country|upper -%}
        {{- '🇦' ~ code[0:1] ~ '🇦' ~ code[1:2] -}}
    {%- 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',
    } -%}
    <span class="rounded px-2.5 py-1 font-mono text-xs 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-5xl">
    <a href="/app/ips" class="text-sm text-slate-500 hover:underline dark:text-slate-400">← Back to IPs</a>

    <div class="mt-3 flex items-center justify-between">
        <h1 class="font-mono text-2xl font-semibold tracking-tight">{{ detail.ip }}</h1>
        {{ h.status_pill(detail.status) }}
    </div>
    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ detail.isIpv4 ? 'IPv4' : 'IPv6' }}</p>

    <section class="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-2">
        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Enrichment</h2>
            {% if detail.enrichment.country_code or detail.enrichment.asn %}
                <dl class="mt-3 grid grid-cols-3 gap-y-2 text-sm">
                    <dt class="text-slate-500 dark:text-slate-400">Country</dt>
                    <dd class="col-span-2 font-mono">{{ h.flag(detail.enrichment.country_code) }} {{ detail.enrichment.country_code|default('—') }}</dd>
                    <dt class="text-slate-500 dark:text-slate-400">ASN</dt>
                    <dd class="col-span-2 font-mono">{{ detail.enrichment.asn|default('—') }}</dd>
                    <dt class="text-slate-500 dark:text-slate-400">AS org</dt>
                    <dd class="col-span-2">{{ detail.enrichment.as_org|default('—') }}</dd>
                </dl>
            {% else %}
                <p class="mt-3 text-sm text-slate-400">Not yet enriched (data lands once the GeoIP job runs in M11).</p>
            {% endif %}
        </div>

        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Override status</h2>
            {% if detail.allowlist %}
                <p class="mt-3 text-sm">Allowlisted since
                    <time class="font-mono">{{ detail.allowlist.created_at }}</time>.
                    {% if detail.allowlist.reason %}<br><span class="text-slate-500 dark:text-slate-400">Reason:</span> {{ detail.allowlist.reason }}{% endif %}
                </p>
            {% elseif detail.manualBlock %}
                <p class="mt-3 text-sm">Manually blocked since
                    <time class="font-mono">{{ detail.manualBlock.created_at }}</time>.
                    {% if detail.manualBlock.reason %}<br><span class="text-slate-500 dark:text-slate-400">Reason:</span> {{ detail.manualBlock.reason }}{% endif %}
                </p>
            {% else %}
                <p class="mt-3 text-sm text-slate-400">No manual override on this IP.</p>
            {% endif %}
        </div>
    </section>

    <section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
        <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Score per category</h2>
        {% if detail.scores|length > 0 %}
            {% set max_score = detail.maxScore() %}
            <ul class="mt-3 space-y-3 text-sm">
                {% for s in detail.scores %}
                    {% set width_pct = max_score > 0 ? (s.score / max_score * 100) : 0 %}
                    <li>
                        <div class="flex items-baseline justify-between">
                            <span class="font-mono">{{ s.category|default('?') }}</span>
                            <span class="font-mono text-slate-600 dark:text-slate-300">{{ s.score|number_format(2) }} <span class="text-xs text-slate-400">({{ s.report_count_30d }} in 30d)</span></span>
                        </div>
                        <div class="mt-1 h-1.5 overflow-hidden rounded bg-slate-100 dark:bg-slate-800">
                            <div class="h-full bg-indigo-500" style="width: {{ width_pct }}%"></div>
                        </div>
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            <p class="mt-3 text-sm text-slate-400">No scored categories.</p>
        {% endif %}
    </section>

    <section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
        <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">History</h2>
        {% if detail.history|length > 0 %}
            <ol class="mt-3 space-y-3 text-sm">
                {% for ev in detail.history %}
                    <li class="border-l-2 border-slate-200 pl-3 dark:border-slate-800">
                        <div class="flex items-baseline justify-between">
                            <span class="font-mono text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">
                                {{ ev.type }}
                            </span>
                            <time class="font-mono text-xs text-slate-400">{{ ev.at }}</time>
                        </div>
                        {% if ev.type == 'report' %}
                            <p class="mt-1">
                                {% if ev.category %}<span class="font-mono">{{ ev.category }}</span>{% endif %}
                                {% if ev.reporter %}<span class="text-slate-500 dark:text-slate-400"> via {{ ev.reporter }}</span>{% endif %}
                                {% if ev.weight %}<span class="text-slate-400"> · w={{ ev.weight }}</span>{% endif %}
                            </p>
                            {% if ev.metadata %}
                                <pre class="mt-1 overflow-x-auto rounded bg-slate-50 p-2 text-xs dark:bg-slate-950">{{ ev.metadata|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
                            {% endif %}
                        {% elseif ev.type == 'manual_block_added' %}
                            <p class="mt-1">Manual block added{% if ev.reason %}: <span class="text-slate-600 dark:text-slate-300">{{ ev.reason }}</span>{% endif %}</p>
                        {% elseif ev.type == 'allowlist_added' %}
                            <p class="mt-1">Allowlist entry added{% if ev.reason %}: <span class="text-slate-600 dark:text-slate-300">{{ ev.reason }}</span>{% endif %}</p>
                        {% endif %}
                    </li>
                {% endfor %}
            </ol>
            {% if detail.hasMore %}
                <p class="mt-3 text-xs text-slate-500 dark:text-slate-400">Showing the most recent 200 events. Older events are available via the API directly until the in-app pagination lands in a future milestone.</p>
            {% endif %}
        {% else %}
            <p class="mt-3 text-sm text-slate-400">No history yet.</p>
        {% endif %}
    </section>
</div>
{% endblock %}