<%
  const termsLocale = (
    typeof lang === 'string'
      ? lang
      : (
        typeof user !== 'undefined'
        && user
        && typeof user.lang === 'string'
          ? user.lang
          : 'ar'
      )
  );
  const termsIsEnglish = String(termsLocale).toLowerCase().startsWith('en');
  const termsSettings = (
    typeof setting !== 'undefined'
    && setting
    && typeof setting === 'object'
  ) ? setting : {};
  const termsData = (
    termsSettings.terms
    && typeof termsSettings.terms === 'object'
  ) ? termsSettings.terms : {};
  const termsValue = (value) => (
    value === undefined || value === null ? '' : value
  );
  const termsImageName = typeof termsData.image === 'string'
    ? termsData.image.trim()
    : '';
  const termsImageSrc = typeof settingMediaAvailability === 'object'
    ? (settingMediaAvailability.terms || '')
    : (termsImageName
      ? `/assets/uploads/settings/terms/${encodeURIComponent(termsImageName)}`
      : '');
  const termsCopy = termsIsEnglish
    ? {
      legalTitle: 'Legal content',
      legalHelper: 'Maintain aligned Arabic and English terms in one focused workspace.',
      arLabel: 'Arabic terms',
      enLabel: 'English terms',
      arPlaceholder: 'Write the Arabic terms and conditions',
      enPlaceholder: 'Write the English terms and conditions',
      editorLabel: 'Legal rich text editor',
      bold: 'Bold',
      list: 'Bulleted list',
      heading: 'Legal heading',
      guidanceTitle: 'Publishing guidance',
      guidanceHelper: 'Keep both versions complete, readable, and semantically aligned.',
      imageTitle: 'Legal cover',
      imageHelper: 'Optional supporting image for the public legal page.',
      chooseImage: 'Choose image',
      replaceImage: 'Replace image',
      resetImage: 'Undo selection',
      imageFormats: 'PNG / JPG / JPEG / WEBP only',
      noImage: 'No cover selected',
      currentImage: 'Current cover',
      invalidImage: 'Choose a PNG, JPG, JPEG, or WEBP image only',
      unreadableImage: 'This image could not be read. Choose another image.',
      saved: 'Saved',
      dirty: 'Unsaved changes',
      saveTitle: 'Legal content is ready',
      saveHelper: 'Both language versions are stored together.',
      dirtyHelper: 'Review both language versions before saving.',
      save: 'Save changes',
      saving: 'Saving...',
      saveSuccess: 'Terms and conditions were saved',
      saveError: 'Terms and conditions could not be saved',
      required: 'This field is required',
    }
    : {
      legalTitle: 'المحتوى القانوني',
      legalHelper: 'حرّر النسختين العربية والإنجليزية داخل مساحة واحدة واضحة.',
      arLabel: 'الشروط بالعربية',
      enLabel: 'الشروط بالإنجليزية',
      arPlaceholder: 'اكتب الشروط والأحكام بالعربية',
      enPlaceholder: 'Write the terms and conditions in English',
      editorLabel: 'محرر المحتوى القانوني',
      bold: 'خط عريض',
      list: 'قائمة نقطية',
      heading: 'عنوان قانوني',
      guidanceTitle: 'إرشادات النشر',
      guidanceHelper: 'حافظ على اكتمال النسختين ووضوحهما وتطابق معناهما.',
      imageTitle: 'غلاف المحتوى',
      imageHelper: 'صورة مساندة اختيارية لصفحة الشروط العامة.',
      chooseImage: 'اختيار صورة',
      replaceImage: 'استبدال الصورة',
      resetImage: 'تراجع عن الاختيار',
      imageFormats: 'PNG / JPG / JPEG / WEBP فقط',
      noImage: 'لا يوجد غلاف محدد',
      currentImage: 'الغلاف الحالي',
      invalidImage: 'اختر صورة بصيغة PNG أو JPG أو JPEG أو WEBP فقط',
      unreadableImage: 'تعذر قراءة الصورة. اختر صورة أخرى.',
      saved: 'محفوظ',
      dirty: 'توجد تغييرات غير محفوظة',
      saveTitle: 'المحتوى القانوني جاهز',
      saveHelper: 'تُحفظ النسختان معًا في عملية واحدة.',
      dirtyHelper: 'راجع النسختين قبل إتمام الحفظ.',
      save: 'حفظ التغييرات',
      saving: 'جاري الحفظ...',
      saveSuccess: 'تم حفظ الشروط والأحكام',
      saveError: 'تعذر حفظ الشروط والأحكام',
      required: 'هذا الحقل مطلوب',
    };
