rar-autopass/app/web/templates/_status.html

<style>
  /* Pill-uri categorii blocate (US-003 PRD 5.10)
     Culoarea e injectata inline (color_var: --warn / --err) dupa DESIGN.md:
       Lipsa cod = --warn (chihlimbar), Date incomplete + Eroare = --err (rosu).
     Activ = fundal pe culoarea categoriei (NU accent albastru — S1/A5). */
  .pill-cat { transition: background 0.15s, color 0.15s; }
  .pill-cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* Activ: background = culoarea categoriei (currentColor = var(--err/--warn) din inline style),
     text = var(--card) (contrast AA). NU accent albastru (S1/A5 DESIGN.md). */
  .pill-cat[aria-pressed="true"] { background: currentColor !important; color: var(--card) !important; border-color: currentColor !important; }
  .pill-cat[aria-pressed="true"] span { background: var(--card) !important; color: currentColor; }
</style>
<div id="status-bar" class="status-bar card"
     hx-get="/_fragments/status"
     hx-trigger="every 15s"
     hx-swap="outerHTML">

  <!-- Cont in asteptare de activare (regasit din vechiul _banner; mereu vizibil) -->
  {% if not account_active %}
  <div style="margin-bottom:12px; padding:8px 10px; border-left:3px solid var(--warn);
              background:color-mix(in srgb, var(--warn) 12%, var(--card)); border-radius:6px; font-size:13px;">
    <strong>Cont in asteptare de activare.</strong>
    Configureaza credentialele RAR si pregateste importul acum; trimiterea catre RAR
    porneste automat dupa activare de catre administrator.
  </div>
  {% endif %}

  <!-- Rand 1: doua bife binare + ultima autentificare -->
  <div style="display:flex; gap:28px; flex-wrap:wrap; align-items:center; font-size:14px;">

    {# Bifa: glifa (✓/✗) + culoare + text — accesibil (nu doar culoare, design review) #}
    {% macro bifa(ok, text, tip) %}
      <span title="{{ tip }}" style="display:inline-flex; align-items:center; gap:7px;">
        {% if ok %}
        <span class="s-sent" aria-hidden="true" style="font-weight:bold;">&#10003;</span>
        <span class="s-sent">{{ text }}</span>
        {% else %}
        <span class="s-error" aria-hidden="true" style="font-weight:bold;">&#10007;</span>
        <span class="s-error">{{ text }}</span>
        {% endif %}
      </span>
    {% endmacro %}

    {{ bifa(worker_ok, worker_lbl[0], worker_lbl[1]) }}
    {{ bifa(rar_ok, rar_lbl[0], rar_lbl[1]) }}

    <span style="display:inline-flex; align-items:center; gap:6px;">
      <span class="muted">{{ eticheta_ultima_auth }}:</span>
      <span>{{ last_login }}</span>
    </span>
  </div>

  <!-- Rand 2: contoare coada -->
  <div style="margin-top:10px; display:flex; gap:20px; flex-wrap:wrap; font-size:14px;">
    <span><span class="muted">In asteptare:</span> <span class="s-queued">{{ counts_queued }}</span></span>
    <span><span class="muted">Declarate la RAR:</span> <span class="s-sent">{{ counts_sent }}</span></span>
    <span><span class="muted">Blocate:</span>
      <span class="{{ 's-error' if blocate_total else 'muted' }}">{{ blocate_total }}</span>
    </span>
  </div>

  <!-- Pill-uri categorii blocate (US-003 PRD 5.10): inlocuiesc lista de ID-uri.
       <button> reale cu aria-pressed, focalizabile, activare Enter/Space.
       Inactiv = contur+text pe culoarea categoriei; activ = umplere pe culoarea categoriei.
       Pill ascuns cand n=0 (lista pills_categorii filtreaza deja). -->
  {% if pills_categorii %}
  <div style="margin-top:12px; padding-top:10px; border-top:1px solid var(--line);">
    <div style="display:flex; gap:8px; flex-wrap:wrap; align-items:center;">
      <span style="font-size:12px; color:var(--muted);">Necesita atentie:</span>
      {% for pill in pills_categorii %}
      <button type="button"
              class="pill-cat"
              aria-pressed="false"
              hx-get="/_fragments/submissions?status={{ pill.status }}"
              hx-target="#submissions-wrap"
              hx-swap="innerHTML"
              onclick="(function(b){
                var pressed=b.getAttribute('aria-pressed')==='true';
                document.querySelectorAll('.pill-cat').forEach(function(x){x.setAttribute('aria-pressed','false');});
                if(!pressed){b.setAttribute('aria-pressed','true');}
                var s=document.getElementById('trimiteri-section');
                if(s){s.scrollIntoView({behavior:'smooth'});}
              })(this)"
              style="display:inline-flex; align-items:center; gap:5px;
                     padding:3px 10px; border-radius:99px; font-size:12px; font-weight:600;
                     cursor:pointer; border:1.5px solid var({{ pill.color_var }}); color:var({{ pill.color_var }});
                     background:transparent; transition:background 0.15s, color 0.15s;">
        {{ pill.label }}
        <span style="font-size:11px; font-weight:700; background:var({{ pill.color_var }}); color:var(--card);
                     padding:0 5px; border-radius:99px; min-width:18px; text-align:center;">{{ pill.n }}</span>
      </button>
      {% endfor %}
      {# Buton "Toate" — reseteaza filtrul de categorie #}
      <button type="button"
              class="pill-cat-reset"
              aria-label="Arata toate trimiterile"
              hx-get="/_fragments/submissions"
              hx-target="#submissions-wrap"
              hx-swap="innerHTML"
              onclick="document.querySelectorAll('.pill-cat').forEach(function(x){x.setAttribute('aria-pressed','false');})"
              style="padding:3px 10px; border-radius:99px; font-size:12px; cursor:pointer;
                     border:1px solid var(--line); background:transparent; color:var(--muted);">
        Toate
      </button>
    </div>
  </div>
  {% endif %}

</div>