<%
  const smtpLocale = (
    typeof lang === 'string'
      ? lang
      : (
        typeof user !== 'undefined'
        && user
        && typeof user.lang === 'string'
          ? user.lang
          : 'ar'
      )
  );
  const smtpIsEnglish = String(smtpLocale).toLowerCase().startsWith('en');
  const smtpData = (
    typeof smtp !== 'undefined'
    && smtp
    && typeof smtp === 'object'
  ) ? smtp : {};
  const smtpValue = (value) => (
    value === undefined || value === null ? '' : value
  );
  const smtpHasStoredPassword = typeof smtpData.password === 'string' && smtpData.password.length > 0;
  const smtpEncryptionValue = String(smtpValue(smtpData.encryption)).toLowerCase();
  const smtpCopy = smtpIsEnglish
    ? {
      serverTitle: 'Mail server',
      serverHelper: 'Connection details used by the operational mail channel.',
      identityTitle: 'Sender identity',
      identityHelper: 'The public identity recipients see in platform email.',
      securityTitle: 'Credentials and security',
      securityHelper: 'The secret stays masked and is never rendered back into the form.',
      host: 'SMTP host',
      port: 'Port',
      encryption: 'Encryption',
      username: 'Username',
      senderEmail: 'Sender email',
      senderName: 'Sender name',
      password: 'SMTP password',
      hostPlaceholder: 'smtp.example.com',
      portPlaceholder: '587',
      usernamePlaceholder: 'mailer@example.com',
      senderEmailPlaceholder: 'no-reply@example.com',
      senderNamePlaceholder: 'KamTeswa',
      passwordPlaceholder: 'Enter a new password to replace the stored secret',
      passwordConfigured: 'A password is already configured',
      passwordEmpty: 'No password is currently configured',
      passwordHint: 'Leave this field empty to keep the existing password.',
      showPassword: 'Show password',
      hidePassword: 'Hide password',
      saved: 'Saved',
      dirty: 'Unsaved changes',
      saveTitle: 'SMTP configuration is ready',
      saveHelper: 'The current connection settings are saved.',
      dirtyHelper: 'Review connection changes before saving.',
      save: 'Save changes',
      saving: 'Saving...',
      saveSuccess: 'SMTP settings were saved',
      saveError: 'SMTP settings could not be saved',
      required: 'This field is required',
      invalidEmail: 'Enter a valid email address',
      invalidPort: 'Enter a port from 1 to 65535',
      none: 'No encryption',
      tls: 'TLS — recommended',
      ssl: 'SSL',
    }
    : {
      serverTitle: 'بيانات الخادم',
      serverHelper: 'بيانات الاتصال التي تعتمد عليها قناة البريد التشغيلي.',
      identityTitle: 'هوية المرسل',
      identityHelper: 'الهوية الظاهرة للمستلم في رسائل المنصة.',
      securityTitle: 'بيانات الاعتماد والأمان',
      securityHelper: 'يبقى السر مخفيًا ولا يُعاد عرضه داخل النموذج.',
      host: 'خادم SMTP',
      port: 'المنفذ',
      encryption: 'التشفير',
      username: 'اسم المستخدم',
      senderEmail: 'بريد المرسل',
      senderName: 'اسم المرسل',
      password: 'كلمة مرور SMTP',
      hostPlaceholder: 'smtp.example.com',
      portPlaceholder: '587',
      usernamePlaceholder: 'mailer@example.com',
      senderEmailPlaceholder: 'no-reply@example.com',
      senderNamePlaceholder: 'KamTeswa',
      passwordPlaceholder: 'أدخل كلمة مرور جديدة لاستبدال السر المحفوظ',
      passwordConfigured: 'توجد كلمة مرور محفوظة بالفعل',
      passwordEmpty: 'لا توجد كلمة مرور محفوظة حاليًا',
      passwordHint: 'اترك الحقل فارغًا للاحتفاظ بكلمة المرور الحالية.',
      showPassword: 'إظهار كلمة المرور',
      hidePassword: 'إخفاء كلمة المرور',
      saved: 'محفوظ',
      dirty: 'توجد تغييرات غير محفوظة',
      saveTitle: 'تهيئة SMTP جاهزة',
      saveHelper: 'بيانات الاتصال الحالية محفوظة.',
      dirtyHelper: 'راجع تغييرات الاتصال قبل الحفظ.',
      save: 'حفظ التغييرات',
      saving: 'جاري الحفظ...',
      saveSuccess: 'تم حفظ إعدادات SMTP',
      saveError: 'تعذر حفظ إعدادات SMTP',
      required: 'هذا الحقل مطلوب',
      invalidEmail: 'أدخل بريدًا إلكترونيًا صحيحًا',
      invalidPort: 'أدخل منفذًا من 1 إلى 65535',
      none: 'بدون تشفير',
      tls: 'TLS — موصى به',
      ssl: 'SSL',
    };
  const smtpEncryptionOptions = [
    { value: '', label: smtpCopy.none, icon: 'ti-shield-off' },
    { value: 'tls', label: smtpCopy.tls, icon: 'ti-shield-lock' },
    { value: 'ssl', label: smtpCopy.ssl, icon: 'ti-lock' },
  ];
  if (
    smtpEncryptionValue
    && !smtpEncryptionOptions.some((option) => option.value === smtpEncryptionValue)
  ) {
    smtpEncryptionOptions.push({
      value: smtpEncryptionValue,
      label: smtpValue(smtpData.encryption),
      icon: 'ti-shield-cog',
    });
  }
  const selectedSmtpEncryption = smtpEncryptionOptions.find(
    (option) => option.value === smtpEncryptionValue,
  ) || smtpEncryptionOptions[0];
  const smtpFields = [
    {
      id: 'settings-smtp-host',
      name: 'host',
      type: 'text',
      label: smtpCopy.host,
      placeholder: smtpCopy.hostPlaceholder,
      value: smtpValue(smtpData.host),
      icon: 'ti-server',
      dir: 'ltr',
    },
    {
      id: 'settings-smtp-port',
      name: 'port',
      type: 'number',
      label: smtpCopy.port,
      placeholder: smtpCopy.portPlaceholder,
      value: smtpValue(smtpData.port),
      icon: 'ti-plug-connected',
      dir: 'ltr',
      required: true,
      min: 1,
      max: 65535,
      message: smtpCopy.invalidPort,
    },
    {
      id: 'settings-smtp-username',
      name: 'userName',
      type: 'text',
      label: smtpCopy.username,
      placeholder: smtpCopy.usernamePlaceholder,
      value: smtpValue(smtpData.userName),
      icon: 'ti-at',
      dir: 'ltr',
    },
  ];
  const smtpIdentityFields = [
    {
      id: 'settings-smtp-sender-email',
      name: 'emailSend',
      type: 'email',
      label: smtpCopy.senderEmail,
      placeholder: smtpCopy.senderEmailPlaceholder,
      value: smtpValue(smtpData.emailSend),
      icon: 'ti-mail',
      dir: 'ltr',
      message: smtpCopy.invalidEmail,
    },
    {
      id: 'settings-smtp-sender-name',
      name: 'nameSend',
      type: 'text',
      label: smtpCopy.senderName,
      placeholder: smtpCopy.senderNamePlaceholder,
      value: smtpValue(smtpData.nameSend),
      icon: 'ti-signature',
      dir: smtpIsEnglish ? 'ltr' : 'rtl',
    },
  ];
