irdb/ui/resources/views/pages/manual-blocks/index.twig

{% extends 'layout.twig' %}

{% block title %}Manual blocks — IRDB{% endblock %}

{% block content %}
{% import 'partials/sort.twig' as sort %}
<div class="mx-auto max-w-5xl">
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-semibold tracking-tight">
            {% if active_section == 'subnets' %}Subnets{% else %}Manual blocks{% endif %}
        </h1>
        <span class="text-sm text-slate-500 dark:text-slate-400">{{ list.total|default(0) }} total</span>
    </div>

    {% set kind_links = [
        { label: 'All',     value: '' },
        { label: 'IPs',     value: 'ip' },
        { label: 'Subnets', value: 'subnet' },
    ] %}
    <div class="mt-4 flex gap-2 text-sm">
        {% for k in kind_links %}
            {% set is_active = (kind|default('') == k.value) or (kind == null and k.value == '') %}
            <a href="/app/manual-blocks{% if k.value %}?kind={{ k.value }}{% endif %}"
               class="rounded-full px-3 py-1 {% if is_active %}bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-100{% else %}border border-slate-300 text-slate-600 hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800{% endif %}">
                {{ k.label }}
            </a>
        {% endfor %}
    </div>

    {% if can_write %}
        <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">Add manual block</h2>
            <form method="post" action="/app/manual-blocks" class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-4 text-sm" x-data="{ kind: '{{ kind|default('subnet') }}' }">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <div>
                    <label for="mb-kind" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Kind</label>
                    <select id="mb-kind" name="kind" x-model="kind"
                            class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 dark:border-slate-700 dark:bg-slate-950">
                        <option value="ip">Single IP</option>
                        <option value="subnet">Subnet (CIDR)</option>
                    </select>
                </div>
                <div x-show="kind == 'ip'">
                    <label for="mb-ip" class="block text-xs font-medium text-slate-600 dark:text-slate-400">IP</label>
                    <input type="text" id="mb-ip" name="ip" placeholder="203.0.113.5"
                           class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 font-mono dark:border-slate-700 dark:bg-slate-950">
                </div>
                <div x-show="kind == 'subnet'">
                    <label for="mb-cidr" class="block text-xs font-medium text-slate-600 dark:text-slate-400">CIDR</label>
                    <input type="text" id="mb-cidr" name="cidr" placeholder="192.0.2.0/24"
                           class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 font-mono dark:border-slate-700 dark:bg-slate-950">
                </div>
                <div>
                    <label for="mb-reason" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Reason</label>
                    <input type="text" id="mb-reason" name="reason"
                           class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 dark:border-slate-700 dark:bg-slate-950">
                </div>
                <div>
                    <label for="mb-expires" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Expires (optional)</label>
                    <input type="date" id="mb-expires" name="expires_at"
                           class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 dark:border-slate-700 dark:bg-slate-950">
                    <p class="mt-1 text-xs text-slate-400">Block ends at 23:59:59 UTC of the selected day.</p>
                </div>
                <div class="md:col-span-4 flex justify-end">
                    <button type="submit" class="rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-500">Add block</button>
                </div>
            </form>
        </section>
    {% endif %}

    <section 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" data-sortable-table="manual-blocks-index">
            <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>
                    {{ sort.th('Kind', 'kind') }}
                    {{ sort.th('Target', 'target') }}
                    {{ sort.th('Reason', 'reason') }}
                    {{ sort.th('Expires', 'expires', 'date') }}
                    {{ sort.th('Created', 'created', 'date') }}
                    {% if can_write %}<th class="px-4 py-2 text-right font-medium">Actions</th>{% endif %}
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                {% for item in list.items|default([]) %}
                    <tr>
                        <td class="px-4 py-2 font-mono text-xs uppercase" data-sort-value="{{ item.kind }}">{{ item.kind }}</td>
                        <td class="px-4 py-2 font-mono" data-sort-value="{{ item.kind == 'ip' ? item.ip : item.cidr }}">{{ item.kind == 'ip' ? item.ip : item.cidr }}</td>
                        <td class="px-4 py-2 text-slate-600 dark:text-slate-300" data-sort-value="{{ item.reason|default('') }}">{{ item.reason|default('—') }}</td>
                        <td class="px-4 py-2 text-slate-500 dark:text-slate-400" data-sort-value="{{ item.expires_at|default('') }}">{% if item.expires_at %}<time class="irdb-dt" datetime="{{ item.expires_at }}">{{ item.expires_at }}</time>{% else %}—{% endif %}</td>
                        <td class="px-4 py-2 text-slate-500 dark:text-slate-400" data-sort-value="{{ item.created_at|default('') }}">{% if item.created_at %}<time class="irdb-dt" datetime="{{ item.created_at }}">{{ item.created_at }}</time>{% endif %}</td>
                        {% if can_write %}
                            <td class="px-4 py-2 text-right">
                                {% include 'partials/confirm_form.twig' with {
                                    action: '/app/manual-blocks/' ~ item.id ~ '/delete',
                                    label: 'Remove',
                                    description: 'This removes the manual block immediately.',
                                } only %}
                            </td>
                        {% endif %}
                    </tr>
                {% else %}
                    <tr><td colspan="6" class="px-4 py-6 text-center text-slate-400">No manual blocks.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </section>
</div>
{% endblock %}