<%
  const _lang = typeof lang !== 'undefined' ? lang : (typeof i18n !== 'undefined' ? i18n.getLocale() : 'ar');
  const _features = typeof packageFeatures !== 'undefined' && Array.isArray(packageFeatures) ? packageFeatures : [];
  const _selected = new Set(
    (typeof selectedFeatureIds !== 'undefined' && Array.isArray(selectedFeatureIds)
      ? selectedFeatureIds
      : []
    ).map(String)
  );
%>

<section class="form-section cc-package-section cc-package-section--features" id="packageFeaturesSection" data-package-section="features">
  <div class="section-title">
    <i class="ti ti-list-check" aria-hidden="true"></i>
    <span>
      <%= i18n.__('packages.packageFeatures') %>
      <small><%= i18n.__('packages.packageFeaturesHint') %></small>
    </span>
  </div>

  <div class="pkg-features-console" data-package-features>
    <div class="pkg-features-toolbar">
      <div class="pkg-features-summary">
        <span class="pkg-features-summary__icon" aria-hidden="true"><i class="ti ti-sparkles"></i></span>
        <span>
          <strong><%= i18n.__('packages.availableFeatures') %></strong>
          <small><span data-package-feature-count><%= _selected.size %></span> / <%= _features.length %> <%= i18n.__('packages.selectedFeatures') %></small>
        </span>
      </div>
      <% if (_features.length) { %>
        <div class="pkg-features-actions" role="group" aria-label="<%= i18n.__('packages.packageFeatures') %>">
          <button type="button" class="pkg-feature-command pkg-feature-command--select" data-package-features-select-all>
            <i class="ti ti-checks" aria-hidden="true"></i><%= i18n.__('packages.selectAllFeatures') %>
          </button>
          <button type="button" class="pkg-feature-command pkg-feature-command--clear" data-package-features-clear-all>
            <i class="ti ti-x" aria-hidden="true"></i><%= i18n.__('packages.clearAllFeatures') %>
          </button>
        </div>
      <% } %>
    </div>

    <% if (!_features.length) { %>
      <div class="pkg-features-empty">
        <i class="ti ti-list-search" aria-hidden="true"></i>
        <span><%= i18n.__('common.noData') || '—' %></span>
      </div>
    <% } else { %>
      <div class="pkg-features-list">
        <% _features.forEach((feature) => {
          const checked = _selected.has(String(feature._id));
        %>
          <label class="pkg-feature-item<%= checked ? ' is-checked' : '' %>" for="pkgFeature_<%= feature._id %>">
            <input
              class="form-check-input pkg-feature-checkbox"
              type="checkbox"
              name="features"
              value="<%= feature._id %>"
              id="pkgFeature_<%= feature._id %>"
              <%= checked ? 'checked' : '' %>
            >
            <span class="pkg-feature-item__check" aria-hidden="true"><i class="ti ti-check"></i></span>
            <span class="pkg-feature-label"><%= feature.name?.[_lang] || feature.name?.ar || feature.name?.en %></span>
          </label>
        <% }) %>
      </div>
    <% } %>
  </div>
</section>
