templates/queue_partial.html

<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
  <div class="bg-gray-50 rounded-lg p-3">
    <div class="text-sm text-gray-500">📋 في الانتظار</div>
    <div class="text-3xl font-bold">{{ queue.queued }}</div>
  </div>
  <div class="bg-gray-50 rounded-lg p-3">
    <div class="text-sm text-gray-500">⚡ قيد التشغيل</div>
    <div class="text-3xl font-bold {% if queue.active %}text-green-500{% else %}text-gray-400{% endif %}">
      {% if queue.active %}
        <span class="animate-pulse">🟢</span>
      {% else %}
        ⚪
      {% endif %}
    </div>
    <div class="text-xs {% if queue.active %}text-green-500{% else %}text-gray-400{% endif %}">
      {{ 'يعمل' if queue.active else 'متوقف' }}
    </div>
  </div>
  <div class="bg-gray-50 rounded-lg p-3">
    <div class="text-sm text-gray-500">👷 العمال</div>
    <div class="text-3xl font-bold text-blue-500">{{ queue.get('workers', 1) }}</div>
    <div class="text-xs text-gray-400">worker متزامن</div>
  </div>
  <div class="bg-gray-50 rounded-lg p-3">
    <div class="text-sm text-gray-500">📊 السعة القصوى</div>
    <div class="text-3xl font-bold text-purple-500">{{ queue.maxsize }}</div>
    <div class="text-xs text-gray-400">ملف كحد أقصى</div>
  </div>
</div>
{% if queue.get('shutdown', False) %}
<div class="mt-2 bg-red-100 text-red-700 p-2 rounded text-center text-sm">
  ⛔ الطابور متوقف عن العمل
</div>
{% endif %}