{% extends "admin/base_site.html" %}

{% load static %}

{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{% static 'admin/css/changelists.css' %}">
  <style>
    #content-main {
      --djq-tab-selected-bg: var(--primary);
      --djq-tab-selected-border: var(--primary);
      --djq-tab-selected-fg: var(--primary-fg);
      --djq-tab-selected-count-fg: var(--breadcrumbs-link-fg);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme="light"]) #content-main {
        --djq-tab-selected-bg: var(--selected-row);
        --djq-tab-selected-border: var(--link-selected-fg);
        --djq-tab-selected-fg: var(--body-fg);
        --djq-tab-selected-count-fg: var(--body-quiet-color);
      }
    }

    html[data-theme="dark"] #content-main {
      --djq-tab-selected-bg: var(--selected-row);
      --djq-tab-selected-border: var(--link-selected-fg);
      --djq-tab-selected-fg: var(--body-fg);
      --djq-tab-selected-count-fg: var(--body-quiet-color);
    }

    #toolbar .queue-toolbar-row,
    #toolbar .queue-toolbar-meta,
    #toolbar .queue-toolbar-links,
    .queue-state-tabs {
      display: flex;
      gap: 0.75rem 1.25rem;
      flex-wrap: wrap;
      align-items: center;
    }

    #toolbar .queue-toolbar-row {
      justify-content: space-between;
    }

    #toolbar .queue-toolbar-actions {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
      justify-content: flex-end;
      margin-left: auto;
    }

    #toolbar .queue-toolbar-actions form {
      margin: 0;
    }

    #toolbar .queue-toolbar-meta strong {
      text-transform: uppercase;
    }

    #toolbar .queue-toolbar-actions button {
      border: none;
      border-radius: 15px;
      min-height: 28px;
      padding: 5px 12px;
      background: var(--object-tools-bg);
      color: var(--object-tools-fg);
      font-weight: 400;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      cursor: pointer;
    }

    #toolbar .queue-toolbar-actions button:hover,
    #toolbar .queue-toolbar-actions button:focus {
      background-color: var(--object-tools-hover-bg);
    }

    #toolbar .queue-toolbar-actions .queue-button-pause,
    #toolbar .queue-toolbar-actions .queue-button-resume {
      color: #fff;
    }

    #toolbar .queue-toolbar-actions .queue-button-pause {
      background: #b86a00;
    }

    #toolbar .queue-toolbar-actions .queue-button-pause:hover,
    #toolbar .queue-toolbar-actions .queue-button-pause:focus {
      background: #965400;
    }

    #toolbar .queue-toolbar-actions .queue-button-resume {
      background: #2f7d4a;
    }

    #toolbar .queue-toolbar-actions .queue-button-resume:hover,
    #toolbar .queue-toolbar-actions .queue-button-resume:focus {
      background: #25633b;
    }

    #toolbar .queue-toolbar-links {
      margin-top: 0.5rem;
    }

    .toplinks.queue-state-tabs {
      gap: 1rem;
      margin-top: 0.75rem;
      padding: 0.45rem;
      border: 1px solid var(--hairline-color);
      background: var(--darkened-bg);
    }

    .queue-state-tab {
      display: inline-flex;
      gap: 0.4rem;
      align-items: center;
      min-height: 2.15rem;
      padding: 0 0.9rem;
      border: 1px solid var(--border-color);
      border-radius: 999px;
      background: var(--body-bg);
      color: var(--link-fg);
      font-weight: 600;
      text-decoration: none;
      transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    }

    #changelist .queue-state-tabs a.queue-state-tab,
    #changelist .queue-state-tabs a.queue-state-tab:hover,
    #changelist .queue-state-tabs a.queue-state-tab:focus,
    #changelist .queue-state-tabs a.queue-state-tab:visited {
      text-decoration: none;
    }

    .queue-state-tab:not(.queue-state-tab-current):hover,
    .queue-state-tab:not(.queue-state-tab-current):focus {
      background: var(--selected-bg);
      border-color: var(--primary);
      color: var(--link-hover-color);
      text-decoration: none;
    }

    .queue-state-tab-current {
      background: var(--djq-tab-selected-bg);
      border-color: var(--djq-tab-selected-border);
      color: var(--djq-tab-selected-fg);
      box-shadow: none;
    }

    .queue-state-tab-current:hover,
    .queue-state-tab-current:focus {
      background: var(--djq-tab-selected-bg);
      border-color: var(--djq-tab-selected-border);
      color: var(--djq-tab-selected-fg);
    }

    .queue-state-tab-count {
      color: var(--body-quiet-color);
      font-size: 0.82rem;
      font-weight: 700;
    }

    .queue-state-tab-current .queue-state-tab-count {
      color: var(--djq-tab-selected-count-fg);
    }

    .queue-state-tab-current:hover .queue-state-tab-count,
    .queue-state-tab-current:focus .queue-state-tab-count {
      color: var(--djq-tab-selected-count-fg);
    }

    #result_list {
      min-width: 52rem;
    }

    #result_list code {
      white-space: pre-wrap;
      word-break: break-word;
    }
  </style>
{% endblock extrastyle %}

