<%
  const siteLocaleCandidate = typeof lang === 'string'
    ? lang
    : (
      typeof user !== 'undefined'
      && user
      && typeof user.lang === 'string'
        ? user.lang
        : 'ar'
    );
  const siteIsEnglish = String(siteLocaleCandidate).toLowerCase().startsWith('en');
  const siteSettings = (
    typeof setting !== 'undefined'
    && setting
    && typeof setting === 'object'
  ) ? setting : {};
  const siteName = siteSettings.siteName && typeof siteSettings.siteName === 'object'
    ? siteSettings.siteName
    : {};
  const siteAddress = siteSettings.address && typeof siteSettings.address === 'object'
    ? siteSettings.address
    : {};
  const siteValue = (value, fallback = '') => (
    value === undefined || value === null ? fallback : value
  );
  const siteCopy = siteIsEnglish
    ? {
      eyebrow: 'Site settings console',
      title: 'Site settings',
      subtitle: 'Identity, links, operations, and commissions.',
      saved: 'Saved',
      dirty: 'Unsaved changes',
      identityTitle: 'Platform identity',
      identityHelper: 'Public identity and primary contact information.',
      linksTitle: 'Application links',
      linksHelper: 'Official download destinations for each application.',
      operationsTitle: 'Operations and commissions',
      operationsHelper: 'Operational controls and the policies that govern platform revenue.',
      commissionsTitle: 'Commission policies',
      commissionsHelper: 'Store, delivery, and auction commission rules.',
      imagesTitle: 'Media library',
      imagesHelper: 'Manage the visual assets used across the dashboard and public product.',
      primaryAssets: 'Primary assets',
      primaryAssetsHelper: 'Brand and authentication surfaces.',
      supportingAssets: 'Supporting assets',
      supportingAssetsHelper: 'Defaults used across platform content.',
      overviewTitle: 'Configuration overview',
      overviewHelper: 'Status and navigation for this section.',
      quickNavigation: 'Quick navigation',
      identityAnchor: 'Identity',
      linksAnchor: 'Links',
      operationsAnchor: 'Operations',
      commissionsAnchor: 'Commissions',
      imagesAnchor: 'Images',
      mediaReadiness: 'Media readiness',
      mediaAssets: 'visual assets',
      saveState: 'Save status',
      saveTitle: 'Configuration is ready',
      saveHelper: 'Changes apply after a successful secure save.',
      save: 'Save changes',
      saving: 'Saving...',
      savedHelper: 'All current settings are saved.',
      dirtyHelper: 'Review and save the pending changes.',
      saveSuccess: 'Site settings were saved',
      saveError: 'Site settings could not be saved',
      required: 'This field is required',
      invalidEmail: 'Enter a valid email address',
      invalidUrl: 'Enter a complete link starting with http:// or https://',
      invalidPhone: 'Enter a 10-digit phone number',
      invalidNumber: 'Enter a valid value within the allowed range',
      selectRequired: 'Choose an option',
      chooseImage: 'Choose image',
      replaceImage: 'Replace image',
      resetImage: 'Undo selection',
      uploadFormats: 'PNG / JPG / JPEG / WEBP only',
      uploadHelper: 'Use a clear, optimized image.',
      currentImage: 'Current image',
      invalidImage: 'Choose a PNG, JPG, JPEG, or WEBP image only',
      unreadableImage: 'This image could not be read. Choose another image.',
      noImage: 'No image available',
      selectedFile: 'Selected file',
    }
    : {
      eyebrow: 'وحدة إعدادات الموقع',
      title: 'إعدادات الموقع',
      subtitle: 'الهوية، الروابط، التشغيل، والعمولات.',
      saved: 'محفوظ',
      dirty: 'توجد تغييرات غير محفوظة',
      identityTitle: 'هوية المنصة',
      identityHelper: 'الهوية العامة وبيانات التواصل الأساسية.',
      linksTitle: 'روابط التطبيقات',
      linksHelper: 'روابط التنزيل الرسمية لكل تطبيق.',
      operationsTitle: 'التشغيل والعمولات',
      operationsHelper: 'ضوابط التشغيل والسياسات التي تنظّم عوائد المنصة.',
      commissionsTitle: 'سياسات العمولات',
      commissionsHelper: 'قواعد عمولات المتجر والتوصيل والمزادات.',
      imagesTitle: 'مكتبة الصور',
      imagesHelper: 'إدارة الأصول البصرية المستخدمة في المنصة وصفحاتها.',
      primaryAssets: 'الأصول الأساسية',
      primaryAssetsHelper: 'الهوية البصرية وواجهات تسجيل الدخول.',
      supportingAssets: 'الأصول المساندة',
      supportingAssetsHelper: 'الصور الافتراضية المستخدمة عبر محتوى المنصة.',
      overviewTitle: 'ملخص التهيئة',
      overviewHelper: 'حالة القسم والتنقل داخله.',
      quickNavigation: 'انتقال سريع',
      identityAnchor: 'الهوية',
      linksAnchor: 'الروابط',
      operationsAnchor: 'التشغيل',
      commissionsAnchor: 'العمولات',
      imagesAnchor: 'الصور',
      mediaReadiness: 'جاهزية الصور',
      mediaAssets: 'أصول بصرية',
      saveState: 'حالة الحفظ',
      saveTitle: 'التهيئة جاهزة',
      saveHelper: 'تُطبّق التغييرات بعد إتمام الحفظ الآمن.',
      save: 'حفظ التغييرات',
      saving: 'جاري الحفظ...',
      savedHelper: 'جميع الإعدادات الحالية محفوظة.',
      dirtyHelper: 'راجع التغييرات المعلّقة ثم احفظها.',
      saveSuccess: 'تم حفظ إعدادات الموقع',
      saveError: 'تعذر حفظ إعدادات الموقع',
      required: 'هذا الحقل مطلوب',
      invalidEmail: 'أدخل بريدًا إلكترونيًا صحيحًا',
      invalidUrl: 'أدخل رابطًا كاملًا يبدأ بـ http:// أو https://',
      invalidPhone: 'أدخل رقم هاتف مكوّنًا من 10 أرقام',
      invalidNumber: 'أدخل قيمة صحيحة ضمن النطاق المسموح',
      selectRequired: 'اختر قيمة',
      chooseImage: 'اختيار صورة',
      replaceImage: 'استبدال الصورة',
      resetImage: 'تراجع عن الاختيار',
      uploadFormats: 'PNG / JPG / JPEG / WEBP فقط',
      uploadHelper: 'استخدم صورة واضحة ومحسّنة.',
      currentImage: 'الصورة الحالية',
      invalidImage: 'اختر صورة بصيغة PNG أو JPG أو JPEG أو WEBP فقط',
      unreadableImage: 'تعذر قراءة الصورة. اختر صورة أخرى.',
      noImage: 'لا توجد صورة متاحة',
      selectedFile: 'الملف المحدد',
    };
  const siteAnchors = [
    { key: 'identity', icon: 'ti-building-store', label: siteCopy.identityAnchor },
    { key: 'links', icon: 'ti-link', label: siteCopy.linksAnchor },
    { key: 'operations', icon: 'ti-adjustments-horizontal', label: siteCopy.operationsAnchor },
    { key: 'commissions', icon: 'ti-percentage', label: siteCopy.commissionsAnchor },
    { key: 'images', icon: 'ti-photo', label: siteCopy.imagesAnchor },
  ];
  const siteGroups = [
    {
      key: 'identity',
      icon: 'ti-building-store',
      title: siteCopy.identityTitle,
      helper: siteCopy.identityHelper,
      fields: [
        {
          name: 'siteNameAr',
          type: 'text',
          label: siteIsEnglish ? 'Application name in Arabic' : 'اسم التطبيق بالعربي',
          placeholder: siteIsEnglish ? 'Arabic application name' : 'اكتب اسم التطبيق بالعربي',
          value: siteValue(siteName.ar),
          badge: 'AR',
          dir: 'rtl',
        },
        {
          name: 'siteNameEn',
          type: 'text',
          label: siteIsEnglish ? 'Application name in English' : 'اسم التطبيق بالإنجليزي',
          placeholder: 'Application name in English',
          value: siteValue(siteName.en),
          badge: 'EN',
          dir: 'ltr',
        },
        {
          name: 'email',
          type: 'email',
          label: siteIsEnglish ? 'Email address' : 'البريد الإلكتروني',
          placeholder: 'admin@example.com',
          value: siteValue(siteSettings.email),
          icon: 'ti-mail',
          dir: 'ltr',
          inputmode: 'email',
        },
        {
          name: 'phone',
          type: 'tel',
          label: siteIsEnglish ? 'Phone number' : 'رقم الهاتف',
          placeholder: '05XXXXXXXX',
          value: siteValue(siteSettings.phone),
          icon: 'ti-phone',
          dir: 'ltr',
          inputmode: 'numeric',
          pattern: '[0-9]{10}',
          minlength: 10,
          maxlength: 10,
        },
        {
          name: 'phoneWhats',
          type: 'tel',
          label: 'واتساب',
          placeholder: '05XXXXXXXX',
          value: siteValue(siteSettings.phoneWhats),
          icon: 'ti-brand-whatsapp',
          dir: 'ltr',
          inputmode: 'numeric',
          pattern: '[0-9]{10}',
          minlength: 10,
          maxlength: 10,
        },
        {
          name: 'addressAr',
          type: 'text',
          label: siteIsEnglish ? 'Address in Arabic' : 'العنوان العربي',
          placeholder: siteIsEnglish ? 'Arabic address' : 'اكتب العنوان بالعربي',
          value: siteValue(siteAddress.ar),
          badge: 'AR',
          dir: 'rtl',
        },
        {
          name: 'addressEn',
          type: 'text',
          label: siteIsEnglish ? 'Address in English' : 'العنوان الإنجليزي',
          placeholder: 'Address in English',
          value: siteValue(siteAddress.en),
          badge: 'EN',
          dir: 'ltr',
        },
      ],
    },
    {
      key: 'links',
      icon: 'ti-link',
      title: siteCopy.linksTitle,
      helper: siteCopy.linksHelper,
      fields: [
        {
          name: 'linkAndroid',
          type: 'url',
          label: siteIsEnglish ? 'Android application link' : 'رابط تطبيق أندرويد',
          placeholder: 'https://play.google.com/...',
          value: siteValue(siteSettings.linkAndroid),
          icon: 'ti-brand-android',
          dir: 'ltr',
          inputmode: 'url',
        },
        {
          name: 'linkApple',
          type: 'url',
          label: siteIsEnglish ? 'iPhone application link' : 'رابط تطبيق آيفون',
          placeholder: 'https://apps.apple.com/...',
          value: siteValue(siteSettings.linkApple),
          icon: 'ti-brand-apple',
          dir: 'ltr',
          inputmode: 'url',
        },
      ],
    },
    {
      key: 'operations',
      icon: 'ti-adjustments-horizontal',
      title: siteCopy.operationsTitle,
      helper: siteCopy.operationsHelper,
      fields: [
        {
          name: 'vatTax',
          type: 'number',
          label: siteIsEnglish ? 'Value-added tax' : 'القيمة المضافة',
          placeholder: '15',
          value: siteValue(siteSettings.vatTax, 0),
          icon: 'ti-percentage',
          min: 0,
          max: 100,
          step: '0.01',
        },
        {
          name: 'callDuration',
          type: 'number',
          label: siteIsEnglish ? 'Call duration (minutes)' : 'مدة المكالمة',
          placeholder: '30',
          value: siteValue(siteSettings.callDuration, 0),
          icon: 'ti-clock',
          min: 1,
          max: 1440,
          step: 1,
          required: true,
        },
        {
          name: 'productExpireAt',
          type: 'number',
          label: siteIsEnglish ? 'Product validity duration' : 'مدة صلاحية المنتج',
          placeholder: '24',
          value: siteValue(siteSettings.productExpireAt, 0),
          icon: 'ti-hourglass',
          min: 1,
          step: 1,
        },
        {
          kind: 'select',
          name: 'productExpireAtUnit',
          label: siteIsEnglish ? 'Product validity unit' : 'وحدة مدة صلاحية المنتج',
          value: siteValue(siteSettings.productExpireAtUnit, 'days'),
          icon: 'ti-calendar-time',
          options: [
            { value: 'hours', label: siteIsEnglish ? 'Hours' : 'ساعات', icon: 'ti-clock-hour-4' },
            { value: 'days', label: siteIsEnglish ? 'Days' : 'أيام', icon: 'ti-calendar' },
          ],
        },
      ],
    },
    {
      key: 'commissions',
      icon: 'ti-receipt-tax',
      title: siteCopy.commissionsTitle,
      helper: siteCopy.commissionsHelper,
      fields: [
        {
          name: 'appPercentageStoreProduct',
          type: 'number',
          label: siteIsEnglish ? 'Store product commission' : 'عمولة منتجات المتجر',
          placeholder: '0',
          value: siteValue(siteSettings.appPercentageStoreProduct, 0),
          icon: 'ti-building-store',
          min: 0,
          step: '0.01',
        },
        {
          kind: 'select',
          name: 'typeAppPercentageStoreProduct',
          label: siteIsEnglish ? 'Store commission type' : 'نوع عمولة منتجات المتجر',
          value: siteValue(siteSettings.typeAppPercentageStoreProduct, 'ratio'),
          icon: 'ti-selector',
          required: true,
          options: [
            { value: 'number', label: siteIsEnglish ? 'Fixed value' : 'قيمة ثابتة', icon: 'ti-currency-riyal' },
            { value: 'ratio', label: siteIsEnglish ? 'Percentage' : 'نسبة مئوية', icon: 'ti-percentage' },
          ],
        },
        {
          name: 'appPercentageDelivery',
          type: 'number',
          label: siteIsEnglish ? 'Delivery fee commission' : 'نسبة العمولة على رسوم التوصيل',
          placeholder: '0',
          value: siteValue(siteSettings.appPercentageDelivery, 0),
          icon: 'ti-truck-delivery',
          min: 0,
          step: '0.01',
        },
        {
          kind: 'select',
          name: 'typeAppPercentageDelivery',
          label: siteIsEnglish ? 'Delivery commission type' : 'نوع عمولة رسوم التوصيل',
          value: siteValue(siteSettings.typeAppPercentageDelivery, 'ratio'),
          icon: 'ti-selector',
          required: true,
          options: [
            { value: 'number', label: siteIsEnglish ? 'Fixed value' : 'قيمة ثابتة', icon: 'ti-currency-riyal' },
            { value: 'ratio', label: siteIsEnglish ? 'Percentage' : 'نسبة مئوية', icon: 'ti-percentage' },
          ],
        },
        {
          name: 'auctionAppPercentage',
          type: 'number',
          label: siteIsEnglish ? 'Auction commission' : 'عمولة المزاد',
          placeholder: '1',
          value: siteValue(siteSettings.auctionAppPercentage, 1),
          icon: 'ti-gavel',
          min: 0.01,
          step: '0.01',
          required: true,
        },
        {
          kind: 'select',
          name: 'auctionTypeAppPercentage',
          label: siteIsEnglish ? 'Auction commission type' : 'نوع عمولة المزاد',
          value: siteValue(siteSettings.auctionTypeAppPercentage, 'ratio'),
          icon: 'ti-selector',
          required: true,
          options: [
            { value: 'number', label: siteIsEnglish ? 'Fixed value' : 'قيمة ثابتة', icon: 'ti-currency-riyal' },
            { value: 'ratio', label: siteIsEnglish ? 'Percentage' : 'نسبة مئوية', icon: 'ti-percentage' },
          ],
        },
      ],
    },
  ];
  const siteUploads = [
    {
      name: 'logo',
      icon: 'ti-brand-kickstarter',
      title: siteIsEnglish ? 'Website logo' : 'صورة لوجو الموقع',
      ratio: '1:1',
      src: typeof settingMediaAvailability === 'object'
        ? (settingMediaAvailability.logo || '')
        : '',
    },
    {
      name: 'backgroundLogin',
      icon: 'ti-photo-wide',
      title: siteIsEnglish ? 'Login page background' : 'صورة خلفية صفحة تسجيل الدخول',
      ratio: '16:9',
      src: typeof settingMediaAvailability === 'object'
        ? (settingMediaAvailability.backgroundLogin || '')
        : '',
    },
    {
      name: 'defaultImage',
      icon: 'ti-photo',
      title: siteIsEnglish ? 'Default image' : 'الصورة الافتراضية',
      ratio: '1:1',
      src: typeof settingMediaAvailability === 'object'
        ? (settingMediaAvailability.defaultImage || '')
        : '',
    },
    {
      name: 'defaultUserImage',
      icon: 'ti-user-circle',
      title: siteIsEnglish ? 'Default user image' : 'صورة المستخدم الافتراضية',
      ratio: '1:1',
      src: typeof settingMediaAvailability === 'object'
        ? (settingMediaAvailability.defaultUserImage || '')
        : '',
    },
    {
      name: 'favImage',
      icon: 'ti-browser',
      title: siteIsEnglish ? 'Site icon (favicon)' : 'أيقونة الموقع',
      ratio: '1:1',
      src: typeof settingMediaAvailability === 'object'
        ? (settingMediaAvailability.favImage || '')
        : '',
    },
  ];
