{% extends "base.html" %}
{% block content %}

<!-- Nav cont: link admin (doar pentru admini) + logout -->
<div style="display:flex; gap:8px; justify-content:flex-end; margin-bottom:12px; flex-wrap:wrap;">
  {% if is_admin %}<a class="cardlink" href="/admin">Panou admin</a>{% endif %}
  <form method="post" action="/logout" style="display:inline; margin:0;">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <button type="submit" style="background:var(--card); color:var(--muted); border-color:var(--line);">Iesi din cont</button>
  </form>
</div>

<!-- Bara de status (US-002): mereu vizibila, deasupra tab-bar-ului -->
<div id="status-bar" class="status-bar card"
     hx-get="/_fragments/status"
     hx-trigger="load, every 15s"
     hx-swap="outerHTML">
  <div class="empty muted" style="padding:8px 0;">se incarca starea…</div>
</div>

<!-- Tab-bar: navigare intre sectiuni -->
<div role="tablist" class="tab-bar" aria-label="Sectiuni dashboard">
  {% set tabs = [
    ("acasa",       "Acasa",       "tab-acasa"),
    ("coada",       "Trimiteri",   "tab-coada"),
    ("mapari",      "Mapari",      "tab-mapari"),
    ("cont",        "Cont",        "tab-cont"),
    ("nomenclator", "Nomenclator", "tab-nomenclator")
  ] %}
  {% for tab_id, tab_label, tab_elem_id in tabs %}
  {% set badge = (badges.get(tab_id, 0) if badges else 0) %}
  <a id="{{ tab_elem_id }}"
     role="tab"
     href="/?tab={{ tab_id }}"
     aria-selected="{{ 'true' if active_tab == tab_id else 'false' }}"
     aria-controls="tab-panel"
     {% if badge %}aria-label="{{ tab_label }}, {{ badge }} necesita atentie"{% endif %}
     class="tab-link{% if active_tab == tab_id %} tab-activ{% endif %}"
     tabindex="{{ '0' if active_tab == tab_id else '-1' }}"
     hx-get="/_fragments/{{ tab_id }}"
     hx-target="#tab-panel"
     hx-swap="innerHTML"
     hx-push-url="/?tab={{ tab_id }}">{{ tab_label }}{% if badge %}<span class="tab-badge" aria-hidden="true" style="display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; margin-left:6px; padding:0 5px; border-radius:99px; background:var(--err); color:#fff; font-size:11px; font-weight:700;">{{ badge }}</span>{% endif %}</a>
  {% endfor %}
</div>

<!-- Panou activ: randat server-side la full load; HTMX inlocuieste continutul la click pe tab -->
<div id="tab-panel" role="tabpanel" aria-labelledby="tab-{{ active_tab }}" class="tab-panel">
  {{ panel_html | safe }}
</div>

<script>
(function() {
  /* Navigare cu sageti intre tab-uri (ARIA pattern) */
  var tablist = document.querySelector('[role="tablist"]');
  if (!tablist) return;
  var tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
  tablist.addEventListener('keydown', function(e) {
    var idx = tabs.indexOf(document.activeElement);
    if (idx === -1) return;
    var next = -1;
    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
      next = (idx + 1) % tabs.length;
    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
      next = (idx - 1 + tabs.length) % tabs.length;
    } else if (e.key === 'Home') {
      next = 0;
    } else if (e.key === 'End') {
      next = tabs.length - 1;
    }
    if (next !== -1) {
      e.preventDefault();
      tabs[next].focus();
    }
  });

  /* La click pe tab: actualizeaza aria-selected + tabindex */
  tabs.forEach(function(tab) {
    tab.addEventListener('click', function() {
      tabs.forEach(function(t) {
        t.setAttribute('aria-selected', 'false');
        t.setAttribute('tabindex', '-1');
        t.classList.remove('tab-activ');
      });
      tab.setAttribute('aria-selected', 'true');
      tab.setAttribute('tabindex', '0');
      tab.classList.add('tab-activ');
    });
  });
})();
</script>

{% endblock %}