<link rel="stylesheet" href="/admin/assets/css/pages/product-catalog-console.css?v=1.3.4">

<%
  const valueOf = (key) => filters?.[key] || '';
  const locale = String(lang || 'ar').toLowerCase().startsWith('en') ? 'en' : 'ar';
  const safePaginationMeta = typeof paginationMeta === 'undefined'
    ? { page: 1, limit: 20, total: Array.isArray(products) ? products.length : 0, lastPage: 1 }
    : paginationMeta;
  const stateCards = [
    { key: 'all', label: 'products.moderationTabAll', icon: 'ti-packages', tone: 'all' },
    { key: 'approved', label: 'products.moderationTabApproved', icon: 'ti-circle-check', tone: 'approved' },
    { key: 'pending', label: 'products.moderationTabPending', icon: 'ti-clock-hour-4', tone: 'pending' },
    { key: 'hidden', label: 'products.moderationTabHidden', icon: 'ti-eye-off', tone: 'hidden' },
    { key: 'deleted', label: 'products.moderationTabDeleted', icon: 'ti-trash', tone: 'deleted' },
  ];
  const filterTabs = [
    ...stateCards,
    { key: 'rejected', label: 'products.moderationTabRejected' },
    { key: 'cancelled', label: 'products.moderationTabCancelled' },
  ];
  const uiConfig = {
    csrfToken,
    locale,
    filterUrl: '/dashboard/products/filter',
    bulkUrl: '/dashboard/products/moderation/bulk',
    deleteUrl: '/dashboard/products/delete',
    listUrl: '/dashboard/products',
    messages: {
      refreshLoading: i18n.__({ phrase: 'products.catalogRefreshLoading', locale }),
      refreshSuccess: i18n.__({ phrase: 'products.catalogRefreshSuccess', locale }),
      refreshFailure: i18n.__({ phrase: 'products.catalogRefreshFailure', locale }),
      actionFailure: i18n.__({ phrase: 'products.catalogActionFailure', locale }),
      approveTitle: i18n.__({ phrase: 'products.approveProductConfirm', locale }),
      approveDescription: i18n.__({ phrase: 'products.approveProductConfirmDescription', locale }),
      approve: i18n.__({ phrase: 'products.approveProduct', locale }),
      rejectTitle: i18n.__({ phrase: 'products.rejectProductConfirm', locale }),
      rejectDescription: i18n.__({ phrase: 'products.catalogRejectDescription', locale }),
      reject: i18n.__({ phrase: 'products.rejectProduct', locale }),
      reasonLabel: i18n.__({ phrase: 'products.rejectionReason', locale }),
      reasonPlaceholder: i18n.__({ phrase: 'products.rejectionReasonPlaceholder', locale }),
      reasonInvalid: i18n.__({ phrase: 'products.moderationReasonLength', locale }),
      hideTitle: i18n.__({ phrase: 'products.catalogHideTitle', locale }),
      hideDescription: i18n.__({ phrase: 'products.catalogHideDescription', locale }),
      showTitle: i18n.__({ phrase: 'products.catalogShowTitle', locale }),
      showDescription: i18n.__({ phrase: 'products.catalogShowDescription', locale }),
      deleteTitle: i18n.__({ phrase: 'products.catalogDeleteTitle', locale }),
      deleteDescription: i18n.__({ phrase: 'products.catalogDeleteDescription', locale }),
      delete: i18n.__({ phrase: 'products.catalogDeleteConfirm', locale }),
      cancel: i18n.__({ phrase: 'common.cancel', locale }),
      selected: i18n.__(
        { phrase: 'products.bulkSelectedCount', locale },
        { count: '{{count}}' },
      ),
      approvedLabel: i18n.__({ phrase: 'products.moderationStatusAccept', locale }),
      rejectedLabel: i18n.__({ phrase: 'products.moderationStatusReject', locale }),
      visibleLabel: i18n.__({ phrase: 'products.visibilityVisible', locale }),
      hiddenLabel: i18n.__({ phrase: 'products.visibilityHidden', locale }),
      hideLabel: i18n.__({ phrase: 'products.hideProduct', locale }),
      showLabel: i18n.__({ phrase: 'products.showProduct', locale }),
      notificationDeferred: i18n.__({ phrase: 'products.notificationDeliveryDeferred', locale }),
      productFallback: i18n.__({ phrase: 'products.catalogImageFallback', locale }),
    },
  };
