<% article_count_label = I18n.t(articles.size == 1 ? 'public_portal.common.article' : 'public_portal.common.articles') %>
<% meta_row = capture do %>
  <div class="flex items-center gap-2 text-sm text-n-slate-10 flex-wrap">
    <span class="tabular-nums"><%= articles.size %> <%= article_count_label %></span>
    <% if category_authors.any? %>
      <span aria-hidden="true">·</span>
      <span class="inline-flex items-center gap-2">
        <%= render 'public/api/v1/portals/documentation_layout/avatar_group',
                   users: category_authors, size: :xs, overlap: '-ml-0.5' %>
        <span><%= I18n.t('public_portal.common.by') %> <%= format_authors_label(category_authors) %></span>
      </span>
    <% end %>
  </div>
<% end %>
<header class="mb-8">
  <div class="flex items-center gap-4">
    <% if category.icon.present? %>
      <span class="shrink-0 flex items-center justify-center w-14 h-14 text-3xl rounded-2xl bg-n-slate-1 border border-solid border-n-weak shadow-sm"><%= render_emoji_or_icon(category.icon, category.icon_color) %></span>
    <% end %>
    <div class="min-w-0">
      <h1 class="text-3xl leading-snug font-620 tracking-tight text-n-slate-12 text-balance"><%= category.name %></h1>
      <div class="hidden sm:block">
        <%= meta_row %>
      </div>
    </div>
  </div>
  <div class="sm:hidden mt-3">
    <%= meta_row %>
  </div>
  <% if category.description.present? %>
    <p class="mt-6 text-lg leading-relaxed text-n-slate-11 text-pretty"><%= category.description %></p>
  <% end %>
</header>
