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

{% block extrastyle %}{{ block.super }}
  <link rel="stylesheet" href="{% static 'django_approve/change_request.css' %}">
{% endblock %}

{% block breadcrumbs %}
  <div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">Home</a>
    &rsaquo; <a href="{{ changelist_url }}">{{ opts.verbose_name_plural|capfirst }}</a>
    &rsaquo; {{ title }}
  </div>
{% endblock %}

{% block content %}
  <div class="dja-queue">
    <section class="dja-queue-tier dja-queue-tier--kpi">
      <div class="dja-card dja-card--hero">
        <p class="dja-queue-hero__headline">
          <a class="dja-queue-hero__count" href="{{ changelist_url }}?{{ total.query }}">{{ total.count }}</a>
          {% if trend %}
            <span class="dja-queue-delta dja-queue-delta--{{ trend.tone }}">
              {% if trend.percent > 0 %}&uarr;{% elif trend.percent < 0 %}&darr;{% else %}&ndash;{% endif %}
              {{ trend.percent }}%
              <span class="dja-queue-delta__note">vs previous {{ trend_days }} days</span>
            </span>
          {% endif %}
        </p>
        <p class="dja-queue-hero__label">waiting for review</p>

        {% if composition %}
          <span class="dja-queue-mix">
            {% for segment in composition %}
              <span class="dja-queue-mix__segment dja-queue-mix__segment--{{ segment.slot }}"
                    style="width: {{ segment.share|unlocalize }}%"></span>
            {% endfor %}
          </span>
          <ul class="dja-queue-mix__legend">
            {% for segment in composition %}
              <li class="dja-queue-mix__key dja-queue-mix__key--{{ segment.slot }}">
                {% if segment.query %}
                  <a href="{{ changelist_url }}?{{ segment.query }}">{{ segment.label }} {{ segment.count }}</a>
                {% else %}
                  {{ segment.label }} {{ segment.count }}
                {% endif %}
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </div>

      {% for tile in tiles %}
        <a class="dja-card dja-card--stat" href="{{ changelist_url }}?{{ tile.query }}">
          <span class="dja-queue-stat__label">{{ tile.label }}</span>
          <span class="dja-queue-stat__value">{{ tile.count }}</span>
          {% if tile.note %}<span class="dja-queue-stat__note">{{ tile.note }}</span>{% endif %}
        </a>
      {% endfor %}
      {% if oldest %}
        <a class="dja-card dja-card--stat" href="{{ oldest.url }}">
          <span class="dja-queue-stat__label">Oldest</span>
          <span class="dja-queue-stat__value">{{ oldest.days }}<span class="dja-queue-stat__unit">d</span></span>
          <span class="dja-queue-stat__note">since {{ oldest.since|date:"j M" }}</span>
        </a>
      {% else %}
        <div class="dja-card dja-card--stat">
          <span class="dja-queue-stat__label">Oldest</span>
          <span class="dja-queue-stat__value">&mdash;</span>
        </div>
      {% endif %}

      <figure class="dja-card dja-card--trend dja-queue-trend">
        <figcaption>
          Arrivals per day &middot; last {{ arrivals.days }} days
          <span class="dja-queue-trend__scale">{{ arrivals.total }} total &middot; peak {{ arrivals.peak }}</span>
        </figcaption>
        <div class="dja-queue-trend__plot">
          {% for bar in arrivals.bars %}
            <span class="dja-queue-trend__slot" tabindex="0" title="{{ bar.date|date:'j M' }}: {{ bar.count }}">
              <span class="dja-queue-trend__value{% if bar.is_peak %} dja-queue-trend__value--peak{% endif %}">
                {{ bar.count }}
              </span>
              {% if bar.count %}
                <span class="dja-queue-trend__bar" style="height: {{ bar.height|unlocalize }}%"></span>
              {% endif %}
            </span>
          {% endfor %}
        </div>
        <p class="dja-queue-trend__axis">
          <span>{{ arrivals.starts|date:"j M" }}</span>
          <span>{{ arrivals.ends|date:"j M" }} &middot; today</span>
        </p>
        <ol class="dja-queue-trend__values">
          {% for bar in arrivals.bars %}
            <li>{{ bar.date|date:"j M" }}: {{ bar.count }}</li>
          {% endfor %}
        </ol>
        <p class="dja-queue-trend__throughput">
          Closed <strong>{{ throughput.closed }}</strong>
          {% if throughput.median %}
            &middot; median <strong>{{ throughput.median }}</strong> to decide
          {% endif %}
          {% if throughput.withdrawn %}
            <span class="dja-queue-trend__withdrawn">
              Withdrawn <strong>{{ throughput.withdrawn }}</strong>
              {% if throughput.withdrawn_share %}
                &middot; <strong>{{ throughput.withdrawn_share }}%</strong> of arrivals
              {% endif %}
            </span>
          {% endif %}
        </p>
      </figure>
    </section>

    {% if is_empty %}
      <p class="dja-queue-empty">Nothing is waiting for review.</p>
    {% else %}
      {% if needs_attention or mine %}
        <section class="dja-queue-tier dja-queue-tier--work">
          {% if needs_attention %}
            {% include "django_approve/queue_request_list.html" with heading="Needs attention" note=attention_note rows=needs_attention is_stale=True %}
          {% endif %}
          {% if mine %}
            {% include "django_approve/queue_request_list.html" with heading="My queue" note="locked to me" rows=mine is_stale=False %}
          {% endif %}
        </section>
      {% endif %}

      <div class="dja-queue-tier dja-queue-tier--slices">
        <div class="dja-card">
          {% include "django_approve/queue_table.html" with caption="By assignee" rows=by_assignee %}
        </div>
        <div class="dja-card">
          {% include "django_approve/queue_table.html" with caption="By target model" rows=by_target_model %}
        </div>
        <div class="dja-card">
          {% include "django_approve/queue_table.html" with caption="By age" rows=by_age %}
        </div>
      </div>
      <p class="dja-queue-note">
        Queue figures cover every pending request, not the current changelist filter.
        Arrivals, closed and withdrawn count requests of any status inside their window.
      </p>
    {% endif %}
  </div>
{% endblock %}