{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block title %}{{ cache_name }} - {% trans 'Keys' %} | django-cachex{% endblock %}

{% block breadcrumbs %}
<div class="container mb-4 mx-auto px-4 lg:px-0">
    <nav class="flex text-sm">
        <a href="{% url 'admin:index' %}" class="text-base-500 dark:text-base-400 hover:text-primary-600 dark:hover:text-primary-400">{% trans 'Home' %}</a>
        <span class="mx-2 text-base-400">/</span>
        <a href="{% url 'admin:django_cachex_cache_changelist' %}" class="text-base-500 dark:text-base-400 hover:text-primary-600 dark:hover:text-primary-400">{% trans 'Caches' %}</a>
        <span class="mx-2 text-base-400">/</span>
        <span class="text-font-important-light dark:text-font-important-dark font-medium">{{ cache_name }}</span>
    </nav>
</div>
{% endblock %}

{% block content %}
<div id="content-main" x-data="{ filterOpen: false }">

    <!-- Error messages -->
    {% if error %}
    <div class="mb-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-default">
        <p class="text-red-700 dark:text-red-400"><strong>Error:</strong> {{ error }}</p>
    </div>
    {% endif %}

    {% if error_message %}
    <div class="mb-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-default">
        <p class="text-red-700 dark:text-red-400">{{ error_message }}</p>
    </div>
    {% endif %}

    <div class="flex -mx-4 module{% if type_filter %} filtered{% endif %}" id="changelist" x-data="{ changeListWidth: 0 }">
        <div class="result-list-wrapper changelist-form-container flex flex-row grow gap-6 min-w-0 px-4">
            <div class="grow min-w-0" x-resize="changeListWidth = $width">

                <!-- Search toolbar + action buttons -->
                <div class="flex flex-col gap-4 mb-4 sm:flex-row empty:hidden lg:border lg:border-base-200 lg:dark:border-base-800 lg:-mb-8 lg:p-3 lg:pb-11 lg:rounded-t-default">
                    <div id="toolbar">
                        <form id="changelist-search" method="get" role="search">
                            <input type="hidden" name="cache" value="{{ cache_name }}">
                            {% if type_filter %}<input type="hidden" name="type" value="{{ type_filter }}">{% endif %}
                            <div class="bg-white border border-base-200 flex flex-row items-center px-3 rounded-default relative shadow-xs w-full focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 lg:w-96 dark:bg-base-900 dark:border-base-700">
                                <button type="submit" class="flex items-center focus:outline-hidden" id="searchbar-submit">
                                    <span class="material-symbols-outlined md-18 text-base-400 dark:text-base-500">search</span>
                                </button>
                                <input type="text"
                                       class="grow font-medium min-w-0 overflow-hidden p-2 placeholder-font-subtle-light truncate focus:outline-hidden dark:bg-base-900 dark:placeholder-font-subtle-dark dark:text-font-default-dark"
                                       name="q"
                                       value="{{ search_query }}"
                                       id="searchbar"
                                       placeholder="{% trans 'Type to search' %}">
                                <kbd class="bg-base-50 border border-base-200 font-sans text-xs text-font-subtle-light rounded-xs px-1 whitespace-nowrap dark:bg-white/[.04] dark:border-base-700 dark:text-font-subtle-dark">/</kbd>
                            </div>
                        </form>
                    </div>
                    <div class="flex flex-row gap-2 items-center lg:ml-auto">
                        <a href="?cache={{ cache_name }}&{% if not help_active %}help=1{% endif %}"
                           class="bg-white border-base-200 hover:text-primary-600 dark:bg-base-900 dark:border-base-700 dark:hover:text-primary-500 border cursor-pointer flex font-medium gap-2 items-center px-3 py-2 rounded-default shadow-xs text-sm">
                            {% trans 'Help' %}
                        </a>
                        {% if key_types %}
                        <a class="bg-white border-base-200 hover:text-primary-600 dark:bg-base-900 dark:border-base-700 dark:hover:text-primary-500 border cursor-pointer flex font-medium gap-2 group items-center px-3 py-2 rounded-default shadow-xs text-sm" x-on:click="filterOpen = true" x-on:keydown.escape.window="filterOpen = false">
                            {% trans 'Filters' %}
                            <span class="material-symbols-outlined md-18 ml-auto">filter_list</span>
                        </a>
                        {% endif %}
                        <a href="{% url 'admin:django_cachex_cache_change' cache_name %}"
                           class="bg-white border-base-200 hover:text-primary-600 dark:bg-base-900 dark:border-base-700 dark:hover:text-primary-500 border cursor-pointer flex font-medium gap-2 items-center px-3 py-2 rounded-default shadow-xs text-sm">
                            {% trans 'Cache Details' %}
                        </a>
                        <a href="{% url 'admin:django_cachex_key_add' %}?cache={{ cache_name }}"
                           class="bg-primary-600 border border-transparent cursor-pointer flex font-medium gap-2 items-center px-3 py-2 rounded-default shadow-xs text-sm text-white hover:bg-primary-700">
                            <span class="material-symbols-outlined md-18">add</span>
                            {% trans 'Add key' %}
                        </a>
                    </div>
                </div>

                <form id="changelist-form" method="post" class="group">
                    {% csrf_token %}

                    <!-- Action bar -->
                    <div class="bottom-0 left-0 right-0 hidden group-has-[input.action-select:checked]:flex fixed gap-3 lg:bottom-[64px] lg:h-[64px] items-center p-3 z-50 lg:flex-row">
                        <div class="grow group changelist-actions" x-bind:class="{'xl:ml-0': !sidebarDesktopOpen, 'xl:ml-72': sidebarDesktopOpen}">
                            <div class="actions mx-1 text-white mx-auto" x-bind:style="'width: ' + changeListWidth + 'px'">
                                <div class="bg-primary-600 flex flex-col gap-3 mx-3 p-1.5 rounded-default dark:bg-primary-500 sm:flex-row sm:items-center lg:items-center">
                                    <div class="group primary flex flex-row gap-2 lg:flex-row">
                                        <div class="grow relative max-w-2xl">
                                            <select name="action" class="border border-base-200 bg-white font-medium min-w-20 placeholder-base-400 rounded-default shadow-xs text-font-default-light text-sm focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark dark:scheme-dark group-[.primary]:border-transparent px-3 py-2 w-full pr-8! max-w-2xl appearance-none text-ellipsis group-[.changelist-actions]:appearance-none group-[.changelist-actions]:!bg-white/20 group-[.changelist-actions]:font-medium group-[.changelist-actions]:grow group-[.changelist-actions]:px-2 group-[.changelist-actions]:py-1 group-[.changelist-actions]:pr-8 group-[.changelist-actions]:rounded-default group-[.changelist-actions]:!text-current group-[.changelist-actions]:truncate group-[.changelist-actions]:!outline-primary-400 group-[.changelist-actions]:dark:!outline-primary-700 group-[.changelist-actions]:*:text-base-700 group-[.changelist-actions]:lg:w-72" required>
                                                <option value="" selected>{% trans 'Select action' %}</option>
                                                <option value="delete_selected">{% trans 'Delete selected keys' %}</option>
                                            </select>
                                            <span class="material-symbols-outlined absolute group-[.primary]:text-white pointer-events-none mr-[12px] right-0 text-base-400 top-1/2 -translate-y-1/2">expand_more</span>
                                        </div>
                                        <button type="submit"
                                                onclick="return confirm('{% trans 'Are you sure you want to delete the selected keys?' %}')"
                                                class="bg-primary-900 cursor-pointer flex font-medium items-center justify-center px-3 py-1 rounded-default text-sm text-white whitespace-nowrap">
                                            {% trans 'Run' %}
                                        </button>
                                    </div>
                                    <div class="flex grow flex-col sm:flex-row sm:items-center">
                                        <span class="action-counter">
                                            <span id="action-counter">0</span> {% trans 'selected' %}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {% if keys_data %}
                    <!-- Table card -->
                    <div class="lg:rounded-b-default -mx-1 px-1 overflow-x-auto lg:border lg:border-base-200 lg:mx-0 lg:px-0 lg:shadow-xs lg:dark:border-base-800 lg:bg-white lg:dark:bg-base-900">
                        <table id="result_list" class="result-list block border-base-200 border-spacing-none border-separate w-full lg:table">
                            <thead>
                                <tr>
                                    <th class="align-middle font-semibold py-2 text-left text-font-important-light dark:text-font-important-dark whitespace-nowrap action-checkbox-column lg:px-3 lg:w-10" scope="col">
                                        <div class="flex items-center">
                                            <div class="text">
                                                <label class="flex flex-row items-center gap-2">
                                                    <input type="checkbox" id="action-toggle"
                                                           class="appearance-none bg-white block border border-base-300 cursor-pointer h-4 min-w-4 relative rounded-[4px] shadow-xs w-4 hover:border-base-400 dark:bg-base-700 dark:border-base-500 dark:checked:after:text-white focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-primary-500 after:absolute after:content-['check\_small'] after:flex! after:h-4 after:items-center after:justify-center after:leading-none after:material-symbols-outlined after:-ml-px after:-mt-px after:text-white after:transition-all after:w-4 dark:after:text-base-700 checked:bg-primary-600 dark:checked:bg-primary-600 checked:border-primary-600 dark:checked:border-primary-600 checked:transition-all checked:hover:border-primary-600 action-toggle"
                                                           aria-label="{% trans 'Select all objects on this page for an action' %}">
                                                    <span class="block font-normal lg:hidden">{% trans 'Select all rows' %}</span>
                                                </label>
                                            </div>
                                        </div>
                                    </th>
                                    <th class="align-middle font-semibold py-2 text-left text-font-important-light dark:text-font-important-dark whitespace-nowrap hidden px-3 lg:table-cell" scope="col">
                                        <div class="flex items-center"><div class="text">{% trans 'Key' %}</div></div>
                                    </th>
                                    {% if show_type %}
                                    <th class="align-middle font-semibold py-2 text-left text-font-important-light dark:text-font-important-dark whitespace-nowrap hidden px-3 lg:table-cell" scope="col">
                                        <div class="flex items-center"><div class="text">{% trans 'Type' %}</div></div>
                                    </th>
                                    {% endif %}
                                    {% if show_ttl %}
                                    <th class="align-middle font-semibold py-2 text-left text-font-important-light dark:text-font-important-dark whitespace-nowrap hidden px-3 lg:table-cell" scope="col">
                                        <div class="flex items-center"><div class="text">{% trans 'TTL' %}</div></div>
                                    </th>
                                    {% endif %}
                                    {% if show_size %}
                                    <th class="align-middle font-semibold py-2 text-left text-font-important-light dark:text-font-important-dark whitespace-nowrap hidden px-3 lg:table-cell" scope="col">
                                        <div class="flex items-center"><div class="text">{% trans 'Size' %}</div></div>
                                    </th>
                                    {% endif %}
                                </tr>
                            </thead>
                            <tbody class="block relative lg:table-row-group">
                                {% for key_info in keys_data %}
                                <tr class="{% cycle '' 'bg-base-50 dark:bg-white/[.02]' %} block group {% if forloop.first %}first-row{% endif %} border border-base-200 mb-3 rounded-default shadow-xs lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-base-800 relative lg:hover:shadow-raised lg:dark:hover:shadow-raised-dark lg:hover:z-20">
                                    <td class="action-checkbox align-middle flex items-center px-3 py-2 text-left before:block before:capitalize before:content-[attr(data-label)] before:font-semibold before:mr-auto before:text-font-important-light lg:before:hidden lg:border-t lg:border-base-200 lg:table-cell dark:lg:border-base-800 dark:before:text-font-important-dark" data-label="{% trans 'Select' %}">
                                        <input type="checkbox" name="_selected_action" value="{{ key_info.key }}"
                                               class="appearance-none bg-white block border border-base-300 cursor-pointer h-4 min-w-4 relative rounded-[4px] shadow-xs w-4 hover:border-base-400 dark:bg-base-700 dark:border-base-500 dark:checked:after:text-white focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-primary-500 after:absolute after:content-['check\_small'] after:flex! after:h-4 after:items-center after:justify-center after:leading-none after:material-symbols-outlined after:-ml-px after:-mt-px after:text-white after:transition-all after:w-4 dark:after:text-base-700 checked:bg-primary-600 dark:checked:bg-primary-600 checked:border-primary-600 dark:checked:border-primary-600 checked:transition-all checked:hover:border-primary-600 action-select"
                                               aria-label="{% trans 'Select record' %}">
                                    </td>
                                    <td class="px-3 py-2 align-middle flex border-t border-base-200 font-normal gap-4 min-w-0 overflow-hidden text-left before:flex before:capitalize before:content-[attr(data-label)] before:font-semibold before:text-font-important-light dark:before:text-font-important-dark before:items-center before:mr-auto first:border-t-0 lg:group-[.first-row]:border-t-0 lg:before:hidden lg:py-3 lg:table-cell dark:border-base-800" data-label="{% trans 'Key' %}">
                                        <a href="{% url 'admin:django_cachex_key_change' key_info.pk %}"
                                           class="font-mono text-sm text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200">
                                            {{ key_info.key }}
                                        </a>
                                    </td>
                                    {% if show_type %}
                                    <td class="px-3 py-2 align-middle flex border-t border-base-200 font-normal gap-4 min-w-0 overflow-hidden text-left before:flex before:capitalize before:content-[attr(data-label)] before:font-semibold before:text-font-important-light dark:before:text-font-important-dark before:items-center before:mr-auto first:border-t-0 lg:group-[.first-row]:border-t-0 lg:before:hidden lg:py-3 lg:table-cell dark:border-base-800" data-label="{% trans 'Type' %}">
                                        {% if key_info.type %}
                                        <span class="inline-block font-semibold h-6 leading-6 px-2 rounded-default text-[11px] uppercase whitespace-nowrap
                                            {% if key_info.type == 'string' %}bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400
                                            {% elif key_info.type == 'list' %}bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400
                                            {% elif key_info.type == 'set' %}bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400
                                            {% elif key_info.type == 'hash' %}bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400
                                            {% elif key_info.type == 'zset' %}bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400
                                            {% elif key_info.type == 'stream' %}bg-primary-100 text-primary-700 dark:bg-primary-500/20 dark:text-primary-400
                                            {% else %}bg-base-100 text-base-700 dark:bg-base-500/20 dark:text-base-200{% endif %}">
                                            {{ key_info.type }}
                                        </span>
                                        {% else %}
                                        <span class="text-base-400">-</span>
                                        {% endif %}
                                    </td>
                                    {% endif %}
                                    {% if show_ttl %}
                                    <td class="px-3 py-2 align-middle flex border-t border-base-200 font-normal gap-4 min-w-0 overflow-hidden text-left before:flex before:capitalize before:content-[attr(data-label)] before:font-semibold before:text-font-important-light dark:before:text-font-important-dark before:items-center before:mr-auto first:border-t-0 lg:group-[.first-row]:border-t-0 lg:before:hidden lg:py-3 lg:table-cell dark:border-base-800" data-label="{% trans 'TTL' %}">
                                        {% if key_info.ttl_expires_at %}
                                        <span class="font-mono text-sm text-base-500 dark:text-base-400" title="{{ key_info.ttl }}s">{{ key_info.ttl_expires_at|timeuntil }}</span>
                                        {% else %}
                                        <span class="text-base-400">-</span>
                                        {% endif %}
                                    </td>
                                    {% endif %}
                                    {% if show_size %}
                                    <td class="px-3 py-2 align-middle flex border-t border-base-200 font-normal gap-4 min-w-0 overflow-hidden text-left before:flex before:capitalize before:content-[attr(data-label)] before:font-semibold before:text-font-important-light dark:before:text-font-important-dark before:items-center before:mr-auto first:border-t-0 lg:group-[.first-row]:border-t-0 lg:before:hidden lg:py-3 lg:table-cell dark:border-base-800" data-label="{% trans 'Size' %}">
                                        {% if key_info.size is not None %}
                                        <span class="font-mono text-sm text-base-500 dark:text-base-400">{{ key_info.size }}</span>
                                        {% else %}
                                        <span class="text-base-400">-</span>
                                        {% endif %}
                                    </td>
                                    {% endif %}
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <!-- No keys found -->
                    <div class="lg:rounded-b-default lg:border lg:border-base-200 lg:shadow-xs lg:dark:border-base-800 lg:bg-white lg:dark:bg-base-900 p-8 text-center">
                        <p class="text-base-500 dark:text-base-400">{% trans 'No keys found.' %}</p>
                    </div>
                    {% endif %}
                </form>

            </div>
        </div>

                {% if key_types %}
                <div id="changelist-filter" class="backdrop-blur-xs bg-base-900/80 flex inset-0 z-60 fixed" x-show="filterOpen" x-cloak>
                    <div id="changelist-filter-close" class="grow" x-on:click="filterOpen = false"></div>
                    <div class="bg-white flex m-4 overflow-hidden rounded-default shadow-xs w-80 dark:bg-base-800">
                        <div class="grow h-full overflow-auto relative">
                            <div class="flex flex-col h-full">
                                <div class="flex flex-col grow gap-4 overflow-auto *:mb-0">
                                    <div class="flex flex-col gap-4 px-3 py-2.5 *:mb-0">
                                        <div>
                                            <h3 class="font-semibold mb-2 text-font-important-light dark:text-font-important-dark">
                                                {% trans 'By type' %}
                                            </h3>
                                            <ul class="flex flex-col dark:bg-base-900 border border-base-200 min-w-20 rounded-default shadow-xs text-font-default-light dark:border-base-700 dark:text-font-default-dark w-full">
                                                <li class="border-b border-base-200 last:border-b-0 dark:border-base-700 {% if not type_filter %}font-semibold text-primary-600 dark:text-primary-500{% else %}hover:text-base-700 dark:hover:text-base-200{% endif %}">
                                                    <a href="?cache={{ cache_name }}{% if search_query %}&amp;q={{ search_query|urlencode }}{% endif %}" title="{% trans 'All' %}" class="block py-2 px-3 hover:text-primary-600 dark:hover:text-primary-500">
                                                        {% trans 'All' %}
                                                    </a>
                                                </li>
                                                {% for kt in key_types %}
                                                <li class="border-b border-base-200 last:border-b-0 dark:border-base-700 {% if type_filter == kt %}font-semibold text-primary-600 dark:text-primary-500{% else %}hover:text-base-700 dark:hover:text-base-200{% endif %}">
                                                    <a href="?cache={{ cache_name }}&amp;type={{ kt }}{% if search_query %}&amp;q={{ search_query|urlencode }}{% endif %}" title="{{ kt }}" class="block py-2 px-3 hover:text-primary-600 dark:hover:text-primary-500">
                                                        {{ kt }}
                                                    </a>
                                                </li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}

    </div>
