---
layout: default
---

<div class="container-lg px-3 py-6">
  <div class="d-md-flex flex-md-row flex-md-row-reverse gutter-md-spacious">
    <div class="col-md-9 markdown-body p-md-6">
      {{ content }}

      {% for doc in site.pages %}
        {% if page.next == doc.path %}
          {% assign next = doc %}
        {% endif %}

        {% if doc.next == page.path %}
          {% assign previous = doc %}
        {% endif %}
      {% endfor %}

      <div class="d-flex border-bottom border-gray-light mt-6 mb-3 py-3 text-gray-light">
        <div class="col-6">
          {% if previous %}
            {% octicon chevron-left class:"v-align-text-bottom" %}
            <a href="{{ previous.url }}">{{ previous.title }}</a>
          {% endif %}
        </div>
        <div class="col-6 text-right">
          {% if next %}
            <a href="{{ next.url }}">{{ next.title }}</a>
            {% octicon chevron-right class:"v-align-text-bottom" %}
          {% endif %}
        </div>
      </div>

      <p class="alt-text-small text-gray-light">
        Find a mistake or want to help improve this documentation?
        <a href="https://github.com/probot/probot/edit/{{ site.branch }}/{{ page.path }}">Suggest changes on GitHub</a>
      </p>
    </div>
    <div id="toc" class="col-md-3 py-6">
      {% for section in site.data.toc %}
        <h2 class="alt-h4">{{ section[0] }}</h2>

        <ul class="mt-2 mb-4 list-style-none">
          {% for item in section[1] %}
            <li>
              {% if item.url %}
                {% assign link = item %}
              {% else %}
                {% for doc in site.pages %}
                  {% if doc.path == item %}
                    {% assign link = doc %}
                    {% break %}
                  {% endif %}
                {% endfor %}
              {% endif %}

              {% if page.url == link.url %}
                {% assign classes = "text-brand-red" %}
              {% else %}
                {% assign classes = "text-gray-light" %}
              {% endif %}

              <a class="d-block no-underline py-1 {{classes}}" href="{{ link.url }}">{{ link.title }}</a>
            </li>
          {% endfor %}
        </ul>
      {% endfor %}
    </div>
  </div>
</div>

<script src="/assets/js/anchor.min.js"></script>
<script type="text/javascript">
  anchors.options = {
    placement: 'left',
    class: 'text-gray no-underline'
  };

  anchors.add();
</script>