{% load i18n %}

{% trans "Page Header" %}

{% trans "The page header sits at the top of every panel view. It supports four compositions: plain title, panel overview (icon + title + status pill + subtitle), detail page (back link + icon + title + badge(s) + meta + actions), and minimal with actions." %}

{% trans "Cache Keys" %}

{% trans "Usage" %}

<div class="dcr-page-header">
  <h1 class="dcr-page-header__title">Cache Keys</h1>
  <div class="dcr-page-header__actions">
    <button class="dcr-btn">Flush All</button>
  </div>
</div>

{% trans "Errors Panel" %}

{% trans "19 UNRESOLVED" %}

{% trans "Track unhandled exceptions captured from views, middleware, and Celery tasks. Drill into any event for traceback and frame locals." %}

{% trans "Signals Panel" %}

{% trans "CONNECTED" %}

{% trans "Inspect every signal registered in your Django project, including built in and custom signals." %}

{% trans "Usage" %}

<div class="dcr-page-header">
  <div class="dcr-page-header__main">
    <div class="dcr-page-header__icon" style="background:var(--dcr-color-danger)">
      <svg ...></svg>
    </div>
    <div class="dcr-page-header__body">
      <div class="dcr-page-header__title-row">
        <h1 class="dcr-page-header__title">Errors Panel</h1>
        <span class="dcr-pill dcr-pill--danger"><span class="dcr-pill__dot"></span>19 UNRESOLVED</span>
      </div>
      <p class="dcr-page-header__subtitle">Track unhandled exceptions…</p>
    </div>
  </div>
</div>
{% trans "Back to all errors" %}

KeyError

ERROR

'stripe_customer_id'

{% trans "event" %} evt-9f3a2b1c · {% trans "group" %} g-9c1

{% trans "Usage" %}

<a href="..." class="dcr-back-link">Back to all errors</a>

<div class="dcr-page-header">
  <div class="dcr-page-header__main">
    <div class="dcr-page-header__icon" style="background:var(--dcr-color-danger)">
      <svg ...></svg>
    </div>
    <div class="dcr-page-header__body">
      <div class="dcr-page-header__title-row">
        <h1 class="dcr-page-header__title">KeyError</h1>
        <span class="dcr-badge dcr-badge--solid dcr-badge--danger">ERROR</span>
      </div>
      <p class="dcr-page-header__subtitle">'stripe_customer_id'</p>
      <p class="dcr-page-header__meta">event evt-9f3a2b1c · group g-9c1</p>
    </div>
  </div>
  <div class="dcr-page-header__actions">
    <button class="dcr-btn dcr-btn--ghost dcr-btn--sm">Copy event ID</button>
    <button class="dcr-btn dcr-btn--success dcr-btn--ghost dcr-btn--sm">✓ Resolve</button>
    <button class="dcr-btn dcr-btn--ghost dcr-btn--sm">✕ Ignore</button>
  </div>
</div>
{% trans "Back to all signals" %}

post_save

BUILT-IN {% trans "4 RECEIVERS" %}

{% trans "Sent at the end of a model's save() method. Receivers can react to updated rows by inspecting the created flag and the instance." %}

{% trans "Usage" %}

<a href="..." class="dcr-back-link">Back to all signals</a>

<div class="dcr-page-header">
  <div class="dcr-page-header__main">
    <div class="dcr-page-header__icon" style="background:var(--dcr-color-accent)">
      <svg ...></svg>
    </div>
    <div class="dcr-page-header__body">
      <div class="dcr-page-header__title-row">
        <h1 class="dcr-page-header__title" style="font-family:var(--dcr-font-mono)">post_save</h1>
        <span class="dcr-badge dcr-badge--muted">BUILT-IN</span>
        <span class="dcr-pill dcr-pill--success"><span class="dcr-pill__dot"></span>4 RECEIVERS</span>
      </div>
      <p class="dcr-page-header__subtitle">Sent at the end of a model's save() method…</p>
    </div>
  </div>
</div>

{% trans "Content Width" %}

{% trans "Centered, max-width wrappers for panel content. Wrap your " %}dcr-page-header{% trans " and body content in " %}dcr-content{% trans " with a size modifier. Most panels should use " %}--lg{% trans "." %}

{% for width, maxw in widths %}{% endfor %}
full
xl · 1600px
lg · 1280px
md · 960px
sm · 640px

{% trans "Usage" %}

<!-- modifiers: sm (640px) · md (960px) · lg (1280px) · xl (1600px) · full -->
<div class="dcr-content dcr-content--lg">
  <div class="dcr-page-header">…</div>
  <!-- panel body -->
</div>

