{% if categories is defined and categories|length > 0 %}
  <span class="ftr-chip ftr-out-space--r-m ftr-js-swipe-content-display ftr-js-brand">{{ heading_title }}</span>
  <div class="ftr-swipe-content ftr-js-swipe-content">
    <div class="ftr-swipe-content__header ftr-grid">
      <div>
        <i class="material-icons ftr-js-close">&#xE5CD;</i>
        <span class="ftr-text--s ftr-out-space--l-s">{{ heading_title }}</span>
      </div>
    </div>
    <div class="ftr-swipe-content__main ftr-swipe-content__main--with-btn ftr-in-space--v-n">
      {% for category in categories %}
        <a href="{{ category.href }}" class="text-medium text-uppercase cc-sm-tx ftr-out-space--v-m ftr-text--dark ftr-block">
          <span>{{ (category.category_id == category_id) ? '<b>' ~ category.name ~ '</b>' : category.name }}</span>
        </a>
        {% if category.children %}
          {% for child in category.children %}
            <a href="{{ child.href }}" class="text-medium text-uppercase cc-sm-tx ftr-out-space--v-m ftr-text--dark ftr-block ftr-in-space--l-m">
              <span>• {{ (child.category_id == child_id) ? '<b>' ~ child.name ~ '</b>' : child.name }}</span>
            </a>
            {# {% if child.subchildren %}
              {% for subchild in child.subchildren %}
                <a href="{{ subchild.href }}" class="text-small text-lowercase cc-sm-tx ftr-out-space--v-m ftr-text--dark ftr-block ftr-in-space--l-xl">
                  <span>{{ (subchild.category_id == child_id) ? '<b>' ~ subchild.name ~ '</b>' : subchild.name }}</span>
                </a>
              {% endfor %}
            {% endif %} #}
          {% endfor %}
        {% endif %}
      {% endfor %}
    </div>
  </div>
{% endif %}
