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

{% extends 'layout.twig' %}

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

{% block content %}
{% import 'partials/sort.twig' as sort %}
{% set policy_name_by_id = {} %}
{% for p in policies %}
    {% set policy_name_by_id = policy_name_by_id|merge({(p.id): p.name}) %}
{% endfor %}

<div class="mx-auto max-w-5xl">
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-semibold tracking-tight">Consumers</h1>
        <span class="text-sm text-slate-500 dark:text-slate-400">{{ list.total|default(0) }} total</span>
    </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">New consumer</h2>
            <form method="post" action="/app/consumers" class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-3 text-sm">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <div>
                    <label for="c-name" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Name</label>
                    <input type="text" id="c-name" name="name" required
                           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="c-policy" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Policy</label>
                    <select id="c-policy" name="policy_id" required
                            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="">— pick one —</option>
                        {% for p in policies %}
                            <option value="{{ p.id }}">{{ p.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label for="c-desc" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Description</label>
                    <input type="text" id="c-desc" name="description"
                           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 class="md:col-span-3 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">Create</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="consumers-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('Name', 'name') }}
                    {{ sort.th('Policy', 'policy') }}
                    {{ sort.th('Description', 'description') }}
                    {{ sort.th('Status', 'status') }}
                    {% 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 c in list.data|default([]) %}
                    <tr>
                        <td class="px-4 py-2" data-sort-value="{{ c.name }}"><a href="/app/consumers/{{ c.id }}" class="font-mono text-indigo-600 hover:underline dark:text-indigo-400">{{ c.name }}</a></td>
                        <td class="px-4 py-2 font-mono text-slate-600 dark:text-slate-300" data-sort-value="{{ policy_name_by_id[c.policy_id]|default('') }}">{{ policy_name_by_id[c.policy_id]|default('?') }}</td>
                        <td class="px-4 py-2 text-slate-600 dark:text-slate-300" data-sort-value="{{ c.description|default('') }}">{{ c.description|default('—') }}</td>
                        <td class="px-4 py-2" data-sort-value="{{ c.is_active ? 'active' : 'inactive' }}">
                            {% if c.is_active %}
                                <span class="rounded bg-emerald-100 px-1.5 py-0.5 text-xs uppercase text-emerald-800 dark:bg-emerald-900 dark:text-emerald-100">active</span>
                            {% else %}
                                <span class="rounded bg-slate-100 px-1.5 py-0.5 text-xs uppercase text-slate-600 dark:bg-slate-800 dark:text-slate-400">inactive</span>
                            {% endif %}
                        </td>
                        {% if can_write %}
                            <td class="px-4 py-2 text-right">
                                <a href="/app/consumers/{{ c.id }}" class="mr-2 text-xs text-indigo-600 hover:underline dark:text-indigo-400">Edit</a>
                                {% if c.is_active %}
                                    {% include 'partials/confirm_form.twig' with {
                                        action: '/app/consumers/' ~ c.id ~ '/delete',
                                        label: 'Deactivate',
                                        description: 'Soft-delete this consumer.',
                                    } only %}
                                {% endif %}
                            </td>
                        {% endif %}
                    </tr>
                {% else %}
                    <tr><td colspan="5" class="px-4 py-6 text-center text-slate-400">No consumers.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </section>
</div>
{% endblock %}