{% load i18n %}
<!-- Sorted Set 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:' %}</label>
            <form method="post" class="flex flex-wrap items-center gap-2">
                {% csrf_token %}
                <input type="hidden" name="action" value="zadd">
                <input type="text" name="member_value" placeholder="{% trans 'member' %}"
                       class="w-28 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="number" name="score_value" placeholder="{% trans 'score' %}" step="any"
                       class="w-20 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">
                <span class="text-xs text-base-400 flex items-center gap-2 whitespace-nowrap">
                    <label title="{% trans 'Only add new' %}"><input type="checkbox" name="zadd_nx" class="mr-1"> NX</label>
                    <label title="{% trans 'Only update existing' %}"><input type="checkbox" name="zadd_xx" class="mr-1"> XX</label>
                    <label title="{% trans 'Update if score > current' %}"><input type="checkbox" name="zadd_gt" class="mr-1"> GT</label>
                    <label title="{% trans 'Update if score < current' %}"><input type="checkbox" name="zadd_lt" class="mr-1"> LT</label>
                </span>
                <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 'Pop Min:' %}</label>
            <form method="post" class="flex items-center gap-2">
                {% csrf_token %}
                <input type="hidden" name="action" value="zpopmin">
                <input type="number" name="pop_count" value="1" min="1"
                       class="w-14 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" title="{% trans 'Count' %}">
                <button type="submit" class="px-3 py-1 text-sm font-medium rounded bg-primary-600 text-white hover:bg-primary-700">
                    {% trans 'Pop' %}
                </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 'Pop Max:' %}</label>
            <form method="post" class="flex items-center gap-2">
                {% csrf_token %}
                <input type="hidden" name="action" value="zpopmax">
                <input type="number" name="pop_count" value="1" min="1"
                       class="w-14 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" title="{% trans 'Count' %}">
                <button type="submit" class="px-3 py-1 text-sm font-medium rounded bg-primary-600 text-white hover:bg-primary-700">
                    {% trans 'Pop' %}
                </button>
            </form>
        </div>
    </div>
</div>
<!-- Sorted Set Members -->
<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 'Sorted Set Members' %}{% if type_data.length %} ({{ type_data.length }}){% endif %}
        </h2>
    </div>
    {% if type_data.members %}
    <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="px-4 py-3 text-left text-xs font-medium text-base-500 dark:text-base-400 uppercase">{% trans 'Member' %}</th>
                <th class="w-32 px-4 py-3 text-left text-xs font-medium text-base-500 dark:text-base-400 uppercase">{% trans 'Score' %}</th>
                <th class="w-36 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 member, score in type_data.members %}
            <tr class="hover:bg-base-50 dark:hover:bg-base-800">
                <td class="px-4 py-3 font-mono text-sm text-base-900 dark:text-base-100">{{ member }}</td>
                <form method="post" class="contents">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="zadd">
                    <input type="hidden" name="member_value" value="{{ member }}">
                    <td class="px-4 py-3">
                        <input type="number" name="score_value" value="{{ score }}" step="any"
                               class="w-full px-2 py-1 text-sm font-mono border border-base-300 dark:border-base-600 rounded
                                      bg-white dark:bg-base-800 text-base-900 dark:text-base-100">
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                        <button type="submit" class="px-2 py-1 text-xs font-medium rounded bg-primary-600 text-white hover:bg-primary-700">
                            {% trans 'Update' %}
                        </button>
                </form>
                        <form method="post" class="inline ml-1">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="zrem">
                            <input type="hidden" name="member" value="{{ member }}">
                            <button type="submit" 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 'Remove' %}
                            </button>
                        </form>
                    </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p class="p-4 text-base-500 dark:text-base-400">{% trans 'Sorted set is empty.' %}</p>
    {% endif %}
</div>