<%
  const auctionLocale = (
    typeof lang === 'string'
      ? lang
      : (
        typeof user !== 'undefined'
        && user
        && typeof user.lang === 'string'
          ? user.lang
          : 'ar'
      )
  );
  const auctionIsEnglish = String(auctionLocale).toLowerCase().startsWith('en');
  const auctionSettings = (
    typeof setting !== 'undefined'
    && setting
    && typeof setting === 'object'
  ) ? setting : {};
  const auctionValue = (value) => (
    value === undefined || value === null ? '' : value
  );
  const auctionBidValues = Array.isArray(auctionSettings.auctionBidValues)
    ? auctionSettings.auctionBidValues
    : [];
  const auctionCopy = auctionIsEnglish
    ? {
      commissionTitle: 'Auction commission',
      commissionHelper: 'Define how platform commission is calculated for completed auctions.',
      commissionValue: 'Commission value',
      commissionType: 'Calculation type',
      ratio: 'Percentage',
      number: 'Fixed amount',
      bidsTitle: 'Bid values',
      bidsHelper: 'Curate the quick bid increments offered to participants.',
      addBid: 'Add value',
      removeBid: 'Remove value',
      bidPlaceholder: 'Value',
      emptyBids: 'Add at least one quick bid value when required by operations.',
      policyTitle: 'Auction timing and policies',
      policyHelper: 'Control payment deadlines, attendance, reminders, and operational fees.',
      paymentDeadline: 'Payment deadline',
      paymentDeadlineValue: 'Deadline duration',
      paymentDeadlineUnit: 'Deadline unit',
      viewers: 'Maximum non-subscriber viewers',
      publishBeforeStart: 'Show auction before start (hours)',
      reminder: 'Ending reminder percentage',
      reactivation: 'Maximum reactivation count',
      broadcastFee: 'Broadcast fee',
      responseTime: 'Haraj response time',
      responseUnit: 'Response time unit',
      minutes: 'Minutes',
      hours: 'Hours',
      days: 'Days',
      saved: 'Saved',
      dirty: 'Unsaved changes',
      saveTitle: 'Auction policy is ready',
      saveHelper: 'The current auction policy is saved.',
      dirtyHelper: 'Review auction changes before saving.',
      save: 'Save changes',
      saving: 'Saving...',
      saveSuccess: 'Auction settings were saved',
      saveError: 'Auction settings could not be saved',
      required: 'Enter a valid value',
      selectRequired: 'Choose an option',
      percentInvalid: 'Enter a percentage from 0 to 100',
    }
    : {
      commissionTitle: 'عمولة المزاد',
      commissionHelper: 'حدّد طريقة احتساب عمولة المنصة للمزادات المكتملة.',
      commissionValue: 'قيمة العمولة',
      commissionType: 'نوع الاحتساب',
      ratio: 'نسبة مئوية',
      number: 'مبلغ ثابت',
      bidsTitle: 'قيم المزايدة',
      bidsHelper: 'نظّم زيادات المزايدة السريعة المتاحة للمشاركين.',
      addBid: 'إضافة قيمة',
      removeBid: 'حذف القيمة',
      bidPlaceholder: 'القيمة',
      emptyBids: 'أضف قيمة مزايدة سريعة واحدة على الأقل عند الحاجة التشغيلية.',
      policyTitle: 'مواعيد وسياسات المزاد',
      policyHelper: 'تحكم في مهل الدفع والحضور والتنبيهات والرسوم التشغيلية.',
      paymentDeadline: 'مهلة الدفع',
      paymentDeadlineValue: 'مدة مهلة الدفع',
      paymentDeadlineUnit: 'وحدة مهلة الدفع',
      viewers: 'الحد الأقصى للمشاهدين غير المشتركين',
      publishBeforeStart: 'إظهار المزاد قبل البداية (بالساعات)',
      reminder: 'نسبة تنبيه قرب الانتهاء',
      reactivation: 'الحد الأقصى لإعادة التفعيل',
      broadcastFee: 'رسوم البث',
      responseTime: 'مهلة الرد على طلب الحراج',
      responseUnit: 'وحدة مهلة الرد',
      minutes: 'دقائق',
      hours: 'ساعات',
      days: 'أيام',
      saved: 'محفوظ',
      dirty: 'توجد تغييرات غير محفوظة',
      saveTitle: 'سياسة المزادات جاهزة',
      saveHelper: 'سياسة المزادات الحالية محفوظة.',
      dirtyHelper: 'راجع تغييرات المزادات قبل الحفظ.',
      save: 'حفظ التغييرات',
      saving: 'جاري الحفظ...',
      saveSuccess: 'تم حفظ إعدادات المزادات',
      saveError: 'تعذر حفظ إعدادات المزادات',
      required: 'أدخل قيمة صحيحة',
      selectRequired: 'اختر قيمة',
      percentInvalid: 'أدخل نسبة من 0 إلى 100',
    };
  const auctionCommissionOptions = [
    { value: 'ratio', label: auctionCopy.ratio, icon: 'ti-percentage' },
    { value: 'number', label: auctionCopy.number, icon: 'ti-cash' },
  ];
  const auctionUnitOptions = [
    { value: 'minutes', label: auctionCopy.minutes, icon: 'ti-clock-minute' },
    { value: 'hours', label: auctionCopy.hours, icon: 'ti-clock-hour-4' },
    { value: 'days', label: auctionCopy.days, icon: 'ti-calendar-event' },
  ];
  const auctionSelects = [
    {
      key: 'commission',
      name: 'auctionTypeAppPercentage',
      label: auctionCopy.commissionType,
      value: auctionValue(auctionSettings.auctionTypeAppPercentage) || 'ratio',
      options: auctionCommissionOptions,
    },
    {
      key: 'deadline',
      name: 'auctionPaymentDeadlineTimeUnit',
      label: auctionCopy.paymentDeadlineUnit,
      value: auctionValue(auctionSettings.auctionPaymentDeadlineTimeUnit) || 'minutes',
      options: auctionUnitOptions,
    },
    {
      key: 'response',
      name: 'harajRequestReponseTimeUnit',
      label: auctionCopy.responseUnit,
      value: auctionValue(auctionSettings.harajRequestReponseTimeUnit) || 'minutes',
      options: auctionUnitOptions,
    },
  ];
  const auctionPolicyFields = [
    {
      key: 'deadline-value',
      name: 'auctionPaymentDeadlineTime',
      label: auctionCopy.paymentDeadlineValue,
      value: auctionValue(auctionSettings.auctionPaymentDeadlineTime),
      icon: 'ti-hourglass-high',
      min: 0,
      step: 1,
      message: auctionCopy.required,
    },
    {
      key: 'viewers',
      name: 'auctionNonSubscriberMaxViewers',
      label: auctionCopy.viewers,
      value: auctionValue(auctionSettings.auctionNonSubscriberMaxViewers),
      icon: 'ti-users',
      min: 1,
      step: 1,
      message: auctionCopy.required,
    },
    {
      key: 'publish-before-start',
      name: 'auctionPublishBeforeStartHours',
      label: auctionCopy.publishBeforeStart,
      value: auctionValue(auctionSettings.auctionPublishBeforeStartHours),
      icon: 'ti-clock-hour-10',
      min: 0,
      step: 1,
      message: auctionCopy.required,
    },
    {
      key: 'reminder',
      name: 'auctionEndingReminderPercentage',
      label: auctionCopy.reminder,
      value: auctionValue(auctionSettings.auctionEndingReminderPercentage),
      icon: 'ti-bell-ringing',
      min: 0,
      max: 100,
      step: 1,
      message: auctionCopy.percentInvalid,
    },
    {
      key: 'reactivation',
      name: 'maxReactivationCount',
      label: auctionCopy.reactivation,
      value: auctionValue(auctionSettings.maxReactivationCount),
      icon: 'ti-refresh-dot',
      min: 0,
      step: 1,
      message: auctionCopy.required,
    },
    {
      key: 'broadcast',
      name: 'broadcastFee',
      label: auctionCopy.broadcastFee,
      value: auctionValue(auctionSettings.broadcastFee),
      icon: 'ti-broadcast',
      min: 0,
      step: 0.01,
      message: auctionCopy.required,
    },
    {
      key: 'response-value',
      name: 'harajRequestReponseTime',
      label: auctionCopy.responseTime,
      value: auctionValue(auctionSettings.harajRequestReponseTime),
      icon: 'ti-message-time',
      min: 0,
      step: 1,
      message: auctionCopy.required,
    },
  ];