{% trans "Section Header" %}

{% trans "Uppercase label used to head sub-sections on a panel page. Default variant extends a midline rule to full width. Add " %}--plain{% trans " to suppress the rule. Optionally place a badge inline." %}

{% trans "Key Information" %}

{% trans "Stored Value" %}

HASH

{% trans "Overview" %}

{% trans "Recent Events" %}

12

{% trans "Usage" %}

<!-- default: midline rule -->
<div class="dcr-section-header">
  <h2 class="dcr-section-header__title">Key Information</h2>
</div>

<!-- with inline badge -->
<div class="dcr-section-header">
  <h2 class="dcr-section-header__title">Stored Value</h2>
  <span class="dcr-badge dcr-badge--warning">HASH</span>
</div>

<!-- plain: no rule -->
<div class="dcr-section-header dcr-section-header--plain">
  <h2 class="dcr-section-header__title">Overview</h2>
</div>

{% trans "Callout" %}

{% trans "Static informational panel with a left-border accent. For persistent guidance, not flash messages." %}

Default callout with no modifier.

Info

Use for contextual guidance and configuration notes.

Success

Operation completed without errors.

Warning

Check your configuration before proceeding.

Danger

This action cannot be undone.

{% trans "Usage" %}

<!-- modifiers: (none) · info · success · warning · danger -->
<div class="dcr-callout dcr-callout--info">
  <p class="dcr-callout__title">Info</p>
  <p class="dcr-callout__body">Contextual guidance here.</p>
</div>

{% trans "Danger Zone" %}

{% trans "Visually isolated section for irreversible operations. Always pair with a confirmation mechanism." %}

{% trans "Flush all cache keys" %}

{% trans "Permanently deletes every key in the selected cache backend. This cannot be undone." %}

{% trans "Usage" %}

<div class="dcr-danger-zone">
  <p class="dcr-danger-zone__title">Flush all cache keys</p>
  <p class="dcr-danger-zone__body">Permanently deletes every key…</p>
  <button class="dcr-btn dcr-btn--danger">Flush cache</button>
</div>

{% trans "Code" %}

{% trans "Monospace display for keys, values, payloads, or any machine-readable content. Inline and block variants." %}

{% trans "Cache key:" %} sessions:abc123def456

{"status": "ok", "workers": 4, "queues": ["default", "high"]}

{% trans "Usage" %}

{# Inline #}
<code class="dcr-code">sessions:abc123</code>

{# Block #}
<code class="dcr-code dcr-code--block">{"status": "ok"}</code>

{% trans "Steps" %}

{% trans "Numbered installation or wizard steps with done/pending states. A vertical connector line links steps and turns green as steps complete. Use " %}dcr-steps__step--done{% trans " on completed steps. Step content can include plain text, code snippets, or any other markup." %}

  1. {% trans "Install the package" %}

    {% trans "Add the panel to your project via pip." %}
    pip install dj-redis-panel
  2. 2

    {% trans "Add to INSTALLED_APPS" %}

    {% trans "Register the app in your Django settings." %}
    INSTALLED_APPS = [ # ... "dj_redis_panel", ]
  3. 3

    {% trans "Restart & visit the admin" %}

    {% trans "Restart your Django server. The panel appears automatically in Control Room." %}

{% trans "Usage" %}

<div class="dcr-card">
<div class="dcr-card__body">
<ol class="dcr-steps">

  <!-- Completed step -->
  <li class="dcr-steps__step dcr-steps__step--done">
    <div class="dcr-steps__indicator">
      <svg ...checkmark...></svg>
    </div>
    <div class="dcr-steps__body">
      <h4 class="dcr-steps__title">Install the package</h4>
      <div class="dcr-steps__content">
        <span class="dcr-d-block dcr-text-sm dcr-text-muted dcr-mb-sm">Subtitle text.</span>
        <div style="position:relative">
          <code class="dcr-code dcr-code--block" style="margin:0;padding-right:2.5rem">pip install dj-redis-panel</code>
          <button class="dcr-btn dcr-btn--ghost dcr-btn--sm"
                  style="position:absolute;top:50%;right:var(--dcr-space-xs);transform:translateY(-50%)">
            <svg ...copy icon...></svg>
          </button>
        </div>
      </div>
    </div>
  </li>

  <!-- Pending step -->
  <li class="dcr-steps__step">
    <div class="dcr-steps__indicator">2</div>
    <div class="dcr-steps__body">
      <h4 class="dcr-steps__title">Restart &amp; visit the admin</h4>
      <div class="dcr-steps__content"><p>...</p></div>
    </div>
  </li>

</ol>
</div>
</div>