{% block bodyclass %}
  {{ block.super }} app-dj_queue model-dashboard change-list
{% endblock bodyclass %}

{% block breadcrumbs %}
  <div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">Home</a>
    › <a href="{% url 'admin:dj_queue_dashboard_changelist' %}?backend={{ backend_alias }}">dj_queue</a>
    › <a href="{% url 'admin:dj_queue_dashboard_changelist' %}?backend={{ backend_alias }}#queue-summary">queues</a>
    › {{ queue_name }}
  </div>
{% endblock breadcrumbs %}

{% block content_title %}
  <h1>
    <a href="{% url 'admin:dj_queue_dashboard_changelist' %}?backend={{ backend_alias }}">dj_queue</a>
    › <a href="{% url 'admin:dj_queue_dashboard_changelist' %}?backend={{ backend_alias }}#queue-summary">queues</a>
    › {{ queue_name }}
  </h1>
{% endblock content_title %}

{% block content_subtitle %}{% endblock content_subtitle %}

{% block content %}
  <div id="content-main">
    <div class="module" id="changelist">
      <div class="changelist-form-container">
        <div>
          <div id="toolbar">
            <div class="queue-toolbar-row">
              <div class="queue-toolbar-meta">
                <span><strong>Backend:</strong> {{ backend_alias }}</span>
                <span><strong>Database:</strong> {{ queue_database_alias }}</span>
                <span><strong>Paused:</strong> {{ queue_paused|yesno:"yes,no" }}</span>
              </div>
              <div class="queue-toolbar-actions">
                <form method="post" action="{% url 'admin:dj_queue_dashboard_queue_action' queue_name %}">
                  {% csrf_token %}
                  <input type="hidden" name="backend" value="{{ backend_alias }}">
                  <input type="hidden" name="next" value="{{ request.get_full_path }}">
                  <input type="hidden" name="action" value="{% if queue_paused %}resume{% else %}pause{% endif %}">
                  <button type="submit" class="{% if queue_paused %}queue-button-resume{% else %}queue-button-pause{% endif %}">{% if queue_paused %}resume{% else %}pause{% endif %}</button>
                </form>
                <form method="post" action="{% url 'admin:dj_queue_dashboard_queue_action' queue_name %}">
                  {% csrf_token %}
                  <input type="hidden" name="backend" value="{{ backend_alias }}">
                  <input type="hidden" name="next" value="{{ request.get_full_path }}">
                  <input type="hidden" name="action" value="clear">
                  <button type="submit">clear ready</button>
                </form>
              </div>
            </div>
            {% if raw_links %}
              <div class="queue-toolbar-links">
                {% for link in raw_links %}
                  <a href="{{ link.url }}">{{ link.label }}</a>
                {% endfor %}
              </div>
            {% endif %}
          </div>

          <div class="toplinks queue-state-tabs" aria-label="Job state navigation">
            {% for tab in state_tabs %}
              {% if tab.selected %}
                <span class="queue-state-tab queue-state-tab-current" aria-current="page">
                  <span>{{ tab.label }}</span>
                  <span class="queue-state-tab-count">{{ tab.count }}</span>
                </span>
              {% else %}
                <a class="queue-state-tab" href="{% url 'admin:dj_queue_dashboard_queue' queue_name %}?backend={{ backend_alias }}&state={{ tab.name }}">
                  <span>{{ tab.label }}</span>
                  <span class="queue-state-tab-count">{{ tab.count }}</span>
                </a>
              {% endif %}
            {% endfor %}
          </div>

          <form id="changelist-form" method="post" action="{% url 'admin:dj_queue_dashboard_job_action' queue_name %}" novalidate>
            {% csrf_token %}
            <input type="hidden" name="backend" value="{{ backend_alias }}">
            <input type="hidden" name="state" value="{{ state }}">
            <input type="hidden" name="next" value="{{ request.get_full_path }}">

            {% if job_actions and jobs %}
              <div class="actions">
                <label for="action">Action:
                  <select name="action" id="action">
                    <option value="" selected>---------</option>
                    {% for action in job_actions %}
                      <option value="{{ action.name }}">{{ action.label }}</option>
                    {% endfor %}
                  </select>
                </label>
                <button type="submit" class="button" name="index" value="0">Run</button>
                <span class="action-counter" data-actions-icnt="{{ jobs|length }}">0 of {{ jobs|length }} selected</span>
              </div>
            {% endif %}

            {% if jobs %}
              <div class="results">
                <table id="result_list">
                  <thead>
                    <tr>
                      {% if job_actions %}
                        <th scope="col" class="action-checkbox-column">
                          <div class="text"><span><input type="checkbox" id="action-toggle"></span></div>
                          <div class="clear"></div>
                        </th>
                      {% endif %}
                      {% for header in table_headers %}
                        <th scope="col"{{ header.class_attrib|safe }}>
                          {% if header.sortable and header.sorted %}
                            <div class="sortoptions">
                              <a class="sortremove" href="{{ header.url_remove }}" title="Remove from sorting"></a>
                              {% if header.sort_priority %}<span class="sortpriority" title="Sorting priority: {{ header.sort_priority }}">{{ header.sort_priority }}</span>{% endif %}
                              <a href="{{ header.url_toggle }}" class="toggle {{ header.ascending|yesno:'ascending,descending' }}" title="Toggle sorting"></a>
                            </div>
                          {% endif %}
                          <div class="text"><a role="button" href="{{ header.url_primary }}">{{ header.text|capfirst }}</a></div>
                          <div class="clear"></div>
                        </th>
                      {% endfor %}
                    </tr>
                  </thead>
                  <tbody>
                    {% for job in jobs %}
                      <tr class="{% cycle 'row1' 'row2' %}">
                        {% if job_actions %}
                          <td class="action-checkbox"><input type="checkbox" class="action-select" name="job_ids" value="{{ job.id }}"></td>
                        {% endif %}
                        <th scope="row">
                          <a href="{% url 'admin:dj_queue_job_change' job.id %}?backend={{ backend_alias }}"><code>{{ job.id }}</code></a>
                        </th>
                        <td>{{ job.task_path }}</td>
                        <td>{{ job.priority }}</td>
                        <td>{{ job.created_at|date:"Y-m-d H:i:s" }}</td>
                        {% if state == "claimed" %}
                          <td>{{ job.claimed_execution.process.name|default:"-" }}</td>
                          <td>{{ job.claimed_execution.created_at|date:"Y-m-d H:i:s" }}</td>
                        {% elif state == "scheduled" %}
                          <td>{{ job.scheduled_execution.scheduled_at|date:"Y-m-d H:i:s" }}</td>
                        {% elif state == "blocked" %}
                          <td>{{ job.blocked_execution.concurrency_key }}</td>
                          <td>{{ job.blocked_execution.expires_at|date:"Y-m-d H:i:s" }}</td>
                        {% elif state == "failed" %}
                          <td>{{ job.failed_execution.exception_class }}</td>
                          <td>{{ job.failed_execution.message }}</td>
                        {% elif state == "finished" %}
                          <td>{{ job.finished_at|date:"Y-m-d H:i:s" }}</td>
                          <td><code>{{ job.return_value }}</code></td>
                        {% endif %}
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            {% else %}
              <p class="paginator">No {{ state_label }} jobs in {{ queue_name }}.</p>
            {% endif %}

            <div class="changelist-footer">
              <nav class="paginator" aria-labelledby="pagination">
                <h2 id="pagination" class="visually-hidden">Pagination jobs</h2>
                {% if page_links %}
                  <ul>
                    {% for link in page_links %}
                      <li>
                        {% if link.is_ellipsis %}
                          {{ link.label }}
                        {% elif link.is_current %}
                          <span class="this-page">{{ link.number }}</span>
                        {% else %}
                          <a href="{{ link.url }}">{{ link.number }}</a>
                        {% endif %}
                      </li>
                    {% endfor %}
                  </ul>
                {% endif %}
                {{ result_count_text }}
              </nav>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}