<%
  const formPackage = typeof packageData !== 'undefined' && packageData ? packageData : {};
  const formIsEdit = Boolean(typeof isEdit !== 'undefined' && isEdit);
  const formIsFree = Boolean(formPackage.isFree);
  const formStatus = formPackage.status || 'active';
  const formType = formPackage.type || 'monthly';
  const validationSummaryTitle = i18n.__('packages.validationSummaryTitle');
  const validationSummaryHint = i18n.__('packages.validationSummaryHint');
%>

<div class="cc-validation-summary" data-package-validation-summary role="alert" tabindex="-1" hidden>
  <span class="cc-validation-summary__icon" aria-hidden="true"><i class="ti ti-alert-circle"></i></span>
  <div class="cc-validation-summary__copy">
    <strong><%= validationSummaryTitle %></strong>
    <p data-package-validation-summary-copy><%= validationSummaryHint %></p>
    <ul data-package-validation-list></ul>
  </div>
  <button class="cc-validation-summary__action" type="button" data-package-validation-focus>
    <%= i18n.__('packages.validationFocusFirst') %>
    <i class="ti ti-arrow-down" aria-hidden="true"></i>
  </button>
</div>

<div class="form-body cc-package-form__body">
  <section class="form-section cc-package-section" data-package-section="identity">
    <div class="section-title">
      <i class="ti ti-forms" aria-hidden="true"></i>
      <span>
        <%= i18n.__('packages.packageName') %>
        <small><%= i18n.__('packages.identitySectionHint') %></small>
      </span>
    </div>
    <div class="two-col cc-package-fields cc-package-fields--bilingual">
      <% languages.forEach((language) => {
        const languageValue = language.value;
        const fieldId = `package_name_${languageValue}`;
        const fieldErrorId = `${fieldId}_error`;
        const label = i18n.__(`packages.name_${languageValue}`);
        const value = formPackage.name?.[languageValue] || '';
        const isArabic = languageValue === 'ar';
      %>
        <div class="cc-package-field" data-package-field>
          <label for="<%= fieldId %>">
            <span><%= label %><b aria-hidden="true">*</b></span>
            <span class="cc-language-badge cc-language-badge--<%= isArabic ? 'arabic' : 'latin' %>"><%= isArabic ? 'AR · عربي' : 'EN · English' %></span>
          </label>
          <input
            class="form-control cc-language-field"
            id="<%= fieldId %>"
            name="name.<%= languageValue %>"
            type="text"
            value="<%= value %>"
            placeholder="<%= i18n.__('common.{{field}}Placeholder', { field: label }) %>"
            dir="<%= isArabic ? 'rtl' : 'ltr' %>"
            lang="<%= languageValue %>"
            minlength="2"
            required
            aria-describedby="<%= fieldErrorId %>"
            data-package-validate="language"
            data-package-script="<%= isArabic ? 'arabic' : 'latin' %>"
            data-package-label="<%= label %>"
            data-required-message="<%= i18n.__('common.{{field}}Required', { field: label }) %>"
            data-min-message="<%= i18n.__(`packages.name_${languageValue}TooShort`) %>"
            data-script-message="<%= i18n.__(isArabic ? 'common.arabicOnly' : 'common.englishOnly') %>"
          >
          <p class="cc-field-message" id="<%= fieldErrorId %>" data-package-field-error hidden>
            <i class="ti ti-alert-circle" aria-hidden="true"></i>
            <span data-package-field-error-copy></span>
          </p>
        </div>
      <% }) %>
    </div>
  </section>

  <section class="form-section cc-package-section" data-package-section="description">
    <div class="section-title">
      <i class="ti ti-align-left" aria-hidden="true"></i>
      <span>
        <%= i18n.__('packages.description') %>
        <small><%= i18n.__('packages.descriptionSectionHint') %></small>
      </span>
    </div>
    <div class="two-col cc-package-fields cc-package-fields--bilingual">
      <% languages.forEach((language) => {
        const languageValue = language.value;
        const fieldId = `package_description_${languageValue}`;
        const fieldErrorId = `${fieldId}_error`;
        const label = i18n.__(`packages.description_${languageValue}`);
        const value = formPackage.description?.[languageValue] || '';
        const isArabic = languageValue === 'ar';
      %>
        <div class="cc-package-field" data-package-field>
          <label for="<%= fieldId %>">
            <span><%= label %><em><%= i18n.__('common.optional') %></em></span>
            <span class="cc-language-badge cc-language-badge--<%= isArabic ? 'arabic' : 'latin' %>"><%= isArabic ? 'AR · عربي' : 'EN · English' %></span>
          </label>
          <textarea
            class="form-control cc-language-field"
            id="<%= fieldId %>"
            name="description.<%= languageValue %>"
            rows="4"
            placeholder="<%= i18n.__('common.{{field}}Placeholder', { field: label }) %>"
            dir="<%= isArabic ? 'rtl' : 'ltr' %>"
            lang="<%= languageValue %>"
            minlength="2"
            aria-describedby="<%= fieldErrorId %>"
            data-package-validate="language-optional"
            data-package-script="<%= isArabic ? 'arabic' : 'latin' %>"
            data-package-label="<%= label %>"
            data-min-message="<%= i18n.__(`packages.description_${languageValue}TooShort`) %>"
            data-script-message="<%= i18n.__(isArabic ? 'common.arabicOnly' : 'common.englishOnly') %>"
          ><%= value %></textarea>
          <p class="cc-field-message" id="<%= fieldErrorId %>" data-package-field-error hidden>
            <i class="ti ti-alert-circle" aria-hidden="true"></i>
            <span data-package-field-error-copy></span>
          </p>
        </div>
      <% }) %>
    </div>
  </section>

  <section class="form-section cc-package-section" data-package-section="commercial">
    <div class="section-title">
      <i class="ti ti-settings" aria-hidden="true"></i>
      <span>
        <%= i18n.__('packages.packageInformation') %>
        <small><%= i18n.__('packages.commercialSectionHint') %></small>
      </span>
    </div>
    <div class="cc-package-fields cc-package-fields--commercial">
      <div class="cc-package-field" data-package-field>
        <label for="price"><span><%= i18n.__('packages.price') %><b aria-hidden="true">*</b></span></label>
        <div class="cc-input-affix">
          <input
            class="form-control"
            id="price"
            name="price"
            type="number"
            value="<%= formIsFree ? 0 : (formPackage.price || '') %>"
            placeholder="0.00"
            min="0"
            step="0.01"
            inputmode="decimal"
            <%= formIsFree ? 'readonly disabled' : 'required' %>
            aria-describedby="price_error"
            data-package-validate="price"
            data-package-label="<%= i18n.__('packages.price') %>"
            data-required-message="<%= i18n.__('common.{{field}}Required', { field: i18n.__('packages.price') }) %>"
            data-positive-message="<%= i18n.__('packages.priceInvalid') %>"
          >
          <span aria-hidden="true"><%= i18n.__('common.currency') %></span>
        </div>
        <p class="cc-field-message" id="price_error" data-package-field-error hidden>
          <i class="ti ti-alert-circle" aria-hidden="true"></i>
          <span data-package-field-error-copy></span>
        </p>
        <% if (formIsFree) { %><input type="hidden" id="isFreePriceHidden" name="price" value="0"><% } %>
      </div>

      <div class="cc-package-field" data-package-field>
        <label for="duration"><span><%= i18n.__('packages.duration') %><b aria-hidden="true">*</b></span></label>
        <input
          class="form-control"
          id="duration"
          name="duration"
          type="number"
          value="<%= formPackage.duration || '' %>"
          placeholder="1"
          min="1"
          step="1"
          inputmode="numeric"
          required
          aria-describedby="duration_error"
          data-package-validate="integer"
          data-package-label="<%= i18n.__('packages.duration') %>"
          data-required-message="<%= i18n.__('common.{{field}}Required', { field: i18n.__('packages.duration') }) %>"
          data-positive-message="<%= i18n.__('packages.durationInvalid') %>"
        >
        <p class="cc-field-message" id="duration_error" data-package-field-error hidden>
          <i class="ti ti-alert-circle" aria-hidden="true"></i>
          <span data-package-field-error-copy></span>
        </p>
      </div>

      <div class="cc-package-field" data-package-field>
        <label for="type"><span><%= i18n.__('packages.type') %><b aria-hidden="true">*</b></span></label>
        <select
          class="form-select select2"
          id="type"
          name="type"
          required
          aria-describedby="type_error"
          data-package-validate="required"
          data-package-label="<%= i18n.__('packages.type') %>"
          data-required-message="<%= i18n.__('packages.typeInvalid') %>"
        >
          <option value="monthly" <%= formType === 'monthly' ? 'selected' : '' %>><%= i18n.__('packages.monthly') %></option>
          <option value="daily" <%= formType === 'daily' ? 'selected' : '' %>><%= i18n.__('packages.daily') %></option>
          <option value="yearly" <%= formType === 'yearly' ? 'selected' : '' %>><%= i18n.__('packages.yearly') %></option>
        </select>
        <p class="cc-field-message" id="type_error" data-package-field-error hidden>
          <i class="ti ti-alert-circle" aria-hidden="true"></i>
          <span data-package-field-error-copy></span>
        </p>
      </div>

      <label class="cc-package-free" for="isFree">
        <span class="cc-package-free__icon"><i class="ti ti-gift" aria-hidden="true"></i></span>
        <span class="cc-package-free__copy">
          <strong><%= i18n.__('packages.isFree') %></strong>
          <small><%= i18n.__('packages.freePackageHint') %></small>
        </span>
        <input class="form-check-input" type="checkbox" role="switch" name="isFree" id="isFree" value="true" <%= formIsFree ? 'checked' : '' %>>
      </label>
    </div>
  </section>

  <section class="form-section cc-package-section" data-package-section="badge">
    <div class="section-title">
      <i class="ti ti-flag" aria-hidden="true"></i>
      <span>
        <%= i18n.__('packages.flagetext') %>
        <small><%= i18n.__('packages.badgeSectionHint') %></small>
      </span>
    </div>
    <div class="two-col cc-package-fields cc-package-fields--bilingual">
      <% languages.forEach((language) => {
        const languageValue = language.value;
        const fieldId = `package_badge_${languageValue}`;
        const fieldErrorId = `${fieldId}_error`;
        const label = i18n.__(`packages.flagetext_${languageValue}`);
        const value = formPackage.flagetext?.[languageValue] || '';
        const isArabic = languageValue === 'ar';
      %>
        <div class="cc-package-field" data-package-field>
          <label for="<%= fieldId %>">
            <span><%= label %><em><%= i18n.__('common.optional') %></em></span>
            <span class="cc-language-badge cc-language-badge--<%= isArabic ? 'arabic' : 'latin' %>"><%= isArabic ? 'AR · عربي' : 'EN · English' %></span>
          </label>
          <input
            class="form-control cc-language-field"
            id="<%= fieldId %>"
            name="flagetext.<%= languageValue %>"
            type="text"
            value="<%= value %>"
            maxlength="100"
            placeholder="<%= i18n.__('common.{{field}}Placeholder', { field: label }) %>"
            dir="<%= isArabic ? 'rtl' : 'ltr' %>"
            lang="<%= languageValue %>"
            aria-describedby="<%= fieldErrorId %>"
            data-package-validate="language-optional"
            data-package-script="<%= isArabic ? 'arabic' : 'latin' %>"
            data-package-label="<%= label %>"
            data-max-message="<%= i18n.__('packages.flagetextTooLong') %>"
            data-script-message="<%= i18n.__(isArabic ? 'common.arabicOnly' : 'common.englishOnly') %>"
          >
          <p class="cc-field-message" id="<%= fieldErrorId %>" data-package-field-error hidden>
            <i class="ti ti-alert-circle" aria-hidden="true"></i>
            <span data-package-field-error-copy></span>
          </p>
        </div>
      <% }) %>
    </div>
  </section>

  <section class="form-section cc-package-section cc-package-section--compact" data-package-section="status">
    <div class="section-title">
      <i class="ti ti-toggle-right" aria-hidden="true"></i>
      <span>
        <%= i18n.__('common.status') %>
        <small><%= i18n.__('packages.statusSectionHint') %></small>
      </span>
    </div>
    <div class="cc-package-fields cc-package-fields--status">
      <div class="cc-package-field" data-package-field>
        <label for="status"><span><%= i18n.__('common.status') %></span></label>
        <select class="form-select select2" id="status" name="status">
          <option value="active" <%= formStatus === 'active' ? 'selected' : '' %>><%= i18n.__('common.active') %></option>
          <option value="inActive" <%= formStatus === 'inActive' ? 'selected' : '' %>><%= i18n.__('common.inActive') %></option>
        </select>
      </div>
    </div>
  </section>

  <%- include('featurePicker', { selectedFeatureIds: typeof selectedFeatureIds !== 'undefined' ? selectedFeatureIds : [] }) %>

  <div class="cc-package-actions cc-action-dock">
    <div class="cc-package-actions__copy">
      <i class="ti ti-shield-check" aria-hidden="true"></i>
      <span><strong><%= i18n.__('packages.readyToSave') %></strong><small><%= i18n.__('packages.saveHint') %></small></span>
    </div>
    <div class="cc-package-actions__buttons">
      <a class="btn btn-label-dribbble waves-effect cc-secondary-action" href="<%= referer %>"><%= i18n.__('common.referer') %></a>
      <button type="submit" class="btn btn-primary waves-effect waves-light submit_button cc-primary-action">
        <i class="ti <%= formIsEdit ? 'ti-device-floppy' : 'ti-plus' %>" aria-hidden="true"></i>
        <span><%= submitLabel %></span>
      </button>
    </div>
  </div>
</div>
