{% extends "layout/base.html" %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/documentation.css') }}">
{% endblock %}

{% block content %}
<div class="documentation-container">
  <div class="row g-0">
    <!-- Sidebar Navigation -->
    <div class="col-12 col-lg-3 doc-sidebar-wrapper">
      {% include 'documentation/_navigation.html' %}
    </div>

    <!-- Content Area -->
    <div class="col-12 col-lg-9 doc-content-wrapper">
      <div class="doc-content">
        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb" class="mb-4">
          <ol class="breadcrumb">
            <li class="breadcrumb-item">
              <a href="{{ url_for('documentation.index') }}">Documentation</a>
            </li>
            <li class="breadcrumb-item">{{ section_title }}</li>
            <li class="breadcrumb-item active" aria-current="page">{{ page_title }}</li>
          </ol>
        </nav>

        <!-- Page Content -->
        {% block doc_content %}{% endblock %}

        <!-- Previous/Next Navigation -->
        <div class="doc-pagination mt-5 pt-4 border-top">
          <div class="row">
            <div class="col-6">
              {% if prev_page %}
              <a href="{{ url_for('documentation.page', section=prev_page.section, page=prev_page.slug) }}"
                 class="btn btn-outline-secondary">
                ← {{ prev_page.title }}
              </a>
              {% endif %}
            </div>
            <div class="col-6 text-end">
              {% if next_page %}
              <a href="{{ url_for('documentation.page', section=next_page.section, page=next_page.slug) }}"
                 class="btn btn-outline-primary">
                {{ next_page.title }} →
              </a>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}