<%
  const aboutLocale = (
    typeof lang === 'string'
      ? lang
      : (
        typeof user !== 'undefined'
        && user
        && typeof user.lang === 'string'
          ? user.lang
          : 'ar'
      )
  );
  const aboutIsEnglish = String(aboutLocale).toLowerCase().startsWith('en');
  const aboutSettings = (
    typeof setting !== 'undefined'
    && setting
    && typeof setting === 'object'
  ) ? setting : {};
  const aboutData = (
    aboutSettings.about
    && typeof aboutSettings.about === 'object'
  ) ? aboutSettings.about : {};
  const aboutTitle = (
    aboutData.title
    && typeof aboutData.title === 'object'
  ) ? aboutData.title : {};
  const aboutDescription = (
    aboutData.description
    && typeof aboutData.description === 'object'
  ) ? aboutData.description : {};
  const aboutValue = (value) => (
    value === undefined || value === null ? '' : value
  );
  const aboutImageName = typeof aboutData.image === 'string'
    ? aboutData.image.trim()
    : '';
  const aboutImageSrc = typeof settingMediaAvailability === 'object'
    ? (settingMediaAvailability.about || '')
    : (aboutImageName
      ? `/assets/uploads/settings/about/${encodeURIComponent(aboutImageName)}`
      : '');
  const aboutCopy = aboutIsEnglish
    ? {
      contentTitle: 'Content identity',
      contentHelper: 'Pair the Arabic and English story shown across public surfaces.',
      mediaTitle: 'Section image',
      mediaHelper: 'A clear visual that represents the platform story.',
      titleAr: 'Arabic title',
      titleEn: 'English title',
      descriptionAr: 'Arabic description',
      descriptionEn: 'English description',
      titleArPlaceholder: 'Write the Arabic title',
      titleEnPlaceholder: 'Write the English title',
      descriptionArPlaceholder: 'Describe the platform in Arabic',
      descriptionEnPlaceholder: 'Describe the platform in English',
      editorLabel: 'Rich text editor',
      bold: 'Bold',
      list: 'Bulleted list',
      heading: 'Section heading',
      chooseImage: 'Choose image',
      replaceImage: 'Replace image',
      resetImage: 'Undo selection',
      imageFormats: 'PNG / JPG / JPEG / WEBP only',
      imageHint: 'Use a clear, optimized landscape image.',
      currentImage: 'Current image',
      noImage: 'No image selected',
      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',
      readyTitle: 'About content is ready',
      readyHelper: 'Changes appear after a successful secure save.',
      dirtyHelper: 'Review the pending content before saving.',
      save: 'Save changes',
      saving: 'Saving...',
      saveSuccess: 'About content was saved',
      saveError: 'About content could not be saved',
      required: 'This field is required',
    }
    : {
      contentTitle: 'محتوى التعريف',
      contentHelper: 'صِغ قصة المنصة بالعربية والإنجليزية بشكل متناسق.',
      mediaTitle: 'صورة القسم',
      mediaHelper: 'صورة واضحة تعبّر عن هوية المنصة ورسالتها.',
      titleAr: 'العنوان بالعربية',
      titleEn: 'العنوان بالإنجليزية',
      descriptionAr: 'الوصف بالعربية',
      descriptionEn: 'الوصف بالإنجليزية',
      titleArPlaceholder: 'اكتب العنوان بالعربية',
      titleEnPlaceholder: 'Write the title in English',
      descriptionArPlaceholder: 'عرّف بالمنصة ورسالتها بالعربية',
      descriptionEnPlaceholder: 'Describe the platform in English',
      editorLabel: 'محرر نص منسّق',
      bold: 'خط عريض',
      list: 'قائمة نقطية',
      heading: 'عنوان فرعي',
      chooseImage: 'اختيار صورة',
      replaceImage: 'استبدال الصورة',
      resetImage: 'تراجع عن الاختيار',
      imageFormats: 'PNG / JPG / JPEG / WEBP فقط',
      imageHint: 'استخدم صورة أفقية واضحة ومحسّنة.',
      currentImage: 'الصورة الحالية',
      noImage: 'لم تُحدّد صورة',
      invalidImage: 'اختر صورة بصيغة PNG أو JPG أو JPEG أو WEBP فقط',
      unreadableImage: 'تعذر قراءة الصورة. اختر صورة أخرى.',
      saved: 'محفوظ',
      dirty: 'توجد تغييرات غير محفوظة',
      readyTitle: 'محتوى التعريف جاهز',
      readyHelper: 'تظهر التغييرات بعد إتمام الحفظ الآمن.',
      dirtyHelper: 'راجع المحتوى المعلّق قبل الحفظ.',
      save: 'حفظ التغييرات',
      saving: 'جاري الحفظ...',
      saveSuccess: 'تم حفظ محتوى من نحن',
      saveError: 'تعذر حفظ محتوى من نحن',
      required: 'هذا الحقل مطلوب',
    };