</div>

{% if keys_data %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const toggle = document.getElementById('action-toggle');
    const checkboxes = document.querySelectorAll('.action-select');
    const counter = document.getElementById('action-counter');

    function updateCounter() {
        const checked = document.querySelectorAll('.action-select:checked').length;
        counter.textContent = checked;
    }

    if (toggle) {
        toggle.addEventListener('change', function() {
            checkboxes.forEach(cb => cb.checked = this.checked);
            updateCounter();
        });
    }

    checkboxes.forEach(cb => cb.addEventListener('change', updateCounter));
});
</script>
{% endif %}
{% endblock %}

{% block footer %}
<div class="px-4 lg:backdrop-blur-xs lg:bg-white/80 lg:flex lg:items-center lg:dark:bg-base-900/80 lg:left-0 lg:right-0 lg:bottom-0 lg:sticky relative z-40 lg:border-t lg:border-base-200 lg:relative lg:scrollable-top lg:dark:border-base-800">
    <div class="flex flex-row grow items-center lg:h-[64px] container mx-auto">
        <div class="py-4">
            {% if total_keys is not None %}
            {{ total_keys }} {% blocktrans count counter=total_keys %}key{% plural %}keys{% endblocktrans %}
            {% else %}
            {{ keys_count }} {% trans 'keys shown' %}
            {% endif %}
        </div>
        <nav class="flex items-center gap-2 ml-auto">
            {% if cursor > 0 %}
            <a href="?cache={{ cache_name }}{% if type_filter %}&amp;type={{ type_filter }}{% endif %}{% if search_query %}&amp;q={{ search_query|urlencode }}{% endif %}&amp;count={{ count }}"
               class="px-3 py-1 text-sm rounded-default hover:bg-base-200 dark:hover:bg-base-700">
                {% trans 'Start' %}
            </a>
            {% endif %}
            {% if has_next %}
            <a href="?cache={{ cache_name }}{% if type_filter %}&amp;type={{ type_filter }}{% endif %}{% if search_query %}&amp;q={{ search_query|urlencode }}{% endif %}&amp;count={{ count }}&amp;cursor={{ next_cursor }}"
               class="px-3 py-1 text-sm rounded-default hover:bg-base-200 dark:hover:bg-base-700">
                {% trans 'Next' %}
            </a>
            {% endif %}
        </nav>
    </div>
</div>
{% endblock %}