%>

<section
  class="kt-products-console"
  dir="<%= locale === 'ar' ? 'rtl' : 'ltr' %>"
  data-products-console
  data-current-view="<%= filters.view %>"
>
  <div class="kt-products-container">
    <header class="kt-products-hero">
      <div class="kt-products-hero__identity">
        <span class="kt-products-hero__icon" aria-hidden="true">
          <i class="ti ti-building-store"></i>
        </span>
        <div>
          <span class="kt-products-eyebrow"><%= i18n.__({ phrase: 'products.catalogOperationsEyebrow', locale }) %></span>
          <h1><%= i18n.__({ phrase: 'products.dashboardTitle', locale }) %></h1>
          <p><%= i18n.__({ phrase: 'products.catalogOperationsSubtitle', locale }) %></p>
        </div>
      </div>
      <div class="kt-products-hero__summary" aria-label="<%= i18n.__({ phrase: 'products.moderationTabPending', locale }) %>">
        <span class="kt-products-pulse" aria-hidden="true"></span>
        <span><%= i18n.__({ phrase: 'products.moderationTabPending', locale }) %></span>
        <strong data-products-pending-count><%= stats.pending %></strong>
      </div>
    </header>

    <nav class="kt-products-states" aria-label="<%= i18n.__({ phrase: 'products.catalogStateNavigation', locale }) %>">
      <% stateCards.forEach((card) => { %>
        <a
          class="kt-products-state <%= filters.view === card.key ? 'is-selected' : '' %>"
          data-tone="<%= card.tone %>"
          data-products-view="<%= card.key %>"
          href="/dashboard/products?view=<%= card.key %>"
          aria-current="<%= filters.view === card.key ? 'page' : 'false' %>"
        >
          <span class="kt-products-state__icon"><i class="ti <%= card.icon %>"></i></span>
          <span class="kt-products-state__copy">
            <small><%= i18n.__({ phrase: card.label, locale }) %></small>
            <strong data-products-stat="<%= card.key %>"><%= stats[card.key] || 0 %></strong>
          </span>
          <i class="ti <%= locale === 'ar' ? 'ti-arrow-up-left' : 'ti-arrow-up-right' %> kt-products-state__arrow"></i>
        </a>
      <% }); %>
    </nav>

    <section class="kt-products-workspace">
      <div class="kt-products-toolbar">
        <div class="kt-products-toolbar__title">
          <span class="kt-products-toolbar__icon"><i class="ti ti-layout-list"></i></span>
          <div>
            <h2><%= i18n.__({ phrase: 'products.catalogDirectoryTitle', locale }) %></h2>
            <p><%= i18n.__({ phrase: 'products.catalogDirectorySubtitle', locale }) %></p>
          </div>
        </div>

        <div class="kt-products-toolbar__actions">
          <form class="kt-products-search" data-products-search-form>
            <input type="hidden" name="view" value="<%= filters.view %>">
            <i class="ti ti-search" aria-hidden="true"></i>
            <input
              type="search"
              name="search"
              data-products-filter-label="<%= i18n.__({ phrase: 'common.search', locale }) %>"
              maxlength="120"
              value="<%= valueOf('search') %>"
              placeholder="<%= i18n.__({ phrase: 'products.moderationSearchPlaceholder', locale }) %>"
              aria-label="<%= i18n.__({ phrase: 'common.search', locale }) %>"
            >
            <button type="submit" aria-label="<%= i18n.__({ phrase: 'common.search', locale }) %>">
              <i class="ti <%= locale === 'ar' ? 'ti-arrow-left' : 'ti-arrow-right' %>"></i>
            </button>
          </form>

          <button
            class="kt-products-btn kt-products-btn--control"
            type="button"
            data-products-filter-toggle
            aria-expanded="false"
            aria-controls="products-filter-panel"
          >
            <i class="ti ti-adjustments-horizontal"></i>
            <%= i18n.__({ phrase: 'products.moderationFilters', locale }) %>
            <span class="kt-products-btn__count" data-products-filter-count hidden>0</span>
          </button>

          <button
            class="kt-products-btn kt-products-btn--control"
            type="button"
            data-products-refresh
            data-default-label="<%= i18n.__({ phrase: 'common.refresh', locale }) %>"
          >
            <i class="ti ti-refresh" data-products-refresh-icon></i>
            <span data-products-refresh-label><%= i18n.__({ phrase: 'common.refresh', locale }) %></span>
          </button>
        </div>
      </div>

      <div class="kt-products-filter-backdrop" data-products-filter-backdrop hidden></div>
      <form
        class="kt-products-filter-panel"
        id="products-filter-panel"
        data-products-filter-form
        role="dialog"
        aria-modal="true"
        aria-labelledby="products-filter-title"
        aria-hidden="true"
        hidden
      >
        <input type="hidden" name="view" value="<%= filters.view %>">
        <div class="kt-products-filter-panel__header">
          <span class="kt-products-filter-panel__mark" aria-hidden="true">
            <i class="ti ti-adjustments-horizontal"></i>
          </span>
          <div class="kt-products-filter-panel__heading">
            <span class="kt-products-eyebrow"><%= i18n.__({ phrase: 'products.catalogOperationsEyebrow', locale }) %></span>
            <h3 id="products-filter-title"><%= i18n.__({ phrase: 'products.catalogFilterTitle', locale }) %></h3>
            <p><%= i18n.__({ phrase: 'products.catalogDirectorySubtitle', locale }) %></p>
          </div>
          <span class="kt-products-filter-panel__active" data-products-filter-live-count hidden>
            <i class="ti ti-filter"></i>
            <b>0</b>
          </span>
          <button class="kt-products-filter-panel__close" type="button" data-products-filter-close aria-label="<%= i18n.__({ phrase: 'common.close', locale }) %>">
            <i class="ti ti-x"></i>
          </button>
        </div>

        <div class="kt-products-filter-panel__body" data-products-filter-body>
          <section class="kt-products-filter-section is-primary" data-products-filter-first-section>
            <header>
              <span><i class="ti ti-shield-search"></i></span>
              <div>
                <h4><%= i18n.__({ phrase: 'products.moderationAndVisibility', locale }) %></h4>
                <p><%= i18n.__({ phrase: 'products.catalogOperationsSubtitle', locale }) %></p>
              </div>
            </header>
            <div class="kt-products-filter-panel__grid is-operational" data-products-filter-first-row>
              <label class="kt-products-field" data-products-filter-priority-field>
                <span><%= i18n.__({ phrase: 'products.provider', locale }) %></span>
                <input type="text" name="providerName" maxlength="120" value="<%= valueOf('providerName') %>">
              </label>
              <label class="kt-products-field" data-products-filter-priority-field>
                <span><%= i18n.__({ phrase: 'products.moderationStatus', locale }) %></span>
                <span class="kt-products-select">
                  <select name="moderationStatus">
                    <option value=""><%= i18n.__({ phrase: 'common.all', locale }) %></option>
                    <option value="wait" <%= valueOf('moderationStatus') === 'wait' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.moderationStatusWait', locale }) %></option>
                    <option value="accept" <%= valueOf('moderationStatus') === 'accept' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.moderationStatusAccept', locale }) %></option>
                    <option value="reject" <%= valueOf('moderationStatus') === 'reject' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.moderationStatusReject', locale }) %></option>
                    <option value="cancelled" <%= valueOf('moderationStatus') === 'cancelled' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.moderationStatusCancelled', locale }) %></option>
                  </select>
                  <i class="ti ti-chevron-down"></i>
                </span>
              </label>
              <label class="kt-products-field" data-products-filter-priority-field>
                <span><%= i18n.__({ phrase: 'products.pricingMethod', locale }) %></span>
                <span class="kt-products-select">
                  <select name="pricingMethod">
                    <option value=""><%= i18n.__({ phrase: 'common.all', locale }) %></option>
                    <option value="manual" <%= valueOf('pricingMethod') === 'manual' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.pricingMethodManual', locale }) %></option>
                    <option value="ai" <%= valueOf('pricingMethod') === 'ai' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.pricingMethodAi', locale }) %></option>
                  </select>
                  <i class="ti ti-chevron-down"></i>
                </span>
              </label>
              <label class="kt-products-field">
                <span><%= i18n.__({ phrase: 'products.visibility', locale }) %></span>
                <span class="kt-products-select">
                  <select name="visibility">
                    <option value=""><%= i18n.__({ phrase: 'common.all', locale }) %></option>
                    <option value="visible" <%= valueOf('visibility') === 'visible' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.visibilityVisible', locale }) %></option>
                    <option value="hidden" <%= valueOf('visibility') === 'hidden' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.visibilityHidden', locale }) %></option>
                  </select>
                  <i class="ti ti-chevron-down"></i>
                </span>
              </label>
              <label class="kt-products-field">
                <span><%= i18n.__({ phrase: 'products.productType', locale }) %></span>
                <span class="kt-products-select">
                  <select name="productType">
                    <option value=""><%= i18n.__({ phrase: 'common.all', locale }) %></option>
                    <option value="simple" <%= valueOf('productType') === 'simple' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.typeSimple', locale }) %></option>
                    <option value="variant" <%= valueOf('productType') === 'variant' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.typeVariant', locale }) %></option>
                    <option value="multi_attribute" <%= valueOf('productType') === 'multi_attribute' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.typeVariant', locale }) %></option>
                  </select>
                  <i class="ti ti-chevron-down"></i>
                </span>
              </label>
              <label class="kt-products-field">
                <span><%= i18n.__({ phrase: 'products.condition', locale }) %></span>
                <span class="kt-products-select">
                  <select name="condition">
                    <option value=""><%= i18n.__({ phrase: 'common.all', locale }) %></option>
                    <option value="new" <%= valueOf('condition') === 'new' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.conditionNew', locale }) %></option>
                    <option value="used" <%= valueOf('condition') === 'used' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.conditionUsed', locale }) %></option>
                  </select>
                  <i class="ti ti-chevron-down"></i>
                </span>
              </label>
            </div>
          </section>

          <div class="kt-products-filter-panel__lower">
            <section class="kt-products-filter-section is-taxonomy">
              <header>
                <span><i class="ti ti-category-2"></i></span>
                <div><h4><%= i18n.__({ phrase: 'products.department', locale }) %></h4></div>
              </header>
              <div class="kt-products-filter-panel__grid is-taxonomy">
                <label class="kt-products-field">
                  <span><%= i18n.__({ phrase: 'products.department', locale }) %></span>
                  <span class="kt-products-select">
                    <select name="departmentId" data-products-department>
                      <option value=""><%= i18n.__({ phrase: 'common.all', locale }) %></option>
                      <% references.departments.forEach((item) => { %>
                        <option value="<%= item.id %>" <%= valueOf('departmentId') === item.id ? 'selected' : '' %>><%= item.name?.[locale] || item.name?.ar || item.name?.en %></option>
                      <% }); %>
                    </select>
                    <i class="ti ti-chevron-down"></i>
                  </span>
                </label>
                <label class="kt-products-field">
                  <span><%= i18n.__({ phrase: 'products.subDepartment', locale }) %></span>
                  <span class="kt-products-select">
                    <select name="subdepartmentId" data-products-subdepartment>
                      <option value=""><%= i18n.__({ phrase: 'common.all', locale }) %></option>
                      <% references.subdepartments.forEach((item) => { %>
                        <option value="<%= item.id %>" data-department="<%= item.departmentId %>" <%= valueOf('subdepartmentId') === item.id ? 'selected' : '' %>><%= item.name?.[locale] || item.name?.ar || item.name?.en %></option>
                      <% }); %>
                    </select>
                    <i class="ti ti-chevron-down"></i>
                  </span>
                </label>
              </div>
            </section>

            <section class="kt-products-filter-section is-dates">
              <header>
                <span><i class="ti ti-calendar-stats"></i></span>
                <div><h4><%= i18n.__({ phrase: 'products.auditInformation', locale }) %></h4></div>
              </header>
              <div class="kt-products-filter-panel__grid is-dates">
                <label class="kt-products-field">
                  <span><%= i18n.__({ phrase: 'products.createdFrom', locale }) %></span>
                  <input type="date" name="createdFrom" value="<%= valueOf('createdFrom') %>">
                </label>
                <label class="kt-products-field">
                  <span><%= i18n.__({ phrase: 'products.createdTo', locale }) %></span>
                  <input type="date" name="createdTo" value="<%= valueOf('createdTo') %>">
                </label>
                <label class="kt-products-field">
                  <span><%= i18n.__({ phrase: 'products.updatedFrom', locale }) %></span>
                  <input type="date" name="updatedFrom" value="<%= valueOf('updatedFrom') %>">
                </label>
                <label class="kt-products-field">
                  <span><%= i18n.__({ phrase: 'products.updatedTo', locale }) %></span>
                  <input type="date" name="updatedTo" value="<%= valueOf('updatedTo') %>">
                </label>
              </div>
            </section>
          </div>
        </div>

        <footer class="kt-products-filter-panel__actions">
          <span>
            <i class="ti ti-info-circle"></i>
            <%= i18n.__({ phrase: 'products.catalogDirectorySubtitle', locale }) %>
          </span>
          <div>
            <button class="kt-products-btn kt-products-btn--control" type="button" data-products-clear-filters>
              <i class="ti ti-filter-x"></i>
              <%= i18n.__({ phrase: 'products.moderationClearFilters', locale }) %>
            </button>
            <button class="kt-products-btn kt-products-btn--primary" type="submit" data-products-filter-submit>
              <i class="ti ti-check"></i>
              <%= i18n.__({ phrase: 'products.moderationApplyFilters', locale }) %>
            </button>
          </div>
        </footer>
      </form>

      <div class="kt-products-active-filters" data-products-active-filters hidden>
        <span class="kt-products-active-filters__label">
          <i class="ti ti-adjustments-horizontal"></i>
          <%= i18n.__({ phrase: 'products.moderationFilters', locale }) %>
        </span>
        <div data-products-active-filter-list></div>
        <button type="button" data-products-clear-filters>
          <i class="ti ti-filter-x"></i>
          <%= i18n.__({ phrase: 'products.moderationClearFilters', locale }) %>
        </button>
      </div>

      <nav class="kt-products-filterrail" aria-label="<%= i18n.__({ phrase: 'products.moderationStatus', locale }) %>">
        <% filterTabs.forEach((tab) => { %>
          <a
            href="/dashboard/products?view=<%= tab.key %>"
            class="<%= filters.view === tab.key ? 'is-active' : '' %>"
            data-products-view="<%= tab.key %>"
          >
            <%= i18n.__({ phrase: tab.label, locale }) %>
            <span data-products-stat="<%= tab.key %>"><%= stats[tab.key] || 0 %></span>
          </a>
        <% }); %>
        <label class="kt-products-sort">
          <select name="sort" form="products-sort-form" data-products-sort>
            <option value="newest" <%= valueOf('sort') === 'newest' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.sortNewest', locale }) %></option>
            <option value="oldest" <%= valueOf('sort') === 'oldest' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.sortOldest', locale }) %></option>
            <option value="price_asc" <%= valueOf('sort') === 'price_asc' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.sortPriceAsc', locale }) %></option>
            <option value="price_desc" <%= valueOf('sort') === 'price_desc' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.sortPriceDesc', locale }) %></option>
            <option value="updated" <%= valueOf('sort') === 'updated' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.sortUpdated', locale }) %></option>
            <option value="name" <%= valueOf('sort') === 'name' ? 'selected' : '' %>><%= i18n.__({ phrase: 'products.sortName', locale }) %></option>
          </select>
          <i class="ti ti-chevron-down"></i>
        </label>
      </nav>

      <div class="kt-products-progress" data-products-progress hidden aria-hidden="true"><span></span></div>

      <div class="kt-products-selection" data-products-selection hidden>
        <div>
          <span class="kt-products-selection__icon"><i class="ti ti-checks"></i></span>
          <strong data-products-selected-count>0</strong>
        </div>
        <div>
          <% if (permissions.bulk) { %>
            <button type="button" data-products-bulk="approve"><i class="ti ti-check"></i><%= i18n.__({ phrase: 'products.bulkApprove', locale }) %></button>
            <button type="button" data-products-bulk="reject"><i class="ti ti-x"></i><%= i18n.__({ phrase: 'products.bulkReject', locale }) %></button>
            <button type="button" data-products-bulk="hide"><i class="ti ti-eye-off"></i><%= i18n.__({ phrase: 'products.bulkHide', locale }) %></button>
            <button type="button" data-products-bulk="show"><i class="ti ti-eye"></i><%= i18n.__({ phrase: 'products.bulkShow', locale }) %></button>
          <% } %>
          <% if (permissions.delete) { %>
            <button type="button" class="is-danger" data-products-bulk="delete"><i class="ti ti-trash"></i><%= i18n.__({ phrase: 'products.bulkDelete', locale }) %></button>
          <% } %>
        </div>
      </div>

      <div class="kt-products-region-shell" data-products-region-shell>
        <div
          class="kt-products-loading"
          data-products-loading
          role="status"
          aria-live="polite"
          aria-label="<%= i18n.__({ phrase: 'products.catalogRefreshLoading', locale }) %>"
          hidden
        >
          <% for (let skeletonIndex = 0; skeletonIndex < 3; skeletonIndex += 1) { %>
            <article class="kt-products-skeleton" aria-hidden="true">
              <span class="kt-products-skeleton__check"></span>
              <span class="kt-products-skeleton__media"></span>
              <span class="kt-products-skeleton__body">
                <span class="kt-products-skeleton__line is-short"></span>
                <span class="kt-products-skeleton__line is-title"></span>
                <span class="kt-products-skeleton__chips"></span>
                <span class="kt-products-skeleton__grid"></span>
                <span class="kt-products-skeleton__actions"></span>
              </span>
            </article>
          <% } %>
        </div>

        <div class="kt-products-region" data-products-region aria-live="polite">
          <%- include('./dataTable.ejs', {
            products,
            paginationHtml,
            paginationMeta: safePaginationMeta,
            stats,
            filters,
            permissions,
            lang: locale,
            i18n,
            moment,
          }) %>
        </div>
      </div>
    </section>
  </div>

  <div class="kt-products-modal-backdrop" data-products-modal-backdrop hidden></div>
  <section
    class="kt-products-command-modal"
    data-products-command-modal
    role="alertdialog"
    aria-modal="true"
    aria-labelledby="products-command-title"
    aria-describedby="products-command-description"
    hidden
  >
    <button type="button" class="kt-products-command-modal__close" data-products-modal-close aria-label="<%= i18n.__({ phrase: 'common.close', locale }) %>">
      <i class="ti ti-x"></i>
    </button>
    <span class="kt-products-command-modal__icon" data-products-command-icon><i class="ti ti-shield-check"></i></span>
    <span class="kt-products-eyebrow" data-products-command-eyebrow><%= i18n.__({ phrase: 'products.catalogDecisionEyebrow', locale }) %></span>
    <h2 id="products-command-title" data-products-command-title></h2>
    <p id="products-command-description" data-products-command-description></p>
    <div class="kt-products-command-modal__product" data-products-command-product>
      <span class="kt-products-command-modal__product-image" data-products-command-image>
        <i class="ti ti-package"></i>
      </span>
      <span>
        <small><%= i18n.__({ phrase: 'products.catalogSelectedProduct', locale }) %></small>
        <strong data-products-command-name></strong>
        <b data-products-command-meta></b>
      </span>
    </div>
    <label class="kt-products-command-modal__reason" data-products-command-reason hidden>
      <span><%= i18n.__({ phrase: 'products.rejectionReason', locale }) %></span>
      <textarea maxlength="500" data-products-reason-input placeholder="<%= i18n.__({ phrase: 'products.rejectionReasonPlaceholder', locale }) %>"></textarea>
      <small data-products-reason-error></small>
    </label>
    <footer>
      <button class="kt-products-btn kt-products-btn--control" type="button" data-products-modal-close>
        <%= i18n.__({ phrase: 'common.cancel', locale }) %>
      </button>
      <button class="kt-products-btn kt-products-btn--primary" type="button" data-products-command-confirm>
        <i class="ti ti-check" data-products-command-confirm-icon></i>
        <span data-products-command-confirm-label></span>
      </button>
    </footer>
  </section>
</section>

<script id="products-console-config" type="application/json"><%- JSON.stringify(uiConfig).replace(/</g, '\\u003c') %></script>
<script src="/admin/assets/js/pages/product-catalog-console.js?v=1.3.3"></script>