%>

<section
  class="kt-settings-module kt-settings-module--about"
  dir="<%= aboutIsEnglish ? 'ltr' : 'rtl' %>"
  data-settings-module="about"
  data-settings-module-saved-label="<%= aboutCopy.saved %>"
  data-settings-module-dirty-label="<%= aboutCopy.dirty %>"
  data-settings-module-saved-helper="<%= aboutCopy.readyHelper %>"
  data-settings-module-dirty-helper="<%= aboutCopy.dirtyHelper %>"
  data-settings-module-success="<%= aboutCopy.saveSuccess %>"
  data-settings-module-error="<%= aboutCopy.saveError %>"
>
  <form
    action="/dashboard/settings/editAbout"
    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="<%= aboutValue(aboutSettings._id) %>">

    <div class="kt-settings-module__split kt-settings-module__split--media">
      <section
        class="kt-settings-module__group kt-settings-module__group--primary"
        aria-labelledby="settings-about-content-title"
      >
        <header class="kt-settings-module__group-header">
          <span class="kt-settings-module__group-icon" aria-hidden="true">
            <i class="ti ti-language"></i>
          </span>
          <div>
            <h3 id="settings-about-content-title"><%= aboutCopy.contentTitle %></h3>
            <p><%= aboutCopy.contentHelper %></p>
          </div>
        </header>

        <div class="kt-settings-module__field-grid">
          <div class="kt-settings-module__field" data-settings-module-field>
            <label class="kt-settings-module__label" for="settings-about-title-ar">
              <span><%= aboutCopy.titleAr %></span>
              <small>AR</small>
            </label>
            <div class="kt-settings-module__control">
              <input
                id="settings-about-title-ar"
                name="titleAr"
                type="text"
                value="<%= aboutValue(aboutTitle.ar) %>"
                placeholder="<%= aboutCopy.titleArPlaceholder %>"
                dir="rtl"
                required
                data-settings-module-input
                data-settings-required-message="<%= aboutCopy.required %>"
                aria-describedby="settings-about-title-ar-error"
                aria-invalid="false"
              >
              <i class="ti ti-letter-a" aria-hidden="true"></i>
            </div>
            <p
              class="kt-settings-module__error"
              id="settings-about-title-ar-error"
              data-settings-module-error
              hidden
            >
              <i class="ti ti-alert-circle" aria-hidden="true"></i>
              <span><%= aboutCopy.required %></span>
            </p>
          </div>

          <div class="kt-settings-module__field" data-settings-module-field>
            <label class="kt-settings-module__label" for="settings-about-title-en">
              <span><%= aboutCopy.titleEn %></span>
              <small>EN</small>
            </label>
            <div class="kt-settings-module__control">
              <input
                id="settings-about-title-en"
                name="titleEn"
                type="text"
                value="<%= aboutValue(aboutTitle.en) %>"
                placeholder="<%= aboutCopy.titleEnPlaceholder %>"
                dir="ltr"
                required
                data-settings-module-input
                data-settings-required-message="<%= aboutCopy.required %>"
                aria-describedby="settings-about-title-en-error"
                aria-invalid="false"
              >
              <i class="ti ti-letter-a-small" aria-hidden="true"></i>
            </div>
            <p
              class="kt-settings-module__error"
              id="settings-about-title-en-error"
              data-settings-module-error
              hidden
            >
              <i class="ti ti-alert-circle" aria-hidden="true"></i>
              <span><%= aboutCopy.required %></span>
            </p>
          </div>

          <div class="kt-settings-module__field kt-settings-module__field--wide" data-settings-module-field>
            <span class="kt-settings-module__label" id="settings-about-description-ar-label">
              <span><%= aboutCopy.descriptionAr %></span>
              <small>AR</small>
            </span>
            <div
              class="kt-settings-module__editor kt-settings-module__editor--rich"
              data-settings-rich-editor
            >
              <div
                class="kt-settings-module__editor-toolbar"
                role="toolbar"
                aria-label="<%= aboutCopy.editorLabel %>"
              >
                <button
                  type="button"
                  data-settings-rich-command="bold"
                  aria-label="<%= aboutCopy.bold %>"
                  title="<%= aboutCopy.bold %>"
                >
                  <i class="ti ti-bold" aria-hidden="true"></i>
                </button>
                <button
                  type="button"
                  data-settings-rich-command="insertUnorderedList"
                  aria-label="<%= aboutCopy.list %>"
                  title="<%= aboutCopy.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="<%= aboutCopy.heading %>"
                  title="<%= aboutCopy.heading %>"
                >
                  <i class="ti ti-h-3" aria-hidden="true"></i>
                </button>
                <small>AR</small>
              </div>
              <div
                id="settings-about-description-ar-editor"
                class="kt-settings-module__rich-surface"
                contenteditable="true"
                role="textbox"
                aria-multiline="true"
                aria-labelledby="settings-about-description-ar-label"
                aria-describedby="settings-about-description-ar-error"
                aria-invalid="false"
                dir="rtl"
                data-placeholder="<%= aboutCopy.descriptionArPlaceholder %>"
                data-settings-rich-editor-surface
              ></div>
              <textarea
                id="settings-about-description-ar-source"
                name="descriptionAr"
                hidden
                required
                data-settings-module-input
                data-settings-rich-editor-source
                data-settings-required-message="<%= aboutCopy.required %>"
                aria-describedby="settings-about-description-ar-error"
                aria-invalid="false"
              ><%= aboutValue(aboutDescription.ar) %></textarea>
            </div>
            <p
              class="kt-settings-module__error"
              id="settings-about-description-ar-error"
              data-settings-module-error
              hidden
            >
              <i class="ti ti-alert-circle" aria-hidden="true"></i>
              <span><%= aboutCopy.required %></span>
            </p>
          </div>

          <div class="kt-settings-module__field kt-settings-module__field--wide" data-settings-module-field>
            <span class="kt-settings-module__label" id="settings-about-description-en-label">
              <span><%= aboutCopy.descriptionEn %></span>
              <small>EN</small>
            </span>
            <div
              class="kt-settings-module__editor kt-settings-module__editor--rich"
              data-settings-rich-editor
            >
              <div
                class="kt-settings-module__editor-toolbar"
                role="toolbar"
                aria-label="<%= aboutCopy.editorLabel %>"
              >
                <button
                  type="button"
                  data-settings-rich-command="bold"
                  aria-label="<%= aboutCopy.bold %>"
                  title="<%= aboutCopy.bold %>"
                >
                  <i class="ti ti-bold" aria-hidden="true"></i>
                </button>
                <button
                  type="button"
                  data-settings-rich-command="insertUnorderedList"
                  aria-label="<%= aboutCopy.list %>"
                  title="<%= aboutCopy.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="<%= aboutCopy.heading %>"
                  title="<%= aboutCopy.heading %>"
                >
                  <i class="ti ti-h-3" aria-hidden="true"></i>
                </button>
                <small>EN</small>
              </div>
              <div
                id="settings-about-description-en-editor"
                class="kt-settings-module__rich-surface"
                contenteditable="true"
                role="textbox"
                aria-multiline="true"
                aria-labelledby="settings-about-description-en-label"
                aria-describedby="settings-about-description-en-error"
                aria-invalid="false"
                dir="ltr"
                data-placeholder="<%= aboutCopy.descriptionEnPlaceholder %>"
                data-settings-rich-editor-surface
              ></div>
              <textarea
                id="settings-about-description-en-source"
                name="descriptionEn"
                hidden
                required
                data-settings-module-input
                data-settings-rich-editor-source
                data-settings-required-message="<%= aboutCopy.required %>"
                aria-describedby="settings-about-description-en-error"
                aria-invalid="false"
              ><%= aboutValue(aboutDescription.en) %></textarea>
            </div>
            <p
              class="kt-settings-module__error"
              id="settings-about-description-en-error"
              data-settings-module-error
              hidden
            >
              <i class="ti ti-alert-circle" aria-hidden="true"></i>
              <span><%= aboutCopy.required %></span>
            </p>
          </div>
        </div>
      </section>

      <aside
        class="kt-settings-module__group kt-settings-module__group--media"
        aria-labelledby="settings-about-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-about-media-title"><%= aboutCopy.mediaTitle %></h3>
            <p><%= aboutCopy.mediaHelper %></p>
          </div>
        </header>

        <div
          class="kt-settings-module__upload"
          data-settings-module-upload
          data-settings-upload-original-src="<%= aboutImageSrc %>"
          data-settings-upload-invalid-message="<%= aboutCopy.invalidImage %>"
          data-settings-upload-unreadable-message="<%= aboutCopy.unreadableImage %>"
        >
          <div class="kt-settings-module__upload-preview">
            <img
              src="<%= aboutImageSrc %>"
              alt=""
              data-settings-module-upload-preview
              <%= aboutImageSrc ? '' : 'hidden' %>
            >
            <span
              class="kt-settings-module__upload-placeholder"
              data-settings-module-upload-placeholder
              <%= aboutImageSrc ? 'hidden' : '' %>
            >
              <i class="ti ti-photo-plus" aria-hidden="true"></i>
              <small><%= aboutCopy.noImage %></small>
            </span>
            <span class="kt-settings-module__upload-current">
              <i class="ti ti-circle-check" aria-hidden="true"></i>
              <%= aboutCopy.currentImage %>
            </span>
          </div>

          <div class="kt-settings-module__upload-copy">
            <strong><%= aboutCopy.imageFormats %></strong>
            <p><%= aboutCopy.imageHint %></p>
            <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-about-image">
              <i class="ti ti-upload" aria-hidden="true"></i>
              <span
                data-settings-module-upload-label
                data-choose-label="<%= aboutCopy.chooseImage %>"
                data-replace-label="<%= aboutCopy.replaceImage %>"
              ><%= aboutCopy.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><%= aboutCopy.resetImage %></span>
            </button>
          </div>

          <input
            class="kt-settings-module__file-input"
            id="settings-about-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><%= aboutCopy.invalidImage %></span>
          </p>
        </div>
      </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-check"></i>
        </span>
        <span>
          <strong><%= aboutCopy.readyTitle %></strong>
          <small data-settings-module-save-helper><%= aboutCopy.readyHelper %></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><%= aboutCopy.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="<%= aboutCopy.save %>"
          data-busy-label="<%= aboutCopy.saving %>"
        ><%= aboutCopy.save %></span>
      </button>
    </footer>
  </form>
</section>