<%
  const sdList = typeof subDepartments !== 'undefined' ? subDepartments : [];
  const harajList = typeof harajs !== 'undefined' ? harajs : [];
  const a = data.auction;
%>
<section class="kt-ops-form-surface" id="auction-edit">
  <header class="kt-ops-form-surface__header">
    <span class="kt-ops-section-icon" aria-hidden="true"><i class="ti ti-edit"></i></span>
    <div>
      <h2><%= i18n.__('auctions.editAuctionSection') %></h2>
      <p><%= i18n.__('auctions.editAuctionHint') %></p>
    </div>
  </header>
  <form id="auction-dashboard-edit-form" action="/dashboard/auctions/action/update" method="post"
    enctype="multipart/form-data" data-ops-form data-auction-edit-form novalidate>
    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
    <input type="hidden" name="id" value="<%= a.id %>">
    <input type="hidden" name="startAt" value="<%= a.startAtForm %>" data-auction-start-value>
    <input type="hidden" name="endAt" value="<%= a.endAtForm %>" data-auction-end-value>

    <div class="kt-ops-form__body">
      <div class="kt-ops-form-grid">
        <div class="kt-ops-field" data-ops-field>
          <label for="auction-edit-product-name"><%= i18n.__('auctions.productName') %></label>
          <input class="kt-ops-control" id="auction-edit-product-name" type="text" name="productName"
            value="<%= a.productName || '' %>" maxlength="200" required>
          <p class="kt-ops-field__error" data-ops-field-error></p>
        </div>
        <div class="kt-ops-field" data-ops-field>
          <label for="auction-edit-subdepartment"><%= i18n.__('auctions.subDepartment') %></label>
          <div data-ops-select>
            <select id="auction-edit-subdepartment" name="subDepartment" data-ops-native-select required>
              <% sdList.forEach(function(sd) { %>
                <option value="<%= sd._id %>" <%= String(sd._id) === String(a.subDepartmentId) ? 'selected' : '' %>>
                  <%= sd.name && (sd.name[lang] || sd.name.ar || sd.name.en) %>
                </option>
              <% }) %>
            </select>
          </div>
          <p class="kt-ops-field__error" data-ops-field-error></p>
        </div>
        <% [
          ['start', 'auctions.startAt', a.startAtDateISO, a.startAtTime24],
          ['end', 'auctions.endAt', a.endAtDateISO, a.endAtTime24]
        ].forEach(function(dateField) { %>
          <fieldset class="kt-ops-field kt-ops-field--wide" data-ops-field>
            <legend class="kt-ops-field__label"><%= i18n.__(dateField[1]) %></legend>
            <div class="kt-ops-date-pair" dir="ltr" lang="en">
              <label>
                <span><%= i18n.__('auctions.datePart') %></span>
                <input class="kt-ops-control" type="date" value="<%= dateField[2] || '' %>"
                  data-auction-<%= dateField[0] %>-date required>
              </label>
              <label>
                <span><%= i18n.__('auctions.timePart') %></span>
                <input class="kt-ops-control" type="time" value="<%= dateField[3] || '' %>" step="60"
                  data-auction-<%= dateField[0] %>-time required>
              </label>
            </div>
            <p class="kt-ops-field__error" data-ops-field-error></p>
          </fieldset>
        <% }) %>
        <% [
          ['initialBidValue', 'auctions.initialBidValue', a.initialBidValue],
          ['minimumBidValue', 'auctions.minimumBidValue', a.minimumBidValue],
          ['depositAmount', 'auctions.depositAmount', a.depositAmount]
        ].forEach(function(field) { %>
          <div class="kt-ops-field" data-ops-field>
            <label for="auction-edit-<%= field[0] %>"><%= i18n.__(field[1]) %></label>
            <input class="kt-ops-control" id="auction-edit-<%= field[0] %>" type="number" name="<%= field[0] %>"
              value="<%= field[2] ?? '' %>" min="0" step="any" required>
            <p class="kt-ops-field__error" data-ops-field-error></p>
          </div>
        <% }) %>
        <div class="kt-ops-field kt-ops-field--wide" data-ops-field>
          <label for="auction-edit-description"><%= i18n.__('auctions.description') %></label>
          <textarea class="kt-ops-control" id="auction-edit-description" name="description"
            maxlength="3000" required><%= a.description || '' %></textarea>
          <p class="kt-ops-field__error" data-ops-field-error></p>
        </div>
        <div class="kt-ops-field kt-ops-field--wide" data-ops-field>
          <label for="auction-edit-conditions"><%= i18n.__('auctions.specialConditions') %></label>
          <textarea class="kt-ops-control" id="auction-edit-conditions" name="specialConditions"
            maxlength="3000"><%= a.specialConditions || '' %></textarea>
          <p class="kt-ops-field__error" data-ops-field-error></p>
        </div>
        <div class="kt-ops-field kt-ops-field--wide">
          <label class="kt-ops-toggle" for="auction-edit-is-live">
            <input id="auction-edit-is-live" type="checkbox" name="isLive" value="true"
              data-auction-live-toggle <%= a.isLiveRaw ? 'checked' : '' %>>
            <span class="kt-ops-toggle__track" aria-hidden="true"></span>
            <span><%= i18n.__('auctions.isLive') %></span>
          </label>
        </div>
        <div class="kt-ops-form-grid kt-ops-field--wide" data-auction-live-fields <%= a.isLiveRaw ? '' : 'hidden' %>>
          <div class="kt-ops-field" data-ops-field>
            <label for="auction-edit-haraj"><%= i18n.__('auctions.selectedHaraj') %></label>
            <div data-ops-select>
              <select id="auction-edit-haraj" name="selectedHaraj" data-ops-native-select>
                <option value="">—</option>
                <% harajList.forEach(function(haraj) { %>
                  <option value="<%= haraj._id %>" <%= String(haraj._id) === String(a.selectedHarajId) ? 'selected' : '' %>><%= haraj.name %></option>
                <% }) %>
              </select>
            </div>
            <p class="kt-ops-field__error" data-ops-field-error></p>
          </div>
          <div class="kt-ops-field" data-ops-field>
            <label for="auction-edit-commission"><%= i18n.__('auctions.harajCommissionPercentage') %></label>
            <input class="kt-ops-control" id="auction-edit-commission" type="number"
              name="harajCommissionPercentage" min="0" max="100" step="any"
              value="<%= a.isLiveRaw ? a.harajCommissionPercentage : '' %>">
            <p class="kt-ops-field__error" data-ops-field-error></p>
          </div>
        </div>
        <div class="kt-ops-field kt-ops-field--wide kt-ops-file" data-ops-field>
          <label for="auction-edit-images"><%= i18n.__('auctions.images') %></label>
          <input class="kt-ops-file__input" id="auction-edit-images" type="file" name="images"
            accept="image/jpeg,image/png" multiple data-ops-file-input>
          <label class="kt-ops-file__trigger" for="auction-edit-images">
            <span class="kt-ops-file__icon"><i class="ti ti-photo-plus"></i></span>
            <span data-ops-file-label data-empty-label="<%= i18n.__('operationsContent.chooseImages') %>"
              data-selected-template="<%= i18n.__('operationsContent.selectedFiles') %>"><%= i18n.__('operationsContent.chooseImages') %></span>
          </label>
          <p class="kt-ops-field__hint"><%= i18n.__('auctions.editImagesHint') %></p>
          <p class="kt-ops-field__error" data-ops-field-error></p>
        </div>
      </div>
    </div>
    <footer class="kt-ops-form__footer">
      <a class="kt-ops-btn" href="/dashboard/auctions/<%= currentMenu %>"><i class="ti ti-arrow-back-up"></i><span><%= i18n.__('operationsContent.back') %></span></a>
      <button class="kt-ops-btn kt-ops-btn--primary" type="submit"
        data-ops-loading-label="<%= i18n.__('operationsContent.saving') %>">
        <span class="kt-ops-btn__spinner" data-ops-button-spinner hidden></span>
        <i class="ti ti-device-floppy"></i>
        <span data-ops-button-label><%= i18n.__('common.saveChanges') %></span>
      </button>
    </footer>
  </form>
</section>
