<nav
  class="kt-settings-console__section-nav"
  aria-label="<%= settingsCopy.navigationLabel %>"
  data-settings-section-nav
>
  <div
    class="kt-settings-console__tablist"
    role="tablist"
    aria-label="<%= settingsCopy.navigationLabel %>"
    aria-orientation="horizontal"
    data-settings-tablist
  >
    <% settingsSections.forEach((section, index) => { %>
      <button
        class="kt-settings-console__section-item <%= index === 0 ? 'is-active' : '' %>"
        id="settings-tab-<%= section.key %>"
        type="button"
        role="tab"
        aria-selected="<%= index === 0 ? 'true' : 'false' %>"
        aria-controls="settings-panel-<%= section.key %>"
        tabindex="<%= index === 0 ? '0' : '-1' %>"
        data-settings-tab="<%= section.key %>"
        data-settings-title="<%= section.title %>"
        data-settings-helper="<%= section.helper %>"
        data-settings-icon="<%= section.icon %>"
        style="--settings-item-index: <%= index %>"
      >
        <span class="kt-settings-console__section-icon" aria-hidden="true">
          <i class="ti <%= section.icon %>"></i>
        </span>

        <span class="kt-settings-console__section-copy">
          <strong><%= section.title %></strong>
          <small><%= section.helper %></small>
        </span>

        <span class="kt-settings-console__section-meta" aria-hidden="true">
          <span><%= String(index + 1).padStart(2, '0') %></span>
          <i class="ti ti-arrow-left"></i>
        </span>

        <span class="kt-settings-console__active-label">
          <i class="ti ti-check" aria-hidden="true"></i>
          <%= settingsCopy.activeLabel %>
        </span>
      </button>
    <% }); %>
  </div>
</nav>
