<div class="col-12">
  <h1>{{ categoryHeader }}</h1>

  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" href="#faqs" data-toggle="tab" role="tab">{{ categoryFaqsHeader }}</a>
    </li>
    [subCategories]
    <li class="nav-item">
      <a class="nav-link" href="#subcategories" data-toggle="tab" role="tab">{{ categorySubsHeader }}</a>
    </li>
    [/subCategories]
  </ul>

  <div class="tab-content mt-3">
    <div class="tab-pane fade show active" id="faqs">
      <p>
        {{ categoryDescription }} [categoryImage]
        <img
          src="{{ categoryImage }}"
          alt="{{ categoryFaqsHeader }}"
          width="140"
          height="140"
          class="rounded img-fluid float-right"
        />
        [/categoryImage]
      </p>
      {{ categoryContent }}
      <p>{{ categoryLevelUp }}</p>
    </div>
    <div class="tab-pane fade" id="subcategories">
      <p>{{ categoryDescription }}</p>
      {{ subCategoryContent }}
    </div>
  </div>
</div>