{% for category in categories %}
  {{ (interests_categories) ? '<div class="ftr-grid ftr-out-space--n ftr-h--full">' : '' }}
    <input class="ftr-check js-check-control" id="{{ category.id }}" type="checkbox" name="categories[{{ category.id }}][status]" {{ (category.checked) ? 'checked' : '' }}>
    <label class="ftr-check-label ftr-block" for="{{ category.id }}">
      <span class="ftr-check-label__text" {{ (interests_categories) ? 'style="font-weight: bold;"' : '' }}>{{ category.name }}</span>
    </label>
    {% if interests_categories and category.children is defined and category.children %}
      {% for children in category.children %}
        <input class="ftr-check js-check-controlled {{ category.id }}" id="{{ children.id }}" type="checkbox" name="categories[{{ category.id }}][{{ children.id }}]" {{ (children.checked or category.checked) ? 'checked' : '' }} data-parent-id="{{ category.id }}">
        <label class="ftr-check-label {{ (error_message) ? 'error' : '' }}" for="{{ children.id }}">
          <span class="ftr-check-label__text">{{ children.name }}</span>
        </label>
      {% endfor %}
    {% endif %}
  {{ (interests_categories) ? '</div><hr>' : '' }}
{% endfor %}
<script>
if (typeof loadSpecificSources != 'undefined') {
  loadSpecificSources({
    scripts: {{ scriptsApp }}
  });
}
</script>
