<%
  const activationLocale = (
    typeof lang === 'string'
      ? lang
      : (
        typeof user !== 'undefined'
        && user
        && typeof user.lang === 'string'
          ? user.lang
          : 'ar'
      )
  );
  const activationIsEnglish = String(activationLocale).toLowerCase().startsWith('en');
  const activationSettings = (
    typeof setting !== 'undefined'
    && setting
    && typeof setting === 'object'
  ) ? setting : {};
  const activationValue = (value) => (
    value === undefined || value === null ? '' : value
  );
  const activationDynamic = activationSettings.codeGenerate !== false;
  const activationCopy = activationIsEnglish
    ? {
      policyTitle: 'Activation policy',
      policyHelper: 'Choose whether the platform generates a fresh code or uses one fixed code.',
      dynamicTitle: 'Generated automatically',
      dynamicHelper: 'A unique code is generated for each verification flow.',
      fixedTitle: 'Use a fixed code',
      fixedHelper: 'Use the configured code for controlled testing or operations.',
      codeTitle: 'Fixed activation code',
      codeHelper: 'Enter 4 to 6 digits. It is used only when fixed mode is active.',
      codeLabel: 'Activation code',
      codePlaceholder: '4–6 digits',
      summaryTitle: 'Current behavior',
      summaryDynamic: 'Codes are generated automatically.',
      summaryFixed: 'The configured fixed code is active.',
      secureNote: 'Keep fixed mode limited to controlled operational needs.',
      saved: 'Saved',
      dirty: 'Unsaved changes',
      saveTitle: 'Activation policy is ready',
      saveHelper: 'The current policy is saved.',
      dirtyHelper: 'Review the activation policy before saving.',
      save: 'Save changes',
      saving: 'Saving...',
      saveSuccess: 'Activation settings were saved',
      saveError: 'Activation settings could not be saved',
      required: 'Enter a 4 to 6 digit code',
    }
    : {
      policyTitle: 'سياسة كود التفعيل',
      policyHelper: 'حدّد ما إذا كانت المنصة تنشئ كودًا جديدًا أو تستخدم كودًا ثابتًا.',
      dynamicTitle: 'توليد تلقائي',
      dynamicHelper: 'يُنشأ كود فريد لكل عملية تحقق.',
      fixedTitle: 'استخدام كود ثابت',
      fixedHelper: 'استخدم الكود المحدد للاختبارات أو التشغيل المنضبط.',
      codeTitle: 'كود التفعيل الثابت',
      codeHelper: 'أدخل من 4 إلى 6 أرقام. يُستخدم فقط عند تفعيل الوضع الثابت.',
      codeLabel: 'كود التفعيل',
      codePlaceholder: 'من 4 إلى 6 أرقام',
      summaryTitle: 'السلوك الحالي',
      summaryDynamic: 'يتم توليد الأكواد تلقائيًا.',
      summaryFixed: 'الكود الثابت المحدد هو المستخدم.',
      secureNote: 'استخدم الوضع الثابت فقط للاحتياجات التشغيلية المنضبطة.',
      saved: 'محفوظ',
      dirty: 'توجد تغييرات غير محفوظة',
      saveTitle: 'سياسة التفعيل جاهزة',
      saveHelper: 'السياسة الحالية محفوظة.',
      dirtyHelper: 'راجع سياسة التفعيل قبل الحفظ.',
      save: 'حفظ التغييرات',
      saving: 'جاري الحفظ...',
      saveSuccess: 'تم حفظ إعدادات كود التفعيل',
      saveError: 'تعذر حفظ إعدادات كود التفعيل',
      required: 'أدخل كودًا مكوّنًا من 4 إلى 6 أرقام',
    };
%>

<section
  class="kt-settings-module kt-settings-module--activation"
  dir="<%= activationIsEnglish ? 'ltr' : 'rtl' %>"
  data-settings-module="activation"
  data-settings-module-saved-label="<%= activationCopy.saved %>"
  data-settings-module-dirty-label="<%= activationCopy.dirty %>"
  data-settings-module-saved-helper="<%= activationCopy.saveHelper %>"
  data-settings-module-dirty-helper="<%= activationCopy.dirtyHelper %>"
  data-settings-module-success="<%= activationCopy.saveSuccess %>"
  data-settings-module-error="<%= activationCopy.saveError %>"
