{% extends "admin/dj_control_room_base/base.html" %}
{% load i18n static %}

{% block panel_breadcrumbs %}
&rsaquo; <a href="{% url 'dj_control_room_base:index' %}">{% trans "Design System" %}</a>
&rsaquo; {% trans "Examples" %}
{% endblock %}

{% block panel_scripts %}
<link rel="stylesheet" href="{% static 'dj_control_room_base/css/styles.css' %}">
<link rel="stylesheet" href="{% static 'dj_control_room_base/vendor/highlight-github-dark.min.css' %}">
<script src="{% static 'dj_control_room_base/vendor/highlight.min.js' %}"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.dcr-code-viewer__body code').forEach(function (el) {
      hljs.highlightElement(el);
    });

    var TABS = ['dashboard','workers','keys','key_detail','errors'];
    var DEFAULT_TAB = 'dashboard';

    function showTab(id) {
      if (TABS.indexOf(id) === -1) id = DEFAULT_TAB;
      TABS.forEach(function (t) {
        var pane = document.getElementById('ex-pane-' + t);
        var tab  = document.querySelector('[data-ex-tab="' + t + '"]');
        if (pane) pane.hidden = (t !== id);
        if (tab) {
          tab.classList.toggle('active', t === id);
          tab.setAttribute('aria-current', t === id ? 'page' : 'false');
        }
      });
      history.replaceState(null, '', '#' + id);
    }

    /* Tab clicks */
    document.querySelectorAll('[data-ex-tab]').forEach(function (tab) {
      tab.addEventListener('click', function (e) {
        e.preventDefault();
        showTab(tab.dataset.exTab);
      });
    });

    /* Back-link inside key_detail pane navigates to keys tab */
    document.querySelectorAll('[data-sg-tab]').forEach(function (link) {
      link.addEventListener('click', function (e) {
        e.preventDefault();
        showTab(link.dataset.sgTab);
      });
    });

    /* Key Browser table links open key_detail tab */
    document.querySelectorAll('a[href="#key_detail"]').forEach(function (link) {
      link.addEventListener('click', function (e) {
        e.preventDefault();
        showTab('key_detail');
      });
    });

    var initial = (location.hash || '').replace('#', '') || DEFAULT_TAB;
    showTab(initial);
  });
</script>
{% endblock %}

{% block panel_content %}
<div class="dcr-content dcr-content--lg">

<div class="dcr-page-header">
  <a href="{% url 'dj_control_room_base:index' %}" class="dcr-back-link">{% trans "Design System" %}</a>
  <div class="dcr-page-header__main">
    <div class="dcr-page-header__icon" style="background:var(--dcr-color-accent)">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
    </div>
    <div class="dcr-page-header__body">
      <div class="dcr-page-header__title-row">
        <h1 class="dcr-page-header__title">{{ title }}</h1>
        <span class="dcr-pill dcr-pill--info"><span class="dcr-pill__dot"></span>{% trans "EXAMPLES" %}</span>
      </div>
      <p class="dcr-page-header__subtitle">{% trans "Realistic panel layouts built entirely from DCR design system components." %}</p>
    </div>
  </div>
</div>

<nav class="dcr-tabs dcr-sg-topnav" aria-label="{% trans 'Example pages' %}">
  <a href="#dashboard"  class="dcr-tabs__tab" data-ex-tab="dashboard">{% trans "Installed Panels" %}</a>
  <a href="#workers"    class="dcr-tabs__tab" data-ex-tab="workers">{% trans "Worker Dashboard" %}</a>
  <a href="#keys"       class="dcr-tabs__tab" data-ex-tab="keys">{% trans "Key Browser" %}</a>
  <a href="#key_detail" class="dcr-tabs__tab" data-ex-tab="key_detail">{% trans "Key Detail" %}</a>
  <a href="#errors"     class="dcr-tabs__tab" data-ex-tab="errors">{% trans "Error Groups" %}</a>
</nav>

<div id="ex-pane-dashboard" class="dcr-sg-tab-pane">
  {% include "admin/dj_control_room_base/ex_partials/dashboard.html" %}
</div>

<div id="ex-pane-workers" class="dcr-sg-tab-pane" hidden>
  {% include "admin/dj_control_room_base/ex_partials/workers.html" %}
</div>

<div id="ex-pane-keys" class="dcr-sg-tab-pane" hidden>
  {% include "admin/dj_control_room_base/ex_partials/keys.html" %}
</div>

<div id="ex-pane-key_detail" class="dcr-sg-tab-pane" hidden>
  {% include "admin/dj_control_room_base/ex_partials/key_detail.html" %}
</div>

<div id="ex-pane-errors" class="dcr-sg-tab-pane" hidden>
  {% include "admin/dj_control_room_base/ex_partials/errors.html" %}
</div>

</div>
{% endblock %}