{# 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. The roles used to be half-applied: a tablist whose
   <li> children kept their listitem role and whose <a> children were never
   given role="tab", and a panel with no tab labelling it. That tells assistive
   technology there is a tab widget and then hands it an empty one, which is
   worse than claiming nothing.

   A <nav> of links with aria-current="page" describes what this really is, and
   needs no roving-tabindex JavaScript to be correct. #}
<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>