<% attributes.forEach((item) => {
  const id = String(item._id || item.id || '');
  const name = item.name?.[lang] || item.name?.ar || item.name?.en || '—';
  const active = item.isActive !== false;
  const previews = Array.isArray(item.valuesPreview) ? item.valuesPreview : [];
  const totalValues = Number(item.sizesCount || 0) + Number(item.colorsCount || 0);
%>
  <article class="cc-row" id="tr<%= id %>" data-cc-id="<%= id %>">
    <div class="cc-row__identity">
      <span class="cc-avatar"><i class="ti ti-tags" aria-hidden="true"></i></span>
      <div class="cc-row__copy">
        <span class="cc-row__kicker"><%= i18n.__('catalogCommerce.productAttribute') %></span>
        <h2><%= name %></h2>
        <p><%= item.name?.en && lang === 'ar' ? item.name.en : (item.slug || '—') %></p>
        <% if (previews.length) { %>
          <div class="cc-chips">
            <% previews.forEach((value) => {
              const valueName = value.name?.[lang] || value.name?.ar || value.name?.en || '—';
            %>
              <span class="cc-chip">
                <% if (value.colorCode) { %><i class="cc-swatch" style="background-color:<%= value.colorCode %>"></i><% } %>
                <%= valueName %>
              </span>
            <% }) %>
          </div>
        <% } %>
      </div>
    </div>
    <div class="cc-row__facts">
      <span class="cc-fact"><small><%= i18n.__('attributes.valuesCount') %></small><strong><%= totalValues %></strong></span>
      <span class="cc-fact"><small><%= i18n.__('attributes.colors') %> / <%= i18n.__('attributes.sizes') %></small><strong><%= Number(item.colorsCount || 0) %> / <%= Number(item.sizesCount || 0) %></strong></span>
      <span class="cc-fact"><small><%= i18n.__('attributes.status') %></small><strong><span class="cc-status cc-status--<%= active ? 'active' : 'inactive' %>"><%= active ? i18n.__('attributes.active') : i18n.__('attributes.inactive') %></span></strong></span>
    </div>
    <div class="cc-row__actions">
      <a class="cc-action" href="/dashboard/attributes/show/<%= id %>" title="<%= i18n.__('common.show') %>"><i class="ti ti-eye"></i></a>
      <a class="cc-action" href="/dashboard/attributes/edit/<%= id %>" title="<%= i18n.__('common.edit') %>"><i class="ti ti-edit"></i></a>
      <button class="cc-action" type="button" data-cc-action="status" data-method="PATCH"
        data-url="/dashboard/attributes/toggleStatus/<%= id %>"
        data-confirm-message="<%= i18n.__('catalogCommerce.attributeStatusConfirmation') %>"
        title="<%= i18n.__('attributes.toggleStatus') %>"><i class="ti ti-toggle-<%= active ? 'right' : 'left' %>"></i></button>
      <button class="cc-action cc-action--danger" type="button" data-cc-action="delete" data-method="DELETE"
        data-id="<%= id %>" data-url="/dashboard/attributes/delete"
        data-confirm-message="<%= i18n.__('attributes.deleteAttributeConfirm') %>"
        title="<%= i18n.__('common.delete') %>"><i class="ti ti-trash"></i></button>
    </div>
  </article>
<% }) %>