%>

<section
  class="kt-settings-module kt-settings-module--terms"
  dir="<%= termsIsEnglish ? 'ltr' : 'rtl' %>"
  data-settings-module="terms"
  data-settings-module-saved-label="<%= termsCopy.saved %>"
  data-settings-module-dirty-label="<%= termsCopy.dirty %>"
  data-settings-module-saved-helper="<%= termsCopy.saveHelper %>"
  data-settings-module-dirty-helper="<%= termsCopy.dirtyHelper %>"
  data-settings-module-success="<%= termsCopy.saveSuccess %>"
  data-settings-module-error="<%= termsCopy.saveError %>"
>
  <form
    id="settings-terms-form"
    action="/dashboard/settings/editTerms"
    method="post"
    enctype="multipart/form-data"
    novalidate
    class="kt-settings-module__form"
    data-settings-module-form
  >
    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
    <input type="hidden" name="_id" value="<%= termsValue(termsSettings._id) %>">

    <div class="kt-settings-module__legal-layout">
      <section
        class="kt-settings-module__group kt-settings-module__group--primary"
        aria-labelledby="settings-terms-content-title"
      >
        <header class="kt-settings-module__group-header">
          <span class="kt-settings-module__group-icon" aria-hidden="true">
            <i class="ti ti-file-certificate"></i>
          </span>
          <div>
            <h3 id="settings-terms-content-title"><%= termsCopy.legalTitle %></h3>
            <p><%= termsCopy.legalHelper %></p>
          </div>
        </header>

        <div class="kt-settings-module__editor-grid">
          <div class="kt-settings-module__field" data-settings-module-field>
            <span class="kt-settings-module__label" id="settings-terms-ar-label">
              <span><%= termsCopy.arLabel %></span>
              <small>AR</small>
            </span>
            <div
              class="kt-settings-module__editor kt-settings-module__editor--legal kt-settings-module__editor--rich"
              data-settings-rich-editor
            >
              <div
                class="kt-settings-module__editor-toolbar"
                role="toolbar"
                aria-label="<%= termsCopy.editorLabel %>"
              >
                <button
                  type="button"
                  data-settings-rich-command="bold"
                  aria-label="<%= termsCopy.bold %>"
                  title="<%= termsCopy.bold %>"
                >
                  <i class="ti ti-bold" aria-hidden="true"></i>
                </button>
                <button
                  type="button"
                  data-settings-rich-command="insertUnorderedList"
                  aria-label="<%= termsCopy.list %>"
                  title="<%= termsCopy.list %>"
                >
                  <i class="ti ti-list" aria-hidden="true"></i>
                </button>
                <button
                  type="button"
                  data-settings-rich-command="formatBlock"
                  data-settings-rich-value="h3"
                  aria-label="<%= termsCopy.heading %>"
                  title="<%= termsCopy.heading %>"
                >
                  <i class="ti ti-h-3" aria-hidden="true"></i>
                </button>
                <small>AR</small>
              </div>
              <div
                id="settings-terms-ar-editor"
                class="kt-settings-module__rich-surface"
                contenteditable="true"
                role="textbox"
                aria-multiline="true"
                aria-labelledby="settings-terms-ar-label"
                aria-describedby="settings-terms-ar-error"
                aria-invalid="false"
                dir="rtl"
                data-placeholder="<%= termsCopy.arPlaceholder %>"
                data-settings-rich-editor-surface
              ></div>
              <textarea
                id="settings-terms-ar-source"
                name="terms[ar]"
                hidden
                required
                data-settings-module-input
                data-settings-rich-editor-source
                data-settings-required-message="<%= termsCopy.required %>"
                aria-describedby="settings-terms-ar-error"
                aria-invalid="false"
              ><%= termsValue(termsData.ar) %></textarea>
            </div>
            <p
              class="kt-settings-module__error"
              id="settings-terms-ar-error"
              data-settings-module-error
              hidden
            >
              <i class="ti ti-alert-circle" aria-hidden="true"></i>
              <span><%= termsCopy.required %></span>
            </p>
          </div>

          <div class="kt-settings-module__field" data-settings-module-field>
            <span class="kt-settings-module__label" id="settings-terms-en-label">
              <span><%= termsCopy.enLabel %></span>
              <small>EN</small>
            </span>
            <div
              class="kt-settings-module__editor kt-settings-module__editor--legal kt-settings-module__editor--rich"
              data-settings-rich-editor
            >
              <div
                class="kt-settings-module__editor-toolbar"
                role="toolbar"
                aria-label="<%= termsCopy.editorLabel %>"
              >
                <button
                  type="button"
                  data-settings-rich-command="bold"
                  aria-label="<%= termsCopy.bold %>"
                  title="<%= termsCopy.bold %>"
                >
                  <i class="ti ti-bold" aria-hidden="true"></i>
                </button>
                <button
                  type="button"
                  data-settings-rich-command="insertUnorderedList"
                  aria-label="<%= termsCopy.list %>"
                  title="<%= termsCopy.list %>"
                >
                  <i class="ti ti-list" aria-hidden="true"></i>
                </button>
                <button
                  type="button"
                  data-settings-rich-command="formatBlock"
                  data-settings-rich-value="h3"
                  aria-label="<%= termsCopy.heading %>"
                  title="<%= termsCopy.heading %>"
                >
                  <i class="ti ti-h-3" aria-hidden="true"></i>
                </button>
                <small>EN</small>
              </div>
              <div
                id="settings-terms-en-editor"
                class="kt-settings-module__rich-surface"
                contenteditable="true"
                role="textbox"
                aria-multiline="true"
                aria-labelledby="settings-terms-en-label"
                aria-describedby="settings-terms-en-error"
                aria-invalid="false"
                dir="ltr"
                data-placeholder="<%= termsCopy.enPlaceholder %>"
                data-settings-rich-editor-surface
              ></div>
              <textarea
                id="settings-terms-en-source"
                name="terms[en]"
                hidden
                required
                data-settings-module-input
                data-settings-rich-editor-source
                data-settings-required-message="<%= termsCopy.required %>"
                aria-describedby="settings-terms-en-error"
                aria-invalid="false"
              ><%= termsValue(termsData.en) %></textarea>
            </div>
            <p
              class="kt-settings-module__error"
              id="settings-terms-en-error"
              data-settings-module-error
              hidden
            >
              <i class="ti ti-alert-circle" aria-hidden="true"></i>
              <span><%= termsCopy.required %></span>
            </p>
          </div>
        </div>
      </section>

      <aside class="kt-settings-module__legal-aside">
        <div class="kt-settings-module__callout">
          <span class="kt-settings-module__callout-icon" aria-hidden="true">
            <i class="ti ti-scale"></i>
          </span>
          <div>
            <strong><%= termsCopy.guidanceTitle %></strong>
            <p><%= termsCopy.guidanceHelper %></p>
          </div>
        </div>

        <section
          class="kt-settings-module__group kt-settings-module__group--media kt-settings-module__group--compact"
          aria-labelledby="settings-terms-media-title"
        >
          <header class="kt-settings-module__group-header">
            <span class="kt-settings-module__group-icon" aria-hidden="true">
              <i class="ti ti-photo"></i>
            </span>
            <div>
              <h3 id="settings-terms-media-title"><%= termsCopy.imageTitle %></h3>
              <p><%= termsCopy.imageHelper %></p>
            </div>
          </header>

          <div
            class="kt-settings-module__upload kt-settings-module__upload--compact"
            data-settings-module-upload
            data-settings-upload-original-src="<%= termsImageSrc %>"
            data-settings-upload-invalid-message="<%= termsCopy.invalidImage %>"
            data-settings-upload-unreadable-message="<%= termsCopy.unreadableImage %>"
          >
            <div class="kt-settings-module__upload-preview">
              <img
                src="<%= termsImageSrc %>"
                alt=""
                data-settings-module-upload-preview
                <%= termsImageSrc ? '' : 'hidden' %>
              >
              <span
                class="kt-settings-module__upload-placeholder"
                data-settings-module-upload-placeholder
                <%= termsImageSrc ? 'hidden' : '' %>
              >
                <i class="ti ti-photo-plus" aria-hidden="true"></i>
                <small><%= termsCopy.noImage %></small>
              </span>
              <span class="kt-settings-module__upload-current">
                <i class="ti ti-circle-check" aria-hidden="true"></i>
                <%= termsCopy.currentImage %>
              </span>
            </div>
            <div class="kt-settings-module__upload-copy">
              <strong><%= termsCopy.imageFormats %></strong>
              <span class="kt-settings-module__upload-file" data-settings-module-upload-file></span>
            </div>
            <div class="kt-settings-module__upload-actions">
              <label class="kt-settings-module__upload-button" for="settings-terms-image">
                <i class="ti ti-upload" aria-hidden="true"></i>
                <span
                  data-settings-module-upload-label
                  data-choose-label="<%= termsCopy.chooseImage %>"
                  data-replace-label="<%= termsCopy.replaceImage %>"
                ><%= termsCopy.chooseImage %></span>
              </label>
              <button
                class="kt-settings-module__upload-reset"
                type="button"
                data-settings-module-upload-reset
                hidden
              >
                <i class="ti ti-arrow-back-up" aria-hidden="true"></i>
                <span><%= termsCopy.resetImage %></span>
              </button>
            </div>
            <input
              class="kt-settings-module__file-input"
              id="settings-terms-image"
              name="image"
              type="file"
              accept="image/png,image/jpeg,image/jpg,image/webp"
              data-settings-module-upload-input
            >
            <p class="kt-settings-module__error" data-settings-module-error hidden>
              <i class="ti ti-alert-circle" aria-hidden="true"></i>
              <span><%= termsCopy.invalidImage %></span>
            </p>
          </div>
        </section>
      </aside>
    </div>

    <footer class="kt-settings-module__command" data-settings-module-command>
      <div class="kt-settings-module__command-copy">
        <span class="kt-settings-module__command-icon" aria-hidden="true">
          <i class="ti ti-shield-lock"></i>
        </span>
        <span>
          <strong><%= termsCopy.saveTitle %></strong>
          <small data-settings-module-save-helper><%= termsCopy.saveHelper %></small>
        </span>
        <span class="kt-settings-module__status is-saved" data-settings-module-status>
          <i class="ti ti-circle-check" aria-hidden="true"></i>
          <span data-settings-module-status-label><%= termsCopy.saved %></span>
        </span>
      </div>
      <p class="kt-settings-module__form-message" data-settings-module-form-message aria-live="polite"></p>
      <button class="kt-settings-module__submit" type="submit" data-settings-module-submit disabled>
        <span class="kt-settings-module__submit-spinner" aria-hidden="true"></span>
        <i class="ti ti-device-floppy" aria-hidden="true"></i>
        <span
          data-settings-module-submit-label
          data-idle-label="<%= termsCopy.save %>"
          data-busy-label="<%= termsCopy.saving %>"
        ><%= termsCopy.save %></span>
      </button>
    </footer>
  </form>
</section>