{% extends "base.html" %}
{% load docs_tags %}

{% block title %}{{ title }} — Documentation{% endblock %}

{% block header %}
<div class="d-print-none">
  {% include "includes/navbar/navbar.html" %}
</div>
{% endblock %}

{% block content %}
<div class="d-flex" style="min-height: calc(100vh - 60px);">

  {# ── Sidebar ── #}
  <nav class="border-end bg-light flex-shrink-0 overflow-auto sticky-top d-print-none"
       style="width: 280px; max-height: 100vh;">
    <div class="py-3">
      {% for section in sidebar %}
      {% if section.is_dir %}
      <a href="{{section.url}}" class="pe-3 mb-1 mt-3 text-uppercase fw-bold text-decoration-none
                                        {% if doc_path == section.url|removeprefix:'/docs/'|removesuffix:'/' %}
                                        px-3 fw-medium bg-opacity-10 border-start border-primary border-2
                                        {% else %}
                                        text-dark
                                        {% endif %}
                                        ">
        <span class="material-symbols-rounded" style="font-size:1.5rem;vertical-align:middle;">auto_stories</span>
        {{ section.label }}
      </a>
      {% include "docs_viewer/_nav_tree.html" with items=section.children current_path=doc_path is_first_level=True %}
      {% else %}
      <a href="{{ section.url }}"
         class="d-block pe-3 py-1 text-decoration-none fw-bold text-decoration-none
                      {% if doc_path == section.url|removeprefix:'/docs/'|removesuffix:'/' %}
                      px-3 fw-medium bg-opacity-10 border-start border-primary border-2
                      {% else %}
                      text-dark
                      {% endif %}">
        <span class="material-symbols-rounded" style="font-size:1.5rem;vertical-align:middle;">auto_stories</span>
        {{ section.label }}
      </a>
      {% endif %}
      {% endfor %}
    </div>
  </nav>

  {# ── Main content ── #}
  <main class="flex-grow-1 p-4" style="max-width: 900px; min-width: 0;">

    <div class="d-flex align-items-center justify-content-between mb-3 d-print-none">
      {% if breadcrumbs %}
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb small mb-0">
          <li class="breadcrumb-item">
            <a href="{% url 'docs_viewer:docs_index' %}" class="text-secondary text-decoration-none">Docs</a>
          </li>
          {% for crumb in breadcrumbs %}
          {% if not forloop.last %}
          <li class="breadcrumb-item">
            <a href="{{ crumb.url }}" class="text-secondary text-decoration-none">{{ crumb.label }}</a>
          </li>
          {% else %}
          <li class="breadcrumb-item active text-muted" aria-current="page">{{ crumb.label }}</li>
          {% endif %}
          {% endfor %}
        </ol>
      </nav>
      {% else %}
      <span></span>
      {% endif %}
      <button onclick="window.print()" class="btn btn-sm btn-outline-secondary" title="Imprimir">
        <span class="material-symbols-rounded" style="font-size:1rem;vertical-align:middle;">print</span>
        Imprimir
      </button>
    </div>

    <article class="docs-body">
      {{ content|safe }}
    </article>

  </main>
</div>

<style>
/* Minimal overrides — only things Bootstrap 5 doesn't cover natively */
.docs-body h1 { font-size: 1.75rem; padding-bottom: .5rem; border-bottom: 2px solid var(--bs-border-color); }
.docs-body h2 { font-size: 1.35rem; padding-bottom: .35rem; border-bottom: 1px solid var(--bs-border-color-translucent); margin-top: 2rem; }
.docs-body h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.docs-body p  { line-height: 1.7; }
.docs-body pre { background: #1e1e2e; color: #cdd6f4; border-radius: .375rem; padding: 1.25rem; overflow-x: auto; font-size: .85rem; }
.docs-body pre code { background: none; color: inherit; padding: 0; }
.docs-body code { background: var(--bs-tertiary-bg); padding: .15em .4em; border-radius: 3px; font-size: .875em; color: #c7254e; }
.docs-body table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .9rem; }
.docs-body th { background: var(--bs-tertiary-bg); padding: .6rem .85rem; text-align: left; border: 1px solid var(--bs-border-color); font-weight: 600; }
.docs-body td { padding: .55rem .85rem; border: 1px solid var(--bs-border-color); vertical-align: top; }
.docs-body tr:nth-child(even) td { background: var(--bs-secondary-bg); }
.docs-body blockquote { border-left: 4px solid var(--bs-primary); padding: .5rem 1rem; background: var(--bs-primary-bg-subtle); border-radius: 0 .375rem .375rem 0; }

@media print {
  .main-container .container { margin: 0 !important; padding: 0 !important; max-width: 100% !important; }
  main { padding: 0 !important; }
  .main-title { display: none !important; }
}
</style>

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true, theme: 'neutral' });</script>
{% endblock %}