{% extends "admin/dj_celery_panel/base.html" %}
{% load i18n static dcr_icons %}

{% block extrahead %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'dj_control_room_base/vendor/highlight-github-dark.min.css' %}">
<script src="{% static 'dj_control_room_base/vendor/highlight.min.js' %}"></script>
{% endblock %}

{% block panel_page_content %}

{% include "admin/dj_celery_panel/_backend_info.html" %}

{% if queue %}

<a href="{% url 'dj_celery_panel:queues' %}" class="dcr-back-link">{% trans "Back to Queues" %}</a>

<div class="dcr-page-header">
  <div class="dcr-page-header__main">
    <div class="dcr-page-header__icon dcr-icon-color--success">
      {% dcr_icon "chart" %}
    </div>
    <div class="dcr-page-header__body">
      <h1 class="dcr-page-header__title dcr-font-mono">{{ queue.name }}</h1>
      <p class="dcr-page-header__subtitle">
        <code class="dcr-code">{{ queue.routing_key }}</code>
      </p>
    </div>
  </div>
</div>

<div class="dcr-section-header">
  <h2 class="dcr-section-header__title">{% trans "Queue Details" %}</h2>
</div>

<dl class="dcr-dl">
  <div class="dcr-dl__row">
    <dt class="dcr-dl__label">{% trans "Queue Depth (Messages)" %}</dt>
    <dd class="dcr-dl__value">
      {% if queue.message_count is not none %}
      <strong>{{ queue.message_count }}</strong>
      {% elif queue.broker_query_error %}
      <span class="dcr-text-muted">
        {% trans "Unable to query broker" %}
        <details class="dcr-mt-sm">
          <summary>{% trans "Show error" %}</summary>
          <code class="dcr-code">{{ queue.broker_query_error }}</code>
        </details>
      </span>
      {% else %}
      <span class="dcr-text-muted">{% trans "Unknown" %}</span>
      {% endif %}
    </dd>
  </div>
  {% if queue.consumer_count is not none %}
  <div class="dcr-dl__row">
    <dt class="dcr-dl__label">{% trans "Active Consumers" %}</dt>
    <dd class="dcr-dl__value">
      <strong>{{ queue.consumer_count }}</strong>
      {% if queue.consumer_count == 0 %}
      <span class="dcr-status-text dcr-status-text--danger">{% trans "No consumers!" %}</span>
      {% endif %}
    </dd>
  </div>
  {% endif %}
  <div class="dcr-dl__row">
    <dt class="dcr-dl__label">{% trans "Exchange" %}</dt>
    <dd class="dcr-dl__value">
      <code class="dcr-code">{{ queue.exchange }}</code>
      {% if queue.exchange_type and queue.exchange_type != "N/A" %}
      <span class="dcr-text-muted">({{ queue.exchange_type }})</span>
      {% endif %}
    </dd>
  </div>
  <div class="dcr-dl__row">
    <dt class="dcr-dl__label">{% trans "Routing Key" %}</dt>
    <dd class="dcr-dl__value"><code class="dcr-code">{{ queue.routing_key }}</code></dd>
  </div>
  <div class="dcr-dl__row">
    <dt class="dcr-dl__label">{% trans "Durable" %}</dt>
    <dd class="dcr-dl__value">
      {% if queue.durable %}
      <span class="dcr-status-text dcr-status-text--success">✓ {% trans "Yes" %}</span>
      {% else %}
      <span class="dcr-status-text dcr-status-text--danger">✗ {% trans "No" %}</span>
      {% endif %}
    </dd>
  </div>
  <div class="dcr-dl__row">
    <dt class="dcr-dl__label">{% trans "Auto Delete" %}</dt>
    <dd class="dcr-dl__value">
      {% if queue.auto_delete %}
      <span class="dcr-status-text dcr-status-text--danger">✓ {% trans "Yes" %}</span>
      {% else %}
      <span class="dcr-status-text dcr-status-text--success">✗ {% trans "No" %}</span>
      {% endif %}
    </dd>
  </div>
  <div class="dcr-dl__row">
    <dt class="dcr-dl__label">{% trans "Exclusive" %}</dt>
    <dd class="dcr-dl__value">
      {% if queue.exclusive %}
      <span class="dcr-status-text dcr-status-text--danger">✓ {% trans "Yes" %}</span>
      {% else %}
      <span class="dcr-status-text dcr-status-text--success">✗ {% trans "No" %}</span>
      {% endif %}
    </dd>
  </div>
  {% if queue.arguments %}
  <div class="dcr-dl__row">
    <dt class="dcr-dl__label">{% trans "Arguments" %}</dt>
    <dd class="dcr-dl__value">
      <div class="dcr-code-viewer">
        <pre class="dcr-code-viewer__body"><code class="language-python">{{ queue.arguments }}</code></pre>
      </div>
    </dd>
  </div>
  {% endif %}
  <div class="dcr-dl__row">
    <dt class="dcr-dl__label">{% trans "Active on Workers" %}</dt>
    <dd class="dcr-dl__value">
      <strong>{{ queue.workers|length }}</strong> {% trans "worker(s)" %}
      <ul class="dcr-mt-sm">
        {% for worker in queue.workers %}
        <li>
          <a href="{% url 'dj_celery_panel:worker_detail' worker %}" class="dcr-data-table__link">
            <code class="dcr-code">{{ worker }}</code>
          </a>
        </li>
        {% endfor %}
      </ul>
    </dd>
  </div>
  {% if queue.exchange_json %}
  <div class="dcr-dl__row">
    <dt class="dcr-dl__label">{% trans "Exchange Configuration" %}</dt>
    <dd class="dcr-dl__value">
      <details>
        <summary>{% trans "Show exchange details" %}</summary>
        <div class="dcr-code-viewer dcr-mt-sm">
          <pre class="dcr-code-viewer__body"><code class="language-json">{{ queue.exchange_json }}</code></pre>
        </div>
      </details>
    </dd>
  </div>
  {% endif %}
  {% if queue.worker_configs_json %}
  <div class="dcr-dl__row">
    <dt class="dcr-dl__label">{% trans "Worker Queue Configurations" %}</dt>
    <dd class="dcr-dl__value">
      <details>
        <summary>{% trans "Show worker configurations" %}</summary>
        <div class="dcr-code-viewer dcr-mt-sm">
          <pre class="dcr-code-viewer__body"><code class="language-json">{{ queue.worker_configs_json }}</code></pre>
        </div>
      </details>
    </dd>
  </div>
  {% endif %}
</dl>

{% else %}

<div class="dcr-empty">
  <h2 class="dcr-empty__title">{% trans "Queue Not Found" %}</h2>
  <p class="dcr-empty__body">{% trans "The requested queue could not be found." %}</p>
  <div class="dcr-empty__links">
    <a href="{% url 'dj_celery_panel:queues' %}" class="dcr-btn dcr-btn--primary">{% trans "Back to Queues" %}</a>
  </div>
</div>

{% endif %}
{% endblock %}

{% block panel_scripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('pre.dcr-code-viewer__body code[class*="language-"]').forEach(function (el) {
        hljs.highlightElement(el);
    });
});
</script>
{% endblock %}