{% extends "base.html" %}

{% block content %}
  <div class="row">
    <aside class="col-12 col-lg-3 mb-4">
      <nav aria-label="Documentation">
        <div class="list-group small mb-4">
          {% for item in primary_nav %}
            <a
              class="list-group-item list-group-item-action {% if docs_active == item.active %}active{% endif %}"
              href="{{ item.path|safe }}"
              {% if docs_active == item.active %}aria-current="page"{% endif %}
            >
              {{ item.title }}
            </a>
          {% endfor %}
        </div>

        <div class="mb-4" data-docs-nav-section="guides">
          <div class="text-uppercase text-muted fw-semibold small mb-2">Start here</div>
          <div class="list-group list-group-flush small mb-3">
            {% for guide in guide_pages %}
              {% if guide.section == "start" %}
                <a
                  class="list-group-item list-group-item-action {% if docs_active == guide.active %}active{% endif %}"
                  href="/docs/guides/{{ guide.slug }}"
                  {% if docs_active == guide.active %}aria-current="page"{% endif %}
                >
                  {{ guide.title }}
                </a>
              {% endif %}
            {% endfor %}
          </div>

          <div class="text-uppercase text-muted fw-semibold small mb-2">Understand the pieces</div>
          <div class="list-group list-group-flush small mb-3">
            {% for guide in guide_pages %}
              {% if guide.section == "concept" %}
                <a
                  class="list-group-item list-group-item-action {% if docs_active == guide.active %}active{% endif %}"
                  href="/docs/guides/{{ guide.slug }}"
                  {% if docs_active == guide.active %}aria-current="page"{% endif %}
                >
                  {{ guide.title }}
                </a>
              {% endif %}
            {% endfor %}
          </div>

          <div class="text-uppercase text-muted fw-semibold small mb-2">Solve a workflow problem</div>
          <div class="list-group list-group-flush small">
            {% for guide in guide_pages %}
              {% if guide.section == "workflow" %}
                <a
                  class="list-group-item list-group-item-action {% if docs_active == guide.active %}active{% endif %}"
                  href="/docs/guides/{{ guide.slug }}"
                  {% if docs_active == guide.active %}aria-current="page"{% endif %}
                >
                  {{ guide.title }}
                </a>
              {% endif %}
            {% endfor %}
          </div>
        </div>

        {% for surface in docs_nav_surfaces %}
          <div class="mb-3" data-docs-nav-section="{{ surface.slug }}">
            <button
              class="btn btn-sm btn-outline-secondary w-100 d-flex justify-content-between align-items-center mb-2"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#docs-nav-{{ surface.slug }}"
              aria-expanded="{% if docs_section == surface.slug %}true{% else %}false{% endif %}"
              aria-controls="docs-nav-{{ surface.slug }}"
            >
              <span>{{ surface.title }} reference</span>
              <span aria-hidden="true">+</span>
            </button>
            <div id="docs-nav-{{ surface.slug }}" class="collapse {% if docs_section == surface.slug %}show{% endif %}">
              {% for group in surface.groups %}
                <div class="mb-3">
                  <div class="text-uppercase text-muted fw-semibold small mb-2">{{ group.title }}</div>
                  <div class="list-group list-group-flush small">
                    {% for page in group.pages %}
                      <a
                        class="list-group-item list-group-item-action {% if docs_active == page.active %}active{% endif %}"
                        href="{{ page.path|safe }}"
                        {% if docs_active == page.active %}aria-current="page"{% endif %}
                      >
                        {{ page.title }}
                      </a>
                    {% endfor %}
                  </div>
                </div>
              {% endfor %}
            </div>
          </div>
        {% endfor %}
      </nav>
    </aside>

    <section class="col-12 col-lg-9">
      {% block docs_content %}{% endblock %}
    </section>
  </div>
{% endblock %}