>
  <form
    action="/dashboard/settings/editCode"
    method="post"
    novalidate
    class="kt-settings-module__form"
    data-settings-module-form
  >
    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
    <input type="hidden" name="_id" value="<%= activationValue(activationSettings._id) %>">

    <div class="kt-settings-module__compact-console">
      <section
        class="kt-settings-module__group kt-settings-module__group--primary"
        aria-labelledby="settings-activation-policy-title"
      >
        <header class="kt-settings-module__group-header">
          <span class="kt-settings-module__group-icon" aria-hidden="true">
            <i class="ti ti-key"></i>
          </span>
          <div>
            <h3 id="settings-activation-policy-title"><%= activationCopy.policyTitle %></h3>
            <p><%= activationCopy.policyHelper %></p>
          </div>
        </header>

        <fieldset class="kt-settings-module__segmented" data-settings-module-segmented>
          <legend class="visually-hidden"><%= activationCopy.policyTitle %></legend>
          <label class="kt-settings-module__segment">
            <input
              type="radio"
              name="codeGenerate"
              value="true"
              <%= activationDynamic ? 'checked' : '' %>
              data-settings-module-radio
            >
            <span class="kt-settings-module__segment-icon" aria-hidden="true">
              <i class="ti ti-wand"></i>
            </span>
            <span>
              <strong><%= activationCopy.dynamicTitle %></strong>
              <small><%= activationCopy.dynamicHelper %></small>
            </span>
            <i class="ti ti-circle-check kt-settings-module__segment-check" aria-hidden="true"></i>
          </label>

          <label class="kt-settings-module__segment">
            <input
              type="radio"
              name="codeGenerate"
              value="false"
              <%= activationDynamic ? '' : 'checked' %>
              data-settings-module-radio
            >
            <span class="kt-settings-module__segment-icon" aria-hidden="true">
              <i class="ti ti-lock-code"></i>
            </span>
            <span>
              <strong><%= activationCopy.fixedTitle %></strong>
              <small><%= activationCopy.fixedHelper %></small>
            </span>
            <i class="ti ti-circle-check kt-settings-module__segment-check" aria-hidden="true"></i>
          </label>
        </fieldset>
      </section>

      <section
        class="kt-settings-module__group"
        aria-labelledby="settings-activation-code-title"
        data-settings-activation-code-group
      >
        <header class="kt-settings-module__group-header">
          <span class="kt-settings-module__group-icon" aria-hidden="true">
            <i class="ti ti-password"></i>
          </span>
          <div>
            <h3 id="settings-activation-code-title"><%= activationCopy.codeTitle %></h3>
            <p><%= activationCopy.codeHelper %></p>
          </div>
        </header>

        <div class="kt-settings-module__field" data-settings-module-field>
          <label class="kt-settings-module__label" for="settings-activation-code">
            <span><%= activationCopy.codeLabel %></span>
            <small>OTP</small>
          </label>
          <div class="kt-settings-module__control kt-settings-module__control--code">
            <input
              id="settings-activation-code"
              name="code"
              type="text"
              inputmode="numeric"
              autocomplete="off"
              value="<%= activationValue(activationSettings.code) %>"
              placeholder="<%= activationCopy.codePlaceholder %>"
              pattern="[0-9]{4,6}"
              minlength="4"
              maxlength="6"
              required
              data-settings-module-input
              data-settings-required-message="<%= activationCopy.required %>"
              data-settings-pattern-message="<%= activationCopy.required %>"
              aria-describedby="settings-activation-code-error"
              aria-invalid="false"
            >
            <i class="ti ti-dialpad" aria-hidden="true"></i>
          </div>
          <p
            class="kt-settings-module__error"
            id="settings-activation-code-error"
            data-settings-module-error
            hidden
          >
            <i class="ti ti-alert-circle" aria-hidden="true"></i>
            <span><%= activationCopy.required %></span>
          </p>
        </div>
      </section>

      <aside class="kt-settings-module__summary-card" data-settings-activation-summary>
        <span class="kt-settings-module__summary-icon" aria-hidden="true">
          <i class="ti <%= activationDynamic ? 'ti-sparkles' : 'ti-lock-code' %>" data-settings-activation-summary-icon></i>
        </span>
        <span>
          <small><%= activationCopy.summaryTitle %></small>
          <strong
            data-settings-activation-summary-label
            data-dynamic-label="<%= activationCopy.summaryDynamic %>"
            data-fixed-label="<%= activationCopy.summaryFixed %>"
          ><%= activationDynamic ? activationCopy.summaryDynamic : activationCopy.summaryFixed %></strong>
          <p><%= activationCopy.secureNote %></p>
        </span>
      </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><%= activationCopy.saveTitle %></strong>
          <small data-settings-module-save-helper><%= activationCopy.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><%= activationCopy.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="<%= activationCopy.save %>"
          data-busy-label="<%= activationCopy.saving %>"
        ><%= activationCopy.save %></span>
      </button>
    </footer>
  </form>
</section>
