<%
  const currency = i18n.__({ phrase: 'common.currency', locale: lang });
%>

<% products.forEach((item) => {
  const presentation = item.presentation;
  const moderation = presentation.moderation;
  const isDeleted = presentation.deleted;
  const phone = `${item.provider?.countryCode || ''}${item.provider?.phone || ''}`;
  const productCode = item.number ? `PRD-${item.number}` : item.id.slice(-8).toUpperCase();
  const productTypeText = i18n.__({
    phrase: presentation.variant ? 'products.typeVariant' : 'products.typeSimple',
    locale: lang,
  });
  const conditionText = i18n.__({
    phrase: presentation.used ? 'products.conditionUsed' : 'products.conditionNew',
    locale: lang,
  });
  const hasModerationActions = presentation.hasModerationActions;
%>
  <article
    class="kt-products-card <%= moderation.className %> <%= isDeleted ? 'is-deleted' : '' %>"
    role="listitem"
    data-product-card
    data-product-id="<%= item.id %>"
    data-product-name="<%= item.name %>"
    data-product-code="<%= productCode %>"
    data-product-image="<%= item.thumbnail || '' %>"
    data-moderation-status="<%= item.moderationStatus %>"
    data-is-hidden="<%= item.isVisible ? 'false' : 'true' %>"
  >
    <label class="kt-products-check" aria-label="<%= i18n.__({ phrase: 'products.selectProduct', locale: lang }) %>: <%= item.name %>">
      <input type="checkbox" value="<%= item.id %>" data-product-select <%= isDeleted ? 'disabled' : '' %>>
      <span><i class="ti ti-check"></i></span>
    </label>

    <div class="kt-products-media" data-product-media-frame>
      <span class="kt-products-media__accent" aria-hidden="true"></span>
      <a
        class="kt-products-media__link"
        href="/dashboard/products/show/<%= item.id %>"
        aria-label="<%= i18n.__({ phrase: 'common.show', locale: lang }) %>: <%= item.name %>"
      >
        <% if (item.thumbnail) { %>
          <img
            src="<%= item.thumbnail %>"
            alt="<%= item.name %>"
            loading="lazy"
            decoding="async"
            fetchpriority="low"
            data-product-image-element
          >
          <span class="kt-products-media__fallback" data-product-image-fallback hidden>
            <span class="kt-products-media__fallback-icon"><i class="ti ti-package"></i></span>
            <small><%= i18n.__({ phrase: 'products.catalogImageFallback', locale: lang }) %></small>
          </span>
        <% } else { %>
          <span class="kt-products-media__fallback" data-product-image-fallback>
            <span class="kt-products-media__fallback-icon"><i class="ti ti-package"></i></span>
            <small><%= i18n.__({ phrase: 'products.catalogImageFallback', locale: lang }) %></small>
          </span>
        <% } %>
        <span class="kt-products-media__preview" aria-hidden="true">
          <i class="ti ti-eye"></i>
        </span>
      </a>
      <% if (item.imageCount > 0) { %>
        <span class="kt-products-media__count"><i class="ti ti-photo"></i><%= item.imageCount %></span>
      <% } %>
      <span class="kt-products-media__type"><%= productTypeText %></span>
    </div>

    <div class="kt-products-card__main">
      <header class="kt-products-card__headline">
        <div class="kt-products-card__identity">
          <div class="kt-products-card__code">
            <span><%= productCode %></span>
            <span><%= conditionText %></span>
          </div>
          <h3><a href="/dashboard/products/show/<%= item.id %>"><%= item.name || '—' %></a></h3>
          <% if (item.provider?.id) { %>
            <a class="kt-products-provider" href="/dashboard/providers/show/<%= item.provider.id %>">
              <span class="kt-products-provider__mark"><i class="ti ti-building-store"></i></span>
              <span>
                <small><%= i18n.__({ phrase: 'products.provider', locale: lang }) %></small>
                <strong><%= item.provider.name || '—' %></strong>
                <% if (phone) { %><b dir="ltr"><%= phone %></b><% } %>
              </span>
            </a>
          <% } %>
        </div>
        <div class="kt-products-badges" aria-label="<%= i18n.__({ phrase: 'products.moderationStatus', locale: lang }) %>">
          <span class="kt-products-badge <%= moderation.className %>" data-product-status-badge data-badge-state="<%= item.moderationStatus %>">
            <span class="kt-products-badge__icon"><i class="ti <%= moderation.icon %>"></i></span>
            <span><%= i18n.__({ phrase: moderation.key, locale: lang }) %></span>
          </span>
          <span class="kt-products-badge <%= item.isVisible ? 'is-visible' : 'is-hidden' %>" data-product-visibility-badge data-badge-state="<%= item.isVisible ? 'visible' : 'hidden' %>">
            <% if (item.isVisible) { %>
              <span class="kt-products-badge__icon"><i class="ti ti-eye"></i></span>
            <% } else { %>
              <span class="kt-products-badge__signal is-hidden" aria-hidden="true"></span>
            <% } %>
            <span><%= i18n.__({ phrase: item.isVisible ? 'products.visibilityVisible' : 'products.visibilityHidden', locale: lang }) %></span>
          </span>
          <% if (item.isPremium) { %>
            <span class="kt-products-badge is-premium" data-product-premium-badge data-badge-state="premium">
              <span class="kt-products-badge__signal is-premium" aria-hidden="true"></span>
              <span><%= i18n.__({ phrase: 'products.catalogPremium', locale: lang }) %></span>
            </span>
          <% } else { %>
            <span class="kt-products-badge is-standard" data-product-premium-badge data-badge-state="standard">
              <span class="kt-products-badge__dot" aria-hidden="true"></span>
              <span><%= i18n.__({ phrase: 'products.premiumNo', locale: lang }) %></span>
            </span>
          <% } %>
          <% if (isDeleted) { %>
            <span class="kt-products-badge is-deleted" data-badge-state="deleted">
              <span class="kt-products-badge__icon"><i class="ti ti-trash"></i></span>
              <span><%= i18n.__({ phrase: 'products.workflowStatusDeleted', locale: lang }) %></span>
            </span>
          <% } %>
        </div>
      </header>

      <div class="kt-products-card__grid kt-products-operational-ribbon" data-product-operational-ribbon>
        <div class="kt-products-context">
          <span class="kt-products-context__icon"><i class="ti ti-category-2"></i></span>
          <span class="kt-products-context__copy">
            <span class="kt-products-context__label"><%= i18n.__({ phrase: 'products.department', locale: lang }) %></span>
            <strong><%= item.department?.name || '—' %></strong>
            <small><%= item.subdepartment?.name || '—' %></small>
          </span>
        </div>
        <div class="kt-products-context kt-products-context--price">
          <span class="kt-products-context__icon"><i class="ti ti-currency-riyal"></i></span>
          <span class="kt-products-context__copy">
            <span class="kt-products-context__label"><%= i18n.__({ phrase: 'products.finalPrice', locale: lang }) %></span>
            <strong><%= Number(item.finalPrice || 0).toLocaleString(lang === 'ar' ? 'ar-SA' : 'en-US') %> <small><%= currency %></small></strong>
            <% if (Number(item.price) !== Number(item.finalPrice)) { %>
              <span><del><%= Number(item.price || 0).toLocaleString(lang === 'ar' ? 'ar-SA' : 'en-US') %> <%= currency %></del></span>
            <% } else { %>
              <span><%= i18n.__({ phrase: 'products.discountTypeNone', locale: lang }) %></span>
            <% } %>
          </span>
        </div>
        <div class="kt-products-context">
          <span class="kt-products-context__icon"><i class="ti ti-packages"></i></span>
          <span class="kt-products-context__copy">
            <span class="kt-products-context__label"><%= i18n.__({ phrase: 'products.inventory', locale: lang }) %></span>
            <strong><%= item.quantity %> <%= i18n.__({ phrase: 'products.catalogUnits', locale: lang }) %></strong>
            <small>
              <i class="ti <%= presentation.aiPriced ? 'ti-sparkles' : 'ti-currency-riyal' %>"></i>
              <%= i18n.__({ phrase: presentation.aiPriced ? 'products.pricingMethodAi' : 'products.pricingMethodManual', locale: lang }) %>
            </small>
          </span>
        </div>
      </div>

      <footer class="kt-products-card__footer">
        <div class="kt-products-dates">
          <span><i class="ti ti-calendar-plus"></i><%= item.createdAt ? moment(item.createdAt).locale(lang).format('YYYY/MM/DD') : '—' %></span>
          <span><i class="ti ti-clock-edit"></i><%= item.updatedAt ? moment(item.updatedAt).locale(lang).fromNow() : '—' %></span>
        </div>
        <div class="kt-products-actions" aria-label="<%= i18n.__({ phrase: 'products.moderationActions', locale: lang }) %>">
          <span class="kt-products-action-group is-navigation" data-product-action-group="navigation">
            <a class="kt-products-action is-primary" href="/dashboard/products/show/<%= item.id %>"><i class="ti ti-eye"></i><%= i18n.__({ phrase: 'common.show', locale: lang }) %></a>
            <% if (!isDeleted && permissions.edit) { %>
              <a class="kt-products-action" href="/dashboard/products/edit/<%= item.id %>"><i class="ti ti-edit"></i><%= i18n.__({ phrase: 'common.edit', locale: lang }) %></a>
            <% } %>
          </span>
          <% if (hasModerationActions) { %>
            <span class="kt-products-action-group is-moderation" data-product-action-group="moderation">
              <% if (presentation.pending && permissions.approve) { %>
                <button class="kt-products-action is-approve" type="button" data-product-action="approve"><i class="ti ti-check"></i><%= i18n.__({ phrase: 'products.approveProduct', locale: lang }) %></button>
              <% } %>
              <% if (presentation.pending && permissions.reject) { %>
                <button class="kt-products-action is-reject" type="button" data-product-action="reject"><i class="ti ti-x"></i><%= i18n.__({ phrase: 'products.rejectProduct', locale: lang }) %></button>
              <% } %>
              <% if (permissions.visibility) { %>
                <button class="kt-products-action is-visibility" type="button" data-product-action="visibility"><i class="ti <%= item.isVisible ? 'ti-eye-off' : 'ti-eye' %>"></i><span><%= i18n.__({ phrase: item.isVisible ? 'products.hideProduct' : 'products.showProduct', locale: lang }) %></span></button>
              <% } %>
            </span>
          <% } %>
          <% if (!isDeleted && permissions.delete) { %>
            <span class="kt-products-action-group is-destructive" data-product-action-group="destructive">
              <button class="kt-products-action is-danger" type="button" data-product-action="delete"><i class="ti ti-trash"></i><%= i18n.__({ phrase: 'products.catalogDeleteConfirm', locale: lang }) %></button>
            </span>
          <% } %>
        </div>
      </footer>
    </div>
  </article>
<% }); %>
