{# A single tab of the <twig:ea:Tabs> component. #}
{% props
    paneId, # id of the '.tab-pane' element displayed when this tab is selected
    label = '', # tab label (pass it already translated; it may contain HTML)
    active = false, # true when this is the selected tab
    icon = null, # optional icon displayed before the label
    errorCount = 0, # number of form validation errors in the fields of this tab
    badge = null, # optional FormTabBadgeDto displayed after the label
%}

<li {{ attributes.defaults({class: 'nav-item'}) }}>
    <a class="{{ html_classes('nav-link', {active: active}) }}" href="#{{ paneId }}" id="tablist-{{ paneId }}" data-bs-toggle="tab">
        {%- if icon %}<twig:ea:Icon name="{{ icon }}" class="tab-nav-item-icon" />{% endif -%}
        {# 'data-content' repeats the plain label text: CSS uses it to reserve the width
           of the semibold label, so tabs don't shift when the selected tab changes #}
        <span class="tab-nav-item-label" data-content="{{ label|striptags }}">{{- label|raw -}}</span>
        {%- if errorCount > 0 -%}
            <twig:ea:Badge variant="danger" title="{{ 'form.tab.error_badge_title'|trans({'%count%': errorCount}, 'EasyAdminBundle') }}">{{ errorCount }}</twig:ea:Badge>
        {%- endif -%}
        {%- if badge is not null and badge.hasVisibleContent -%}
            {%- set badge_attributes = badge.htmlStyle ? badge.htmlAttributes|merge({style: badge.htmlStyle}) : badge.htmlAttributes -%}
            <twig:ea:Badge variant="{{ badge.cssClass|replace({'badge-': ''}) }}" class="tab-nav-item-badge" {{ ...badge_attributes }}>{{ badge.content }}</twig:ea:Badge>
        {%- endif -%}
    </a>
</li>