%>

<section
  class="kt-settings-module kt-settings-module--smtp"
  dir="<%= smtpIsEnglish ? 'ltr' : 'rtl' %>"
  data-settings-module="smtp"
  data-settings-module-saved-label="<%= smtpCopy.saved %>"
  data-settings-module-dirty-label="<%= smtpCopy.dirty %>"
  data-settings-module-saved-helper="<%= smtpCopy.saveHelper %>"
  data-settings-module-dirty-helper="<%= smtpCopy.dirtyHelper %>"
  data-settings-module-success="<%= smtpCopy.saveSuccess %>"
  data-settings-module-error="<%= smtpCopy.saveError %>"
>
  <form
    action="/dashboard/settings/editSmsSmtp"
    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="<%= smtpValue(smtpData._id) %>">

    <div class="kt-settings-module__smtp-grid">
      <div class="kt-settings-module__stack">
        <section
          class="kt-settings-module__group kt-settings-module__group--primary"
          aria-labelledby="settings-smtp-server-title"
        >
          <header class="kt-settings-module__group-header">
            <span class="kt-settings-module__group-icon" aria-hidden="true">
              <i class="ti ti-server-cog"></i>
            </span>
            <div>
              <h3 id="settings-smtp-server-title"><%= smtpCopy.serverTitle %></h3>
              <p><%= smtpCopy.serverHelper %></p>
            </div>
          </header>

          <div class="kt-settings-module__field-grid">
            <% smtpFields.forEach((field) => { %>
              <div class="kt-settings-module__field" data-settings-module-field>
                <label class="kt-settings-module__label" for="<%= field.id %>">
                  <span><%= field.label %></span>
                </label>
                <div class="kt-settings-module__control">
                  <input
                    id="<%= field.id %>"
                    name="<%= field.name %>"
                    type="<%= field.type %>"
                    value="<%= field.value %>"
                    placeholder="<%= field.placeholder %>"
                    dir="<%= field.dir %>"
                    <%= field.required ? 'required' : '' %>
                    <%= field.min !== undefined ? `min="${field.min}"` : '' %>
                    <%= field.max !== undefined ? `max="${field.max}"` : '' %>
                    data-settings-module-input
                    data-settings-required-message="<%= field.message || smtpCopy.required %>"
                    data-settings-number-message="<%= field.message || smtpCopy.invalidPort %>"
                    aria-describedby="<%= field.id %>-error"
                    aria-invalid="false"
                  >
                  <i class="ti <%= field.icon %>" aria-hidden="true"></i>
                </div>
                <p
                  class="kt-settings-module__error"
                  id="<%= field.id %>-error"
                  data-settings-module-error
                  hidden
                >
                  <i class="ti ti-alert-circle" aria-hidden="true"></i>
                  <span><%= field.message || smtpCopy.required %></span>
                </p>
              </div>
            <% }) %>

            <div class="kt-settings-module__field" data-settings-module-field>
              <span class="kt-settings-module__label" id="settings-smtp-encryption-label">
                <span><%= smtpCopy.encryption %></span>
              </span>
              <div class="kt-settings-module__select" data-settings-module-select>
                <select
                  class="kt-settings-module__native-select"
                  id="settings-smtp-encryption"
                  name="encryption"
                  tabindex="-1"
                  aria-hidden="true"
                  data-settings-module-native-select
                >
                  <% smtpEncryptionOptions.forEach((option) => { %>
                    <option
                      value="<%= option.value %>"
                      <%= option.value === selectedSmtpEncryption.value ? 'selected' : '' %>
                    ><%= option.label %></option>
                  <% }) %>
                </select>
                <button
                  class="kt-settings-module__select-trigger"
                  id="settings-smtp-encryption-trigger"
                  type="button"
                  role="combobox"
                  aria-haspopup="listbox"
                  aria-expanded="false"
                  aria-controls="settings-smtp-encryption-listbox"
                  aria-labelledby="settings-smtp-encryption-label settings-smtp-encryption-value"
                  data-settings-module-select-trigger
                >
                  <span
                    class="kt-settings-module__select-value"
                    id="settings-smtp-encryption-value"
                    data-settings-module-select-value
                  >
                    <i class="ti <%= selectedSmtpEncryption.icon %>" aria-hidden="true"></i>
                    <span><%= selectedSmtpEncryption.label %></span>
                  </span>
                  <span class="kt-settings-module__select-chevron" aria-hidden="true">
                    <svg viewBox="0 0 24 24" focusable="false">
                      <path d="m7 10 5 5 5-5"></path>
                    </svg>
                  </span>
                </button>
                <div
                  class="kt-settings-module__select-menu"
                  id="settings-smtp-encryption-listbox"
                  role="listbox"
                  aria-labelledby="settings-smtp-encryption-label"
                  data-settings-module-select-menu
                  hidden
                >
                  <% smtpEncryptionOptions.forEach((option, optionIndex) => { %>
                    <button
                      class="kt-settings-module__select-option <%= option.value === selectedSmtpEncryption.value ? 'is-selected' : '' %>"
                      id="settings-smtp-encryption-option-<%= optionIndex %>"
                      type="button"
                      role="option"
                      aria-selected="<%= option.value === selectedSmtpEncryption.value ? 'true' : 'false' %>"
                      data-value="<%= option.value %>"
                      data-icon="<%= option.icon %>"
                      data-settings-module-select-option
                    >
                      <span>
                        <i class="ti <%= option.icon %>" aria-hidden="true"></i>
                        <strong><%= option.label %></strong>
                      </span>
                      <i class="ti ti-check" aria-hidden="true"></i>
                    </button>
                  <% }) %>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section
          class="kt-settings-module__group"
          aria-labelledby="settings-smtp-identity-title"
        >
          <header class="kt-settings-module__group-header">
            <span class="kt-settings-module__group-icon" aria-hidden="true">
              <i class="ti ti-id-badge-2"></i>
            </span>
            <div>
              <h3 id="settings-smtp-identity-title"><%= smtpCopy.identityTitle %></h3>
              <p><%= smtpCopy.identityHelper %></p>
            </div>
          </header>

          <div class="kt-settings-module__field-grid">
            <% smtpIdentityFields.forEach((field) => { %>
              <div class="kt-settings-module__field" data-settings-module-field>
                <label class="kt-settings-module__label" for="<%= field.id %>">
                  <span><%= field.label %></span>
                </label>
                <div class="kt-settings-module__control">
                  <input
                    id="<%= field.id %>"
                    name="<%= field.name %>"
                    type="<%= field.type %>"
                    value="<%= field.value %>"
                    placeholder="<%= field.placeholder %>"
                    dir="<%= field.dir %>"
                    data-settings-module-input
                    data-settings-email-message="<%= smtpCopy.invalidEmail %>"
                    aria-describedby="<%= field.id %>-error"
                    aria-invalid="false"
                  >
                  <i class="ti <%= field.icon %>" aria-hidden="true"></i>
                </div>
                <p
                  class="kt-settings-module__error"
                  id="<%= field.id %>-error"
                  data-settings-module-error
                  hidden
                >
                  <i class="ti ti-alert-circle" aria-hidden="true"></i>
                  <span><%= field.message || smtpCopy.invalidEmail %></span>
                </p>
              </div>
            <% }) %>
          </div>
        </section>
      </div>

      <aside
        class="kt-settings-module__group kt-settings-module__security-card"
        aria-labelledby="settings-smtp-security-title"
      >
        <header class="kt-settings-module__group-header">
          <span class="kt-settings-module__group-icon" aria-hidden="true">
            <i class="ti ti-lock-square-rounded"></i>
          </span>
          <div>
            <h3 id="settings-smtp-security-title"><%= smtpCopy.securityTitle %></h3>
            <p><%= smtpCopy.securityHelper %></p>
          </div>
        </header>

        <div class="kt-settings-module__secret-state <%= smtpHasStoredPassword ? 'is-configured' : '' %>">
          <span aria-hidden="true">
            <i class="ti <%= smtpHasStoredPassword ? 'ti-shield-check' : 'ti-shield-question' %>"></i>
          </span>
          <strong><%= smtpHasStoredPassword ? smtpCopy.passwordConfigured : smtpCopy.passwordEmpty %></strong>
        </div>

        <div class="kt-settings-module__field" data-settings-module-field>
          <label class="kt-settings-module__label" for="settings-smtp-password">
            <span><%= smtpCopy.password %></span>
          </label>
          <div class="kt-settings-module__control kt-settings-module__control--password">
            <input
              id="settings-smtp-password"
              name="password"
              type="password"
              value=""
              placeholder="<%= smtpCopy.passwordPlaceholder %>"
              dir="ltr"
              autocomplete="new-password"
              data-settings-module-input
              aria-describedby="settings-smtp-password-helper"
              aria-invalid="false"
            >
            <i class="ti ti-key" aria-hidden="true"></i>
            <button
              class="kt-settings-module__password-toggle"
              type="button"
              aria-label="<%= smtpCopy.showPassword %>"
              aria-pressed="false"
              data-show-label="<%= smtpCopy.showPassword %>"
              data-hide-label="<%= smtpCopy.hidePassword %>"
              data-settings-password-toggle
            >
              <i class="ti ti-eye" aria-hidden="true"></i>
            </button>
          </div>
          <p class="kt-settings-module__helper" id="settings-smtp-password-helper">
            <i class="ti ti-info-circle" aria-hidden="true"></i>
            <span><%= smtpCopy.passwordHint %></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-mail-check"></i>
        </span>
        <span>
          <strong><%= smtpCopy.saveTitle %></strong>
          <small data-settings-module-save-helper><%= smtpCopy.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><%= smtpCopy.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="<%= smtpCopy.save %>"
          data-busy-label="<%= smtpCopy.saving %>"
        ><%= smtpCopy.save %></span>
      </button>
    </footer>
  </form>
</section>