{% load i18n %}
<!-- Stream Operations -->
<div class="bg-white dark:bg-base-900 lg:border lg:border-base-200 lg:dark:border-base-800 lg:rounded-default lg:shadow-xs mb-6">
    <div class="px-4 py-3 border-b border-base-200 dark:border-base-800">
        <h2 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">{% trans 'Operations' %}</h2>
    </div>
    <div class="p-4 space-y-3">
        <div class="flex items-center gap-3">
            <label class="w-24 text-sm font-medium text-base-700 dark:text-base-300 flex-none">{% trans 'Add Entry:' %}</label>
            <form method="post" class="flex items-center gap-2">
                {% csrf_token %}
                <input type="hidden" name="action" value="xadd">
                <input type="text" name="field_name" placeholder="{% trans 'field' %}"
                       class="w-24 px-2 py-1 text-sm border border-base-300 dark:border-base-600 rounded
                              bg-white dark:bg-base-700 text-base-900 dark:text-base-100">
                <input type="text" name="field_value" placeholder="{% trans 'value' %}"
                       class="w-32 px-2 py-1 text-sm border border-base-300 dark:border-base-600 rounded
                              bg-white dark:bg-base-700 text-base-900 dark:text-base-100">
                <button type="submit" class="px-3 py-1 text-sm font-medium rounded bg-primary-600 text-white hover:bg-primary-700">
                    {% trans 'Add' %}
                </button>
            </form>
        </div>
        <div class="flex items-center gap-3">
            <label class="w-24 text-sm font-medium text-base-700 dark:text-base-300 flex-none">{% trans 'Trim:' %}</label>
            <form method="post" class="flex items-center gap-2">
                {% csrf_token %}
                <input type="hidden" name="action" value="xtrim">
                <input type="number" name="maxlen" placeholder="{% trans 'max length' %}" min="0"
                       class="w-24 px-2 py-1 text-sm border border-base-300 dark:border-base-600 rounded
                              bg-white dark:bg-base-700 text-base-900 dark:text-base-100">
                <button type="submit"
                        onclick="return confirm('{% trans 'Trim stream to this length? Older entries will be removed.' %}');"
                        class="px-3 py-1 text-sm font-medium rounded bg-primary-600 text-white hover:bg-primary-700">
                    {% trans 'Trim' %}
                </button>
            </form>
        </div>
    </div>
</div>
<!-- Stream Entries -->
<div class="bg-white dark:bg-base-900 lg:border lg:border-base-200 lg:dark:border-base-800 lg:rounded-default lg:shadow-xs mb-6">
    <div class="px-4 py-3 border-b border-base-200 dark:border-base-800">
        <h2 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">
            {% trans 'Stream Entries' %}{% if type_data.length %} ({{ type_data.length }}){% endif %}
        </h2>
    </div>
    {% if type_data.entries %}
    <table class="w-full">
        <thead class="bg-base-50 dark:bg-base-800 border-b border-base-200 dark:border-base-800">
            <tr>
                <th class="w-44 px-4 py-3 text-left text-xs font-medium text-base-500 dark:text-base-400 uppercase">{% trans 'Entry ID' %}</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-base-500 dark:text-base-400 uppercase">{% trans 'Fields' %}</th>
                <th class="w-24 px-4 py-3 text-left text-xs font-medium text-base-500 dark:text-base-400 uppercase">{% trans 'Actions' %}</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-base-200 dark:divide-base-800">
            {% for entry_id, fields in type_data.entries %}
            <tr class="hover:bg-base-50 dark:hover:bg-base-800">
                <td class="px-4 py-3 font-mono text-xs text-base-500 dark:text-base-400">{{ entry_id }}</td>
                <td class="px-4 py-3 font-mono text-sm text-base-900 dark:text-base-100">
                    {% for field, value in fields.items %}{{ field }}: {{ value }}{% if not forloop.last %}, {% endif %}{% endfor %}
                </td>
                <td class="px-4 py-3">
                    <form method="post" class="inline">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="xdel">
                        <input type="hidden" name="entry_id" value="{{ entry_id }}">
                        <button type="submit"
                                onclick="return confirm('{% trans 'Delete this entry?' %}');"
                                class="px-2 py-1 text-xs font-medium rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-900/50">
                            {% trans 'Delete' %}
                        </button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p class="p-4 text-base-500 dark:text-base-400">{% trans 'Stream is empty.' %}</p>
    {% endif %}
</div>