{% extends "base.html" %}
{% block title %}{{ slug | replace('-', ' ') | title }} — Docs{% endblock %}
{% block content %}
<div class="row">
<div class="col-lg-3" style="min-width: 250px;">
    <div class="card sticky-top" style="top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto;">
        <div class="card-header"><i class="bi bi-book"></i> Documentation</div>
        {% for cat in categories %}
        <div class="px-3 pt-3 pb-1 small text-uppercase text-muted fw-bold">
            <i class="bi {{ cat.icon }} me-1"></i> {{ cat.name }}
        </div>
        <ul class="list-unstyled mb-0">
        {% for d in cat.docs %}
            <li>
                <a href="{{ url_for('docs.view', slug=d.slug) }}"
                   style="display:block; padding:14px 20px; font-size:1rem; line-height:1.6;
                          text-decoration:none; border-top:1px solid rgba(0,0,0,.1);
                          word-break:break-word;
                          {% if d.slug == slug %}background:rgba(0,0,0,.18); font-weight:600;{% endif %}">
                    {{ d.title }}
                </a>
            </li>
        {% endfor %}
        </ul>
        {% endfor %}
        <div class="card-footer small">
            <a href="{{ url_for('docs.index') }}">← Documentation index</a>
        </div>
    </div>
</div>

<div class="col-lg-9">
    <style>
      .markdown-body table { display: block; overflow-x: auto; max-width: 100%; }
      .pagination .page-link {
          background-color: var(--theme-input-bg);
          border-color: var(--theme-border);
          color: var(--theme-primary);
      }
      .pagination .page-link:hover {
          background-color: var(--theme-border);
          color: var(--theme-text);
      }
      .pagination .active .page-link {
          background-color: var(--theme-primary);
          border-color: var(--theme-primary);
          color: var(--theme-bg-dark);
      }
    </style>
    <article class="markdown-body">
        {{ body | markdown }}
    </article>
    {% if pagination and pagination.pages > 1 %}
    <nav aria-label="Changelog pages">
        <ul class="pagination justify-content-center">
            {% if pagination.has_prev %}
            <li class="page-item"><a class="page-link" href="{{ url_for('docs.view', slug=slug, page=pagination.prev_num) }}">‹ Newer</a></li>
            {% else %}
            <li class="page-item disabled"><span class="page-link">‹ Newer</span></li>
            {% endif %}
            {% for p in pagination.iter_pages() %}
            <li class="page-item {{ 'active' if p == pagination.page else '' }}">
                <a class="page-link" href="{{ url_for('docs.view', slug=slug, page=p) }}">{{ p }}</a>
            </li>
            {% endfor %}
            {% if pagination.has_next %}
            <li class="page-item"><a class="page-link" href="{{ url_for('docs.view', slug=slug, page=pagination.next_num) }}">Older ›</a></li>
            {% else %}
            <li class="page-item disabled"><span class="page-link">Older ›</span></li>
            {% endif %}
        </ul>
        <p class="text-center text-muted small">Page {{ pagination.page }} of {{ pagination.pages }} — newest releases first</p>
    </nav>
    {% endif %}
</div>
</div>
{% endblock %}