{# Deliberately NOT role="tablist" / "tab" / "tabpanel": these are links that
   navigate (each has an href and changes the URL), not an in-page tab widget.
   A <nav> of links with aria-current="page" says exactly that, with no
   roving-tabindex JavaScript needed. #}
<div class="fcu-card fcu-tabs {{ c.css_class if c.css_class }}" id="{{ c.id }}">
  <nav class="fcu-tabs-nav-wrapper" aria-label="{{ tabs_label }}">
    <ul class="fcu-tabs-nav"
        id="{{ c.id }}-tab"
        up-target="#{{ c.id }}"
        up-history="true"
        up-scroll="false"
        up-focus="keep">
      {% for tab in c.tabs %}
        <li>
          <a class="fcu-tab-link {% if loop.index0 == c.active_tab %}active{% endif %}"
             href="{{ c.get_tab_url(loop.index0) }}"
             {% if loop.index0 == c.active_tab %}data-is-active="true" aria-current="page"{% endif %}
             up-transition="cross-fade"
             up-scroll="false"
             up-focus="keep">
          {{ tab.label }}</a>
        </li>
      {% endfor %}
    </ul>
  </nav>
  <div class="fcu-card-body">
    <div id="{{ c.id }}-tabContent">
      <div id="{{ c.id }}-{{ c.active_tab }}">
        {{ active_tab_content|safe }}
      </div>
    </div>
  </div>
</div>