<%
  const reasonIconSource = String(reason?.icon || '/admin/assets/img/product-report-reason-fallback.svg')
    .replace(/^https?:\/\/[^/]+(?=\/admin\/assets\/)/i, '');
%>
<div class="kt-ops-form__body">
  <div class="kt-ops-form-grid">
    <section class="kt-ops-language-card" dir="rtl" lang="ar">
      <div class="kt-ops-language-card__head">
        <strong><%= i18n.__('operationsContent.arabic') %></strong>
        <span class="kt-ops-language-chip kt-ops-language-chip--ar">AR · عربي</span>
      </div>
      <div class="kt-ops-field" data-ops-field>
        <label for="reason-title-ar"><%= i18n.__('productReports.titleAr') %></label>
        <input class="kt-ops-control" id="reason-title-ar" name="titleAr" type="text"
          dir="rtl" lang="ar" data-ops-script="arabic" minlength="2" maxlength="120"
          value="<%= reason?.title?.ar || '' %>" placeholder="أدخل عنوان السبب باللغة العربية" required>
        <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
      </div>
      <div class="kt-ops-field" data-ops-field>
        <label for="reason-description-ar"><%= i18n.__('productReports.descriptionAr') %></label>
        <textarea class="kt-ops-control" id="reason-description-ar" name="descriptionAr"
          dir="rtl" lang="ar" data-ops-script="arabic" minlength="5" maxlength="500"
          placeholder="اشرح متى يستخدم العميل هذا السبب" required><%= reason?.description?.ar || '' %></textarea>
        <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
      </div>
    </section>
    <section class="kt-ops-language-card" dir="ltr" lang="en">
      <div class="kt-ops-language-card__head">
        <strong><%= i18n.__('operationsContent.english') %></strong>
        <span class="kt-ops-language-chip">EN · English</span>
      </div>
      <div class="kt-ops-field" data-ops-field>
        <label for="reason-title-en"><%= i18n.__('productReports.titleEn') %></label>
        <input class="kt-ops-control" id="reason-title-en" name="titleEn" type="text"
          dir="ltr" lang="en" data-ops-script="latin" minlength="2" maxlength="120"
          value="<%= reason?.title?.en || '' %>" placeholder="Enter the reason title in English" required>
        <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
      </div>
      <div class="kt-ops-field" data-ops-field>
        <label for="reason-description-en"><%= i18n.__('productReports.descriptionEn') %></label>
        <textarea class="kt-ops-control" id="reason-description-en" name="descriptionEn"
          dir="ltr" lang="en" data-ops-script="latin" minlength="5" maxlength="500"
          placeholder="Explain when a client should use this reason" required><%= reason?.description?.en || '' %></textarea>
        <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
      </div>
    </section>
  </div>

  <div class="kt-product-reporting__settings-grid">
    <section class="kt-ops-language-card">
      <div class="kt-ops-language-card__head">
        <strong><%= i18n.__('productReports.icon') %></strong>
        <span class="kt-ops-language-chip"><i class="ti ti-photo"></i></span>
      </div>
      <div class="kt-product-reporting__icon-editor">
        <span class="kt-product-reporting__reason-icon is-large" data-ops-media-wrap>
          <img src="<%= reasonIconSource %>"
            alt="" data-ops-media data-ops-preview-image>
          <i class="ti ti-flag-3" data-ops-media-fallback hidden></i>
        </span>
        <div class="kt-ops-field" data-ops-field>
          <div class="kt-ops-file">
            <input class="kt-ops-file__input" id="reason-icon" name="icon" type="file"
              accept="image/jpeg,image/png,image/webp" data-ops-file-input>
            <label class="kt-ops-file__trigger" for="reason-icon">
              <span class="kt-ops-file__icon"><i class="ti ti-cloud-upload"></i></span>
              <span data-ops-file-label data-empty-label="<%= i18n.__('productReports.iconHint') %>">
                <%= i18n.__('productReports.iconHint') %>
              </span>
            </label>
          </div>
          <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
        </div>
      </div>
    </section>
    <section class="kt-ops-language-card">
      <div class="kt-ops-language-card__head">
        <strong><%= i18n.__('productReports.status') %></strong>
        <span class="kt-ops-language-chip"><i class="ti ti-adjustments"></i></span>
      </div>
      <div class="kt-product-reporting__compact-fields">
        <div class="kt-ops-field" data-ops-field>
          <label for="reason-active"><%= i18n.__('productReports.status') %></label>
          <div data-ops-select>
            <select id="reason-active" name="isActive" data-ops-native-select required>
              <option value="true" <%= reason?.isActive !== false ? 'selected' : '' %>><%= i18n.__('productReports.active') %></option>
              <option value="false" <%= reason?.isActive === false ? 'selected' : '' %>><%= i18n.__('productReports.inactive') %></option>
            </select>
          </div>
          <p class="kt-ops-field__error" data-ops-field-error></p>
        </div>
        <div class="kt-ops-field" data-ops-field>
          <label for="reason-order"><%= i18n.__('productReports.sortOrder') %></label>
          <input class="kt-ops-control" id="reason-order" name="sortOrder" type="number"
            min="0" max="100000" step="1" value="<%= reason?.sortOrder ?? 0 %>" required>
          <p class="kt-ops-field__error" data-ops-field-error></p>
        </div>
      </div>
    </section>
  </div>
</div>
