{% extends "base.html" %}
{% block content %}

<script>
  const IDLE_TIME = 10000;      // 10 seconds of inactivity required after user activity
  const MIN_REFRESH_GAP = 20000; // 20 seconds minimum between refreshes

  function recordInteraction() {

    // Reset idle timer
    if (idleTimeout) {
      clearTimeout(idleTimeout);
    }

    idleTimeout = setTimeout(checkAndRefresh, IDLE_TIME);
  }

  function checkAndRefresh() {
    window.location.reload(true);
    idleTimeout = setTimeout(checkAndRefresh, MIN_REFRESH_GAP);
  }

  // User activity listeners
  ["click", "touchstart", "keydown"].forEach(event => {
    document.addEventListener(event, recordInteraction, { passive: true });
  });

  // Start idle timer on load
  idleTimeout = setTimeout(checkAndRefresh, MIN_REFRESH_GAP);

  document.addEventListener("visibilitychange", () => {
    if (document.hidden && idleTimeout) clearTimeout(idleTimeout);
    if (!document.hidden) checkAndRefresh();
  });

  // handle Checboc clicks
  function handleCBClick(cb) {
    lappQueueItemRequest('/item_update/'+cb.name+'/'+cb.checked, {
      coalesceKey: 'checked:' + cb.name
    });
  }
</script>



<div class="list-group">
    {% for item in items %}
<label class="list-group-item {% if item.is_checked %}text-muted{% endif %} d-flex justify-content-between">
    <div>
    <input class="form-check-input me-1" type="checkbox" value="" name="{{ item.id }}" {% if item.is_checked %}CHECKED{% endif %} onclick='handleCBClick(this);'>
    {{ item.label }}
    </div>
    <div>
    {% if item.quantity > 1 or item.unit != 'x' %}
      {{ item.quantity }}{{ item.unit }}
    {% endif %}
    <img src="/static/categories/{{ item.category }}.svg" style="height: 2em;" alt="...">
    </div>
</label>
    {% endfor %}
</div>




{% endblock %}