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

{% block content_title %}{% endblock %}
{% block content_subtitle %}{% 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 src="{% static 'dj_control_room_base/vendor/highlight-python.min.js' %}"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.dcr-sg-code code, .dcr-code-viewer__body code').forEach(function (el) {
      hljs.highlightElement(el);
    });

    var TABS = ['application','tokens','buttons','forms','data','cards','nav'];
    var DEFAULT_TAB = 'application';

    function showTab(id) {
      if (TABS.indexOf(id) === -1) id = DEFAULT_TAB;
      TABS.forEach(function (t) {
        var pane = document.getElementById('sg-pane-' + t);
        var tab  = document.querySelector('[data-sg-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);
    }

    document.querySelectorAll('[data-sg-tab]').forEach(function (tab) {
      tab.addEventListener('click', function (e) {
        e.preventDefault();
        showTab(tab.dataset.sgTab);
      });
    });

    var initial = (location.hash || '').replace('#', '') || DEFAULT_TAB;
    showTab(initial);

    /* Close any open dcr-dropdown when clicking outside or pressing Escape */
    document.addEventListener('click', function(e) {
      if (!e.target.closest('.dcr-dropdown')) {
        document.querySelectorAll('.dcr-dropdown.is-open').forEach(function(d) {
          d.classList.remove('is-open');
          var trigger = d.querySelector('[aria-expanded]');
          if (trigger) trigger.setAttribute('aria-expanded', 'false');
        });
      }
    });
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') {
        document.querySelectorAll('.dcr-dropdown.is-open').forEach(function(d) {
          d.classList.remove('is-open');
          var trigger = d.querySelector('[aria-expanded]');
          if (trigger) { trigger.setAttribute('aria-expanded', 'false'); trigger.focus(); }
        });
      }
    });
  });
</script>
{% endblock %}

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

<div class="dcr-page-header">
  <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"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></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--success">
          <span class="dcr-pill__dot"></span>
          {% trans "STYLES" %}
        </span>
      </div>
      <p class="dcr-page-header__subtitle">{% trans "Components and tokens for building Django Control Room panels. Extend " %}<code class="dcr-code">panel_base.html</code>{% trans " to inherit this design system in any panel." %}</p>
    </div>
  </div>
  <div class="dcr-page-header__actions">
    <a href="{% url 'dj_control_room_base:examples' %}" class="dcr-btn">{% trans "VIEW EXAMPLES" %} →</a>
  </div>
</div>

<nav class="dcr-tabs dcr-sg-topnav" aria-label="{% trans 'Design system sections' %}">
  <a href="#application" class="dcr-tabs__tab" data-sg-tab="application">{% trans "Application" %}</a>
  <a href="#tokens"      class="dcr-tabs__tab" data-sg-tab="tokens">{% trans "Tokens" %}</a>
  <a href="#buttons"     class="dcr-tabs__tab" data-sg-tab="buttons">{% trans "Buttons &amp; Badges" %}</a>
  <a href="#forms"       class="dcr-tabs__tab" data-sg-tab="forms">{% trans "Forms" %}</a>
  <a href="#data"        class="dcr-tabs__tab" data-sg-tab="data">{% trans "Data Tables" %}</a>
  <a href="#cards"       class="dcr-tabs__tab" data-sg-tab="cards">{% trans "Cards &amp; Feeds" %}</a>
  <a href="#nav"         class="dcr-tabs__tab" data-sg-tab="nav">{% trans "Navigation" %}</a>
</nav>

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

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

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

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

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

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

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

</div>
{% endblock %}