%>

<div
  class="kt-site-settings"
  data-settings-site
  data-settings-site-success="<%= siteCopy.saveSuccess %>"
  data-settings-site-error="<%= siteCopy.saveError %>"
  data-settings-site-saved-label="<%= siteCopy.saved %>"
  data-settings-site-dirty-label="<%= siteCopy.dirty %>"
  data-settings-site-saved-helper="<%= siteCopy.savedHelper %>"
  data-settings-site-dirty-helper="<%= siteCopy.dirtyHelper %>"
>
  <form
    class="kt-site-settings__form"
    action="/dashboard/settings/editSiteSetting"
    method="post"
    enctype="multipart/form-data"
    novalidate
    data-settings-site-form
  >
    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
    <input type="hidden" name="_id" value="<%= siteValue(siteSettings._id) %>">

    <div class="kt-site-settings__console" data-settings-site-console>
      <main class="kt-site-settings__main" data-settings-site-main>
        <div class="kt-site-settings__groups">
          <% siteGroups.forEach((group) => { %>
            <section
              class="kt-site-settings__group"
              data-settings-site-group="<%= group.key %>"
              aria-labelledby="site-settings-group-<%= group.key %>"
            >
          <header class="kt-site-settings__group-header">
            <span class="kt-site-settings__group-icon" aria-hidden="true">
              <i class="ti <%= group.icon %>"></i>
            </span>
            <div>
              <h4 id="site-settings-group-<%= group.key %>"><%= group.title %></h4>
              <p><%= group.helper %></p>
            </div>
          </header>

          <div class="kt-site-settings__field-grid">
            <% group.fields.forEach((field) => { %>
              <% if (field.kind === 'select') { %>
                <div
                  class="kt-site-settings__field kt-site-settings__select"
                  data-settings-site-field
                  data-settings-site-select
                >
                  <label
                    class="kt-site-settings__label"
                    id="site-settings-<%= field.name %>-label"
                    for="site-settings-<%= field.name %>-trigger"
                  >
                    <%= field.label %>
                    <% if (field.required) { %>
                      <span aria-hidden="true">*</span>
                    <% } %>
                  </label>

                  <select
                    class="kt-site-settings__native-select"
                    id="site-settings-<%= field.name %>"
                    name="<%= field.name %>"
                    tabindex="-1"
                    aria-hidden="true"
                    data-settings-site-native-select
                    <%= field.required ? 'required' : '' %>
                  >
                    <% field.options.forEach((option) => { %>
                      <option
                        value="<%= option.value %>"
                        <%= field.value === option.value ? 'selected' : '' %>
                      ><%= option.label %></option>
                    <% }) %>
                  </select>

                  <button
                    class="kt-site-settings__select-trigger"
                    id="site-settings-<%= field.name %>-trigger"
                    type="button"
                    role="combobox"
                    aria-haspopup="listbox"
                    aria-expanded="false"
                    aria-controls="site-settings-<%= field.name %>-listbox"
                    aria-labelledby="site-settings-<%= field.name %>-label site-settings-<%= field.name %>-value"
                    aria-describedby="site-settings-<%= field.name %>-error"
                    data-settings-site-select-trigger
                  >
                    <span class="kt-site-settings__control-icon" aria-hidden="true">
                      <i class="ti <%= field.icon %>"></i>
                    </span>
                    <span
                      class="kt-site-settings__select-value"
                      id="site-settings-<%= field.name %>-value"
                      data-settings-site-select-value
                    >
                      <% const selectedOption = field.options.find((option) => option.value === field.value) || field.options[0]; %>
                      <i class="ti <%= selectedOption.icon %>" aria-hidden="true"></i>
                      <span><%= selectedOption.label %></span>
                    </span>
                    <span class="kt-site-settings__select-chevron" aria-hidden="true">
                      <svg viewBox="0 0 20 20" focusable="false">
                        <path d="m5.5 7.75 4.5 4.5 4.5-4.5"></path>
                      </svg>
                    </span>
                  </button>

                  <div
                    class="kt-site-settings__select-menu"
                    id="site-settings-<%= field.name %>-listbox"
                    role="listbox"
                    aria-labelledby="site-settings-<%= field.name %>-label"
                    data-settings-site-select-menu
                    hidden
                  >
                    <% field.options.forEach((option) => { %>
                      <button
                        class="kt-site-settings__select-option <%= field.value === option.value ? 'is-selected' : '' %>"
                        id="site-settings-<%= field.name %>-option-<%= option.value %>"
                        type="button"
                        role="option"
                        aria-selected="<%= field.value === option.value ? 'true' : 'false' %>"
                        data-value="<%= option.value %>"
                        data-icon="<%= option.icon %>"
                        data-settings-site-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>

                  <p
                    class="kt-site-settings__error"
                    id="site-settings-<%= field.name %>-error"
                    role="alert"
                    aria-live="polite"
                    data-settings-site-error
                    hidden
                  >
                    <i class="ti ti-alert-circle" aria-hidden="true"></i>
                    <span><%= siteCopy.selectRequired %></span>
                  </p>
                </div>
              <% } else { %>
                <div class="kt-site-settings__field" data-settings-site-field>
                  <label
                    class="kt-site-settings__label"
                    for="site-settings-<%= field.name %>"
                  >
                    <span><%= field.label %></span>
                    <% if (field.badge) { %>
                      <small><%= field.badge %></small>
                    <% } %>
                    <% if (field.required) { %>
                      <span aria-hidden="true">*</span>
                    <% } %>
                  </label>

                  <div class="kt-site-settings__control">
                    <% if (field.icon) { %>
                      <span class="kt-site-settings__control-icon" aria-hidden="true">
                        <i class="ti <%= field.icon %>"></i>
                      </span>
                    <% } %>
                    <input
                      id="site-settings-<%= field.name %>"
                      type="<%= field.type %>"
                      name="<%= field.name %>"
                      value="<%= field.value %>"
                      placeholder="<%= field.placeholder %>"
                      dir="<%= field.dir || (siteIsEnglish ? 'ltr' : 'rtl') %>"
                      data-settings-site-input
                      data-settings-site-required-message="<%= siteCopy.required %>"
                      data-settings-site-email-message="<%= siteCopy.invalidEmail %>"
                      data-settings-site-url-message="<%= siteCopy.invalidUrl %>"
                      data-settings-site-phone-message="<%= siteCopy.invalidPhone %>"
                      data-settings-site-number-message="<%= siteCopy.invalidNumber %>"
                      aria-describedby="site-settings-<%= field.name %>-error"
                      aria-invalid="false"
                      <% if (field.inputmode) { %>inputmode="<%= field.inputmode %>"<% } %>
                      <% if (field.pattern) { %>pattern="<%= field.pattern %>"<% } %>
                      <% if (field.minlength !== undefined) { %>minlength="<%= field.minlength %>"<% } %>
                      <% if (field.maxlength !== undefined) { %>maxlength="<%= field.maxlength %>"<% } %>
                      <% if (field.min !== undefined) { %>min="<%= field.min %>"<% } %>
                      <% if (field.max !== undefined) { %>max="<%= field.max %>"<% } %>
                      <% if (field.step !== undefined) { %>step="<%= field.step %>"<% } %>
                      <%= field.required ? 'required' : '' %>
                    >
                  </div>

                  <p
                    class="kt-site-settings__error"
                    id="site-settings-<%= field.name %>-error"
                    role="alert"
                    aria-live="polite"
                    data-settings-site-error
                    hidden
                  >
                    <i class="ti ti-alert-circle" aria-hidden="true"></i>
                    <span></span>
                  </p>
                </div>
              <% } %>
            <% }) %>
          </div>
            </section>
          <% }) %>

          <section
            class="kt-site-settings__group kt-site-settings__group--uploads"
            data-settings-site-group="images"
            aria-labelledby="site-settings-group-images"
          >
            <header class="kt-site-settings__group-header">
              <span class="kt-site-settings__group-icon" aria-hidden="true">
                <i class="ti ti-photo-cog"></i>
              </span>
              <div>
                <h4 id="site-settings-group-images"><%= siteCopy.imagesTitle %></h4>
                <p><%= siteCopy.imagesHelper %></p>
              </div>
            </header>

            <div class="kt-site-settings__upload-grid">
              <% siteUploads.forEach((upload, uploadIndex) => { %>
                <% if (uploadIndex === 0 || uploadIndex === 2) { %>
                  <div
                    class="kt-site-settings__media-tier <%= uploadIndex === 0 ? 'kt-site-settings__media-tier--primary' : 'kt-site-settings__media-tier--supporting' %>"
                    data-settings-media-tier="<%= uploadIndex === 0 ? 'primary' : 'supporting' %>"
                  >
                    <span class="kt-site-settings__media-tier-icon" aria-hidden="true">
                      <i class="ti <%= uploadIndex === 0 ? 'ti-sparkles' : 'ti-library-photo' %>"></i>
                    </span>
                    <span>
                      <strong><%= uploadIndex === 0 ? siteCopy.primaryAssets : siteCopy.supportingAssets %></strong>
                      <small><%= uploadIndex === 0 ? siteCopy.primaryAssetsHelper : siteCopy.supportingAssetsHelper %></small>
                    </span>
                  </div>
                <% } %>
                <article
              class="kt-site-settings__upload"
              data-settings-site-upload
              data-settings-upload-kind="<%= upload.name %>"
              data-settings-upload-original-src="<%= upload.src %>"
              data-settings-upload-invalid-message="<%= siteCopy.invalidImage %>"
              data-settings-upload-unreadable-message="<%= siteCopy.unreadableImage %>"
            >
              <div class="kt-site-settings__upload-preview" data-settings-upload-preview-shell>
                <img
                  <% if (upload.src) { %>src="<%= upload.src %>"<% } %>
                  alt=""
                  data-settings-upload-preview
                  hidden
                >
                <span class="kt-site-settings__upload-placeholder" data-settings-upload-placeholder>
                  <i class="ti <%= upload.icon %>" aria-hidden="true"></i>
                  <small><%= siteCopy.noImage %></small>
                </span>
                <span class="kt-site-settings__upload-current" data-settings-upload-current>
                  <i class="ti ti-photo-check" aria-hidden="true"></i>
                  <span><%= siteCopy.currentImage %></span>
                </span>
                <span class="kt-site-settings__upload-ratio"><%= upload.ratio %></span>
              </div>

              <div class="kt-site-settings__upload-content">
                <div>
                  <h5><%= upload.title %></h5>
                  <p><%= siteCopy.uploadFormats %></p>
                  <small><%= siteCopy.uploadHelper %></small>
                </div>

                <span class="kt-site-settings__upload-file" data-settings-upload-file>
                  <i class="ti ti-file-type-jpg" aria-hidden="true"></i>
                  <span><%= siteCopy.selectedFile %></span>
                </span>

                <div class="kt-site-settings__upload-actions">
                  <label
                    class="kt-site-settings__upload-button"
                    for="site-settings-upload-<%= upload.name %>"
                  >
                    <i class="ti ti-upload" aria-hidden="true"></i>
                    <span
                      data-settings-upload-button-label
                      data-choose-label="<%= siteCopy.chooseImage %>"
                      data-replace-label="<%= siteCopy.replaceImage %>"
                    ><%= siteCopy.chooseImage %></span>
                  </label>
                  <input
                    id="site-settings-upload-<%= upload.name %>"
                    type="file"
                    name="<%= upload.name %>"
                    accept="image/png,image/jpeg,image/jpg,image/webp"
                    data-settings-site-upload-input
                    hidden
                  >
                  <button
                    class="kt-site-settings__upload-reset"
                    type="button"
                    data-settings-site-upload-reset
                    hidden
                  >
                    <i class="ti ti-arrow-back-up" aria-hidden="true"></i>
                    <span><%= siteCopy.resetImage %></span>
                  </button>
                </div>

                <p
                  class="kt-site-settings__error kt-site-settings__upload-error"
                  role="alert"
                  aria-live="polite"
                  data-settings-site-error
                  hidden
                >
                  <i class="ti ti-alert-circle" aria-hidden="true"></i>
                  <span></span>
                </p>
              </div>
                </article>
              <% }) %>
            </div>
          </section>
        </div>

        <div class="kt-site-settings__save-bar" data-settings-site-save-bar>
          <div class="kt-site-settings__save-copy">
            <span class="kt-site-settings__save-icon" aria-hidden="true">
              <i class="ti ti-device-floppy"></i>
            </span>
            <span>
              <strong><%= siteCopy.saveTitle %></strong>
              <small data-settings-site-save-helper><%= siteCopy.savedHelper %></small>
            </span>
          </div>

          <p class="kt-site-settings__form-message" aria-live="polite" data-settings-site-form-message></p>

          <button
            class="kt-site-settings__submit"
            type="submit"
            data-settings-site-submit
            disabled
          >
            <span class="kt-site-settings__submit-spinner" aria-hidden="true"></span>
            <i class="ti ti-check" aria-hidden="true" data-settings-site-submit-icon></i>
            <span
              data-settings-site-submit-label
              data-idle-label="<%= siteCopy.save %>"
              data-busy-label="<%= siteCopy.saving %>"
            ><%= siteCopy.save %></span>
          </button>
        </div>
      </main>

      <aside class="kt-site-settings__rail" aria-label="<%= siteCopy.overviewTitle %>" data-settings-site-rail>
        <div class="kt-site-settings__rail-shell">
          <header class="kt-site-settings__rail-header">
            <span class="kt-site-settings__rail-icon" aria-hidden="true">
              <i class="ti ti-command"></i>
            </span>
            <span>
              <strong><%= siteCopy.overviewTitle %></strong>
              <small><%= siteCopy.overviewHelper %></small>
            </span>
          </header>

          <div class="kt-site-settings__rail-state">
            <small><%= siteCopy.saveState %></small>
            <span class="kt-site-settings__status is-saved" data-settings-site-status>
              <i class="ti ti-circle-check" aria-hidden="true"></i>
              <span data-settings-site-status-label><%= siteCopy.saved %></span>
            </span>
          </div>

          <nav class="kt-site-settings__anchors" aria-label="<%= siteCopy.quickNavigation %>">
            <span class="kt-site-settings__anchors-label"><%= siteCopy.quickNavigation %></span>
            <% siteAnchors.forEach((anchor, anchorIndex) => { %>
              <button
                class="kt-site-settings__anchor <%= anchorIndex === 0 ? 'is-active' : '' %>"
                type="button"
                data-settings-site-anchor="<%= anchor.key %>"
                aria-current="<%= anchorIndex === 0 ? 'location' : 'false' %>"
              >
                <span class="kt-site-settings__anchor-icon" aria-hidden="true">
                  <i class="ti <%= anchor.icon %>"></i>
                </span>
                <span><%= anchor.label %></span>
                <i class="ti <%= siteIsEnglish ? 'ti-chevron-right' : 'ti-chevron-left' %>" aria-hidden="true"></i>
              </button>
            <% }) %>
          </nav>

          <div class="kt-site-settings__rail-media">
            <span class="kt-site-settings__rail-media-icon" aria-hidden="true">
              <i class="ti ti-photo-check"></i>
            </span>
            <span>
              <small><%= siteCopy.mediaReadiness %></small>
              <strong><%= siteUploads.length %> <%= siteCopy.mediaAssets %></strong>
            </span>
          </div>

        </div>
      </aside>
    </div>
  </form>
</div>