<%
  const ccFilterConfig = typeof filterData === 'object' && filterData ? filterData : { array: [] };
  const ccFilterFields = Array.isArray(ccFilterConfig.array) ? ccFilterConfig.array : [];
%>
<section class="cc-filter-panel" data-cc-filter-panel hidden aria-label="<%= i18n.__('catalogCommerce.resultFilters') %>">
  <div class="cc-filter-panel__heading">
    <span><i class="ti ti-filter" aria-hidden="true"></i></span>
    <div>
      <strong><%= i18n.__('catalogCommerce.precisionFilters') %></strong>
      <small><%= i18n.__('catalogCommerce.filterRealRecords') %></small>
    </div>
    <button type="button" class="cc-icon-button" data-cc-filter-close
      aria-label="<%= i18n.__('catalogCommerce.closeFilters') %>"><i class="ti ti-x" aria-hidden="true"></i></button>
  </div>
  <div class="cc-filter-grid">
    <% if (ccFilterConfig.order) { %>
      <label class="cc-field">
        <span><%= i18n.__('common.sortBy') %></span>
        <select data-cc-filter name="order">
          <option value=""><%= i18n.__('common.choose') %></option>
          <option value="DESC"><%= i18n.__('common.DESC') %></option>
          <option value="ASC"><%= i18n.__('common.ASC') %></option>
        </select>
      </label>
    <% } %>
    <% if (ccFilterConfig.date) { %>
      <label class="cc-field">
        <span><%= i18n.__('common.startDate') %></span>
        <input data-cc-filter type="date" name="startDate">
      </label>
      <label class="cc-field">
        <span><%= i18n.__('common.endDate') %></span>
        <input data-cc-filter type="date" name="endDate">
      </label>
    <% } %>
    <% ccFilterFields.forEach((field) => { %>
      <label class="cc-field">
        <span><%= i18n.__(field.inputNameText) %></span>
        <% if (field.inputType === 'select') { %>
          <select data-cc-filter name="<%= field.inputName %>" <%= field.disabled ? 'disabled' : '' %>>
            <option value=""><%= i18n.__('common.choose') %></option>
            <% (field.rows || []).forEach((row) => { %>
              <option value="<%= row.key %>" <%= row.selected ? 'selected' : '' %>><%= row.value %></option>
            <% }) %>
          </select>
        <% } else { %>
          <input data-cc-filter type="<%= field.inputType || 'text' %>" name="<%= field.inputName %>"
            placeholder="<%= field.placeholder || '' %>" <%= field.disabled ? 'disabled' : '' %>>
        <% } %>
      </label>
    <% }) %>
    <% if (ccFilterConfig.range && ccFilterConfig.rangeData) { %>
      <label class="cc-field">
        <span><%= ccFilterConfig.rangeData.label %> — <%= i18n.__('catalogCommerce.from') %></span>
        <input data-cc-filter type="number" name="min" min="<%= ccFilterConfig.rangeData.min %>"
          max="<%= ccFilterConfig.rangeData.max %>" value="<%= ccFilterConfig.rangeData.min %>">
      </label>
      <label class="cc-field">
        <span><%= ccFilterConfig.rangeData.label %> — <%= i18n.__('catalogCommerce.to') %></span>
        <input data-cc-filter type="number" name="max" min="<%= ccFilterConfig.rangeData.min %>"
          max="<%= ccFilterConfig.rangeData.max %>" value="<%= ccFilterConfig.rangeData.max %>">
      </label>
    <% } %>
  </div>
  <div class="cc-filter-panel__footer">
    <button type="button" class="cc-button cc-button--primary" data-cc-apply-filter>
      <i class="ti ti-check" aria-hidden="true"></i>
      <span><%= i18n.__('catalogCommerce.applyFilters') %></span>
    </button>
    <button type="button" class="cc-button" data-cc-clear-filter>
      <i class="ti ti-filter-off" aria-hidden="true"></i>
      <span><%= i18n.__('catalogCommerce.clearFilters') %></span>
    </button>
  </div>
</section>
