{% load wildewidgets %}
<div class='card'>
  <ul class="nav nav-tabs">
  {% for tab in tabs %}
  <li class="nav-item">
    <a 
      class="nav-link {% if forloop.first %}active{% endif %}" 
      id="{{tab.0|slugify}}-{{identifier}}-tab" 
      data-bs-toggle="tab" 
      href="#nav-{{tab.0|slugify}}-{{identifier}}" 
      role="tab" 
      aria-controls="nav-{{tab.0|slugify}}-{{identifier}}" 
      aria-selected="{{forloop.first|yesno:'true,false,false'}}"
    >
      {{tab.0}}
    </a>
  </li>
  {% endfor %}
  </ul>

  <div class="card-body">
    <div class="tab-content" id="nav-tabContent">
      {% for tab in tabs %}
        <div 
          class="tab-pane fade {% if forloop.first %}show active{% endif %}" 
          id="nav-{{tab.0|slugify}}-{{identifier}}" 
          role="tabpanel" 
          aria-labelledby="nav-{{tab.0|slugify}}-{{identifier}}-tab"
        >
          {% wildewidgets tab.1 %}
        </div>
      {% endfor %}
    </div>
  </div>
</div>