<%
  const pfLocale = typeof lang === 'string'
    ? lang
    : (i18n && typeof i18n.getLocale === 'function' ? i18n.getLocale() : 'ar');
  const pfIsEnglish = String(pfLocale).toLowerCase().startsWith('en');
  const pfBackUrl = '/dashboard/packageFeatures';
  const pfTitle = pfIsEnglish ? 'Edit AI pricing feature' : 'تعديل ميزة باقة تسعير AI';
  const pfSubtitle = pfIsEnglish
    ? 'Refine the bilingual name while preserving the feature purpose.'
    : 'حدّث اسم الميزة باللغتين مع الحفاظ على معناها.';
  const pfSurfaceTitle = pfIsEnglish ? 'Feature details' : 'بيانات الميزة';
  const pfSurfaceDescription = pfIsEnglish
    ? 'Review both language values and status before saving.'
    : 'راجع الاسم باللغتين والحالة قبل حفظ التعديل.';
  const pfArPlaceholder = pfIsEnglish ? 'Write the feature name in Arabic' : 'اكتب اسم الميزة بالعربية';
  const pfEnPlaceholder = 'Write the feature name in English';
  const pfArRequired = pfIsEnglish ? 'Arabic name is required' : 'الاسم بالعربية مطلوب';
  const pfEnRequired = pfIsEnglish ? 'English name is required' : 'الاسم بالإنجليزية مطلوب';
  const pfMinLength = pfIsEnglish ? 'Enter at least two characters' : 'يجب إدخال حرفين على الأقل';
%>

<link rel="stylesheet" href="/admin/assets/css/pages/package-features-form.css?v=1.0.0">

<section class="pf-page" dir="<%= pfIsEnglish ? 'ltr' : 'rtl' %>" data-pf-page>
  <div class="pf-container">
    <header class="pf-hero">
      <div class="pf-hero__identity">
        <span class="pf-hero__icon" aria-hidden="true"><i class="ti ti-list-details"></i></span>
        <div>
          <span class="pf-hero__eyebrow"><%= i18n.__('catalogCommerce.commerceOperations') %></span>
          <h1><%= pfTitle %></h1>
          <p><%= pfSubtitle %></p>
        </div>
      </div>
      <a class="pf-button pf-button--secondary" href="<%= pfBackUrl %>">
        <i class="ti ti-arrow-back-up" aria-hidden="true"></i>
        <span><%= i18n.__('common.referer') %></span>
      </a>
    </header>

    <section class="pf-surface" aria-labelledby="package-feature-form-title">
      <form id="editPackageFeature" class="pf-form needs-validation" method="POST"
        action="/dashboard/packageFeatures/edit/<%= feature._id %>" novalidate data-pf-form>
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">

        <div class="pf-surface__header">
          <div class="pf-surface__identity">
            <span class="pf-surface__icon" aria-hidden="true"><i class="ti ti-language"></i></span>
            <div>
              <h2 id="package-feature-form-title"><%= pfSurfaceTitle %></h2>
              <p><%= pfSurfaceDescription %></p>
            </div>
          </div>
          <span class="pf-language-pair" aria-label="Arabic and English">
            <b>AR</b><i class="ti ti-arrows-exchange" aria-hidden="true"></i><b>EN</b>
          </span>
        </div>

        <div class="pf-form__body">
          <div class="pf-form__grid">
            <div class="pf-field" data-pf-field>
              <label for="package-feature-name-ar">
                <span><%= i18n.__('packageFeatures.name_ar') %></span>
                <b aria-hidden="true">AR</b>
              </label>
              <input id="package-feature-name-ar" class="pf-control" type="text" name="name.ar"
                dir="rtl" required minlength="2" autocomplete="off"
                value="<%= feature.name?.ar || '' %>"
                placeholder="<%= pfArPlaceholder %>"
                aria-describedby="package-feature-name-ar-error" aria-invalid="false"
                data-pf-script="arabic"
                data-pf-required-message="<%= pfArRequired %>"
                data-pf-minlength-message="<%= pfMinLength %>"
                data-pf-script-message="<%= i18n.__('packageFeatures.arabicOnly') %>">
              <p id="package-feature-name-ar-error" class="pf-field__error invalid-feedback"
                data-pf-error aria-live="polite" aria-hidden="true">
                <i class="ti ti-alert-circle" aria-hidden="true"></i><span></span>
              </p>
            </div>

            <div class="pf-field" data-pf-field>
              <label for="package-feature-name-en">
                <span><%= i18n.__('packageFeatures.name_en') %></span>
                <b aria-hidden="true">EN</b>
              </label>
              <input id="package-feature-name-en" class="pf-control" type="text" name="name.en"
                dir="ltr" required minlength="2" autocomplete="off"
                value="<%= feature.name?.en || '' %>"
                placeholder="<%= pfEnPlaceholder %>"
                aria-describedby="package-feature-name-en-error" aria-invalid="false"
                data-pf-script="latin"
                data-pf-required-message="<%= pfEnRequired %>"
                data-pf-minlength-message="<%= pfMinLength %>"
                data-pf-script-message="<%= i18n.__('packageFeatures.englishOnly') %>">
              <p id="package-feature-name-en-error" class="pf-field__error invalid-feedback"
                data-pf-error aria-live="polite" aria-hidden="true">
                <i class="ti ti-alert-circle" aria-hidden="true"></i><span></span>
              </p>
            </div>

            <div class="pf-field pf-field--status" data-pf-field>
              <label for="status"><span><%= i18n.__('common.status') %></span></label>
              <div class="pf-select">
                <i class="ti ti-eye" aria-hidden="true"></i>
                <select name="status" id="status" class="pf-select__native" required data-pf-native-select>
                  <option value="active" <%= feature.presentation.status.activeSelected ? 'selected' : '' %>><%= i18n.__('common.active') %></option>
                  <option value="inActive" <%= feature.presentation.status.inactiveSelected ? 'selected' : '' %>><%= i18n.__('common.inActive') %></option>
                </select>
              </div>
            </div>
          </div>
          <p class="pf-form__message" data-pf-form-message aria-live="polite"></p>
        </div>

        <footer class="pf-form__footer">
          <button type="submit" class="pf-button pf-button--primary submit_button"
            data-pf-submit data-pf-default-label="<%= i18n.__('common.edit') %>"
            data-pf-loading-label="<%= pfIsEnglish ? 'Updating…' : 'جاري التعديل…' %>">
            <i class="ti ti-device-floppy" data-pf-submit-icon aria-hidden="true"></i>
            <i class="ti ti-loader-2 pf-spinner" data-pf-submit-spinner aria-hidden="true" hidden></i>
            <span data-pf-submit-label><%= i18n.__('common.edit') %></span>
          </button>
        </footer>
      </form>
    </section>
  </div>
</section>

<%- include('includes.ejs') %>
