{# standard wrapper for ALL components #}
{# then includes the specifics of a given component #}

<section class="component component--{{ element.template | default('default') }} component--depth-{{ element.depth | default('1') }} component--title-{{ element.title | lower | replace(' ','-') }}" id="{{ parentId }}/{{ element.title | lower | replace(' ','-') }}">
  {% block preheader %}{% endblock %}

  {% block header %}
    <header class="component__header">
      <p class="file-path">{{ element.filePath | join('/') }}</p>
      <h{{ element.depth | default('1') }}>
        {% if element.generated %}
          {{ element.title | title }}
        {% else %}
          {{ element.title | markdown | replace('<p>','') | replace('</p>','') | safe }}
        {% endif %}
      </h{{ element.depth | default('1') }}>
    </header>
  {% endblock %}

  {% block description %}
    <div class="component__description">
      {{ element.description | default('') | markdown | safe }}
    </div>
  {% endblock %}

  {% block main %}{% endblock %}

  {% if element.subElements %}
    {% set parentId = parentId + '/' + (element.title | lower | replace(' ','-') ) %}
    <div class="component__sub-elements">
      {% for element in element.subElements %}
        {% if element.template %}
          {% include './' + element.template + '.njk' %}
        {% else %}
          {% include './default.njk' %}
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}
</section>