%>

<section
  class="kt-settings-module kt-settings-module--auctions"
  dir="<%= auctionIsEnglish ? 'ltr' : 'rtl' %>"
  data-settings-module="auctions"
  data-settings-module-saved-label="<%= auctionCopy.saved %>"
  data-settings-module-dirty-label="<%= auctionCopy.dirty %>"
  data-settings-module-saved-helper="<%= auctionCopy.saveHelper %>"
  data-settings-module-dirty-helper="<%= auctionCopy.dirtyHelper %>"
  data-settings-module-success="<%= auctionCopy.saveSuccess %>"
  data-settings-module-error="<%= auctionCopy.saveError %>"
>
  <form
    action="/dashboard/settings/editAuctionSetting"
    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="<%= auctionValue(auctionSettings._id) %>">

    <div class="kt-settings-module__auction-top">
      <section
        class="kt-settings-module__group kt-settings-module__group--primary"
        aria-labelledby="settings-auction-commission-title"
      >
        <header class="kt-settings-module__group-header">
          <span class="kt-settings-module__group-icon" aria-hidden="true">
            <i class="ti ti-percentage"></i>
          </span>
          <div>
            <h3 id="settings-auction-commission-title"><%= auctionCopy.commissionTitle %></h3>
            <p><%= auctionCopy.commissionHelper %></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-auction-commission-amount">
              <span><%= auctionCopy.commissionValue %></span>
            </label>
            <div class="kt-settings-module__control">
              <input
                id="settings-auction-commission-amount"
                name="auctionAppPercentage"
                type="number"
                inputmode="decimal"
                min="0"
                step="0.01"
                value="<%= auctionValue(auctionSettings.auctionAppPercentage) %>"
                placeholder="0"
                required
                data-settings-module-input
                data-settings-required-message="<%= auctionCopy.required %>"
                data-settings-number-message="<%= auctionCopy.required %>"
                aria-describedby="settings-auction-commission-amount-error"
                aria-invalid="false"
              >
              <i class="ti ti-coins" aria-hidden="true"></i>
            </div>
            <p
              class="kt-settings-module__error"
              id="settings-auction-commission-amount-error"
              data-settings-module-error
              hidden
            >
              <i class="ti ti-alert-circle" aria-hidden="true"></i>
              <span><%= auctionCopy.required %></span>
            </p>
          </div>

          <% const commissionSelect = auctionSelects[0]; %>
          <% const selectedCommission = commissionSelect.options.find((option) => option.value === commissionSelect.value) || commissionSelect.options[0]; %>
          <div class="kt-settings-module__field" data-settings-module-field>
            <span class="kt-settings-module__label" id="settings-auction-commission-label">
              <span><%= commissionSelect.label %></span>
            </span>
            <div class="kt-settings-module__select" data-settings-module-select>
              <select
                class="kt-settings-module__native-select"
                id="settings-auction-commission"
                name="<%= commissionSelect.name %>"
                required
                tabindex="-1"
                aria-hidden="true"
                data-settings-module-native-select
              >
                <% commissionSelect.options.forEach((option) => { %>
                  <option
                    value="<%= option.value %>"
                    <%= option.value === selectedCommission.value ? 'selected' : '' %>
                  ><%= option.label %></option>
                <% }) %>
              </select>
              <button
                class="kt-settings-module__select-trigger"
                id="settings-auction-commission-trigger"
                type="button"
                role="combobox"
                aria-haspopup="listbox"
                aria-expanded="false"
                aria-controls="settings-auction-commission-listbox"
                aria-labelledby="settings-auction-commission-label settings-auction-commission-value"
                aria-describedby="settings-auction-commission-error"
                aria-invalid="false"
                data-settings-module-select-trigger
              >
                <span
                  class="kt-settings-module__select-value"
                  id="settings-auction-commission-value"
                  data-settings-module-select-value
                >
                  <i class="ti <%= selectedCommission.icon %>" aria-hidden="true"></i>
                  <span><%= selectedCommission.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-auction-commission-listbox"
                role="listbox"
                aria-labelledby="settings-auction-commission-label"
                data-settings-module-select-menu
                hidden
              >
                <% commissionSelect.options.forEach((option, optionIndex) => { %>
                  <button
                    class="kt-settings-module__select-option <%= option.value === selectedCommission.value ? 'is-selected' : '' %>"
                    id="settings-auction-commission-option-<%= optionIndex %>"
                    type="button"
                    role="option"
                    aria-selected="<%= option.value === selectedCommission.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>
              <p
                class="kt-settings-module__error"
                id="settings-auction-commission-error"
                data-settings-module-error
                hidden
              >
                <i class="ti ti-alert-circle" aria-hidden="true"></i>
                <span><%= auctionCopy.selectRequired %></span>
              </p>
            </div>
          </div>
        </div>
      </section>

      <section
        class="kt-settings-module__group kt-settings-module__group--bids"
        aria-labelledby="settings-auction-bids-title"
      >
        <header class="kt-settings-module__group-header">
          <span class="kt-settings-module__group-icon" aria-hidden="true">
            <i class="ti ti-gavel"></i>
          </span>
          <div>
            <h3 id="settings-auction-bids-title"><%= auctionCopy.bidsTitle %></h3>
            <p><%= auctionCopy.bidsHelper %></p>
          </div>
        </header>

        <div class="kt-settings-module__bid-values" data-settings-bid-values>
          <% auctionBidValues.forEach((bidValue, bidIndex) => { %>
            <div class="kt-settings-module__bid-chip" data-settings-bid-chip>
              <span aria-hidden="true"><i class="ti ti-currency-riyal"></i></span>
              <label class="visually-hidden" for="settings-auction-bid-<%= bidIndex %>">
                <%= auctionCopy.bidsTitle %>
              </label>
              <input
                id="settings-auction-bid-<%= bidIndex %>"
                name="auctionBidValues[]"
                type="number"
                min="0"
                step="1"
                value="<%= auctionValue(bidValue) %>"
                placeholder="<%= auctionCopy.bidPlaceholder %>"
                data-settings-module-input
              >
              <button
                type="button"
                aria-label="<%= auctionCopy.removeBid %>"
                data-settings-bid-remove
              >
                <i class="ti ti-x" aria-hidden="true"></i>
              </button>
            </div>
          <% }) %>
          <p class="kt-settings-module__bid-empty" data-settings-bid-empty <%= auctionBidValues.length ? 'hidden' : '' %>>
            <i class="ti ti-info-circle" aria-hidden="true"></i>
            <span><%= auctionCopy.emptyBids %></span>
          </p>
        </div>

        <button
          class="kt-settings-module__bid-add"
          type="button"
          data-settings-bid-add
          data-input-label="<%= auctionCopy.bidsTitle %>"
          data-remove-label="<%= auctionCopy.removeBid %>"
          data-placeholder="<%= auctionCopy.bidPlaceholder %>"
        >
          <i class="ti ti-plus" aria-hidden="true"></i>
          <span><%= auctionCopy.addBid %></span>
        </button>
      </section>
    </div>

    <section
      class="kt-settings-module__group"
      aria-labelledby="settings-auction-policy-title"
    >
      <header class="kt-settings-module__group-header">
        <span class="kt-settings-module__group-icon" aria-hidden="true">
          <i class="ti ti-adjustments-horizontal"></i>
        </span>
        <div>
          <h3 id="settings-auction-policy-title"><%= auctionCopy.policyTitle %></h3>
          <p><%= auctionCopy.policyHelper %></p>
        </div>
      </header>

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

        <% auctionSelects.slice(1).forEach((selectData) => { %>
          <% const selectedOption = selectData.options.find((option) => option.value === selectData.value) || selectData.options[0]; %>
          <div class="kt-settings-module__field" data-settings-module-field>
            <span class="kt-settings-module__label" id="settings-auction-<%= selectData.key %>-label">
              <span><%= selectData.label %></span>
            </span>
            <div class="kt-settings-module__select" data-settings-module-select>
              <select
                class="kt-settings-module__native-select"
                id="settings-auction-<%= selectData.key %>"
                name="<%= selectData.name %>"
                required
                tabindex="-1"
                aria-hidden="true"
                data-settings-module-native-select
              >
                <% selectData.options.forEach((option) => { %>
                  <option
                    value="<%= option.value %>"
                    <%= option.value === selectedOption.value ? 'selected' : '' %>
                  ><%= option.label %></option>
                <% }) %>
              </select>
              <button
                class="kt-settings-module__select-trigger"
                id="settings-auction-<%= selectData.key %>-trigger"
                type="button"
                role="combobox"
                aria-haspopup="listbox"
                aria-expanded="false"
                aria-controls="settings-auction-<%= selectData.key %>-listbox"
                aria-labelledby="settings-auction-<%= selectData.key %>-label settings-auction-<%= selectData.key %>-value"
                aria-describedby="settings-auction-<%= selectData.key %>-error"
                aria-invalid="false"
                data-settings-module-select-trigger
              >
                <span
                  class="kt-settings-module__select-value"
                  id="settings-auction-<%= selectData.key %>-value"
                  data-settings-module-select-value
                >
                  <i class="ti <%= selectedOption.icon %>" aria-hidden="true"></i>
                  <span><%= selectedOption.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-auction-<%= selectData.key %>-listbox"
                role="listbox"
                aria-labelledby="settings-auction-<%= selectData.key %>-label"
                data-settings-module-select-menu
                hidden
              >
                <% selectData.options.forEach((option, optionIndex) => { %>
                  <button
                    class="kt-settings-module__select-option <%= option.value === selectedOption.value ? 'is-selected' : '' %>"
                    id="settings-auction-<%= selectData.key %>-option-<%= optionIndex %>"
                    type="button"
                    role="option"
                    aria-selected="<%= option.value === selectedOption.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>
              <p
                class="kt-settings-module__error"
                id="settings-auction-<%= selectData.key %>-error"
                data-settings-module-error
                hidden
              >
                <i class="ti ti-alert-circle" aria-hidden="true"></i>
                <span><%= auctionCopy.selectRequired %></span>
              </p>
            </div>
          </div>
        <% }) %>
      </div>
    </section>

    <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-gavel"></i>
        </span>
        <span>
          <strong><%= auctionCopy.saveTitle %></strong>
          <small data-settings-module-save-helper><%= auctionCopy.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><%= auctionCopy.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="<%= auctionCopy.save %>"
          data-busy-label="<%= auctionCopy.saving %>"
        ><%= auctionCopy.save %></span>
      </button>
    </footer>
  </form>
</section>