<%
  const safeCount = Number.isFinite(Number(count)) ? Number(count) : 0;
  const hasPrimaryAction = primaryUrl && primaryLabel;
%>
<header class="kt-ops-hero">
  <div class="kt-ops-hero__main">
    <span class="kt-ops-hero__icon" aria-hidden="true">
      <i class="ti <%= icon || 'ti-layout-dashboard' %>"></i>
    </span>
    <div class="kt-ops-hero__copy">
      <span class="kt-ops-eyebrow"><%= i18n.__('operationsContent.console') %></span>
      <h1><%= heading %></h1>
      <p><%= description %></p>
    </div>
  </div>
  <div class="kt-ops-hero__actions">
    <% if (typeof showCount === 'undefined' || showCount) { %>
      <div class="kt-ops-metric" aria-label="<%= i18n.__('operationsContent.records') %>: <%= safeCount %>">
        <i class="ti ti-database" aria-hidden="true"></i>
        <strong><%= safeCount %></strong>
        <span><%= i18n.__('operationsContent.records') %></span>
      </div>
    <% } %>
    <% if (backUrl) { %>
      <a class="kt-ops-btn" href="<%= backUrl %>">
        <i class="ti ti-arrow-back-up" aria-hidden="true"></i>
        <span><%= i18n.__('operationsContent.back') %></span>
      </a>
    <% } %>
    <% if (hasPrimaryAction) { %>
      <a class="kt-ops-btn kt-ops-btn--primary" href="<%= primaryUrl %>" data-ops-primary-action>
        <i class="ti <%= primaryIcon || 'ti-plus' %>" aria-hidden="true"></i>
        <span><%= primaryLabel %></span>
      </a>
    <% } %>
  </div>
</header>
