<%- include('../operationsContent/assets.ejs') %>
<main class="kt-ops" data-ops-page
  data-ops-required-message="<%= i18n.__('operationsContent.validationRequired') %>"
  data-ops-arabic-message="<%= i18n.__('operationsContent.validationArabic') %>"
  data-ops-english-message="<%= i18n.__('operationsContent.validationEnglish') %>"
  data-ops-action-success="<%= i18n.__('operationsContent.actionSuccess') %>"
  data-ops-action-error="<%= i18n.__('operationsContent.actionError') %>">
  <div class="kt-ops__stack">
    <%- include('../operationsContent/hero.ejs', {
      heading: i18n.__('common.create {{module}}', { module: i18n.__('sliders.slider') }),
      description: i18n.__('operationsContent.formDescription'),
      icon: 'ti-photo-plus',
      count: 0,
      showCount: false,
      primaryUrl: null,
      primaryLabel: null,
      backUrl: '/dashboard/sliders'
    }) %>
    <form class="kt-ops-form-surface" id="addSlider" action="/dashboard/sliders/create" method="post"
      enctype="multipart/form-data" data-ops-form novalidate>
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <header class="kt-ops-form-surface__header">
        <span class="kt-ops-section-icon" aria-hidden="true"><i class="ti ti-layout-carousel"></i></span>
        <div><h2><%= i18n.__('operationsContent.contentSection') %></h2><p><%= i18n.__('operationsContent.formDescription') %></p></div>
      </header>
      <div class="kt-ops-form__body">
        <div class="kt-ops-form-grid">
          <div class="kt-ops-field kt-ops-field--wide" data-ops-field>
            <label for="slider-image"><%= i18n.__('sliders.image') %></label>
            <div class="kt-ops-media" data-ops-media-wrap>
              <img alt="" data-ops-media data-ops-preview-image hidden>
              <span class="kt-ops-media__fallback" data-ops-media-fallback>
                <span class="kt-ops-media__fallback-icon"><i class="ti ti-photo-plus"></i></span>
                <span><%= i18n.__('operationsContent.imageHint') %></span>
              </span>
            </div>
            <div class="kt-ops-file">
              <input class="kt-ops-file__input" id="slider-image" type="file" name="image"
                accept="image/png,image/jpeg" data-ops-file-input required>
              <label class="kt-ops-file__trigger" for="slider-image">
                <span class="kt-ops-file__icon"><i class="ti ti-upload"></i></span>
                <span data-ops-file-label data-empty-label="<%= i18n.__('operationsContent.chooseImage') %>"
                  data-selected-template="<%= i18n.__('operationsContent.selectedFiles') %>"><%= i18n.__('operationsContent.chooseImage') %></span>
              </label>
            </div>
            <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
          </div>
          <section class="kt-ops-language-card">
            <div class="kt-ops-language-card__head"><strong><%= i18n.__('sliders.descriptionAr') %></strong><span class="kt-ops-language-chip kt-ops-language-chip--ar">AR · عربي</span></div>
            <div class="kt-ops-field" data-ops-field>
              <label for="slider-description-ar"><%= i18n.__('sliders.descriptionAr') %></label>
              <textarea class="kt-ops-control" id="slider-description-ar" name="description.ar" dir="rtl" lang="ar"
                data-ops-script="arabic" placeholder="اكتب وصف السلايدر باللغة العربية" required></textarea>
              <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
            </div>
          </section>
          <section class="kt-ops-language-card">
            <div class="kt-ops-language-card__head"><strong><%= i18n.__('sliders.descriptionEn') %></strong><span class="kt-ops-language-chip">EN · English</span></div>
            <div class="kt-ops-field" data-ops-field>
              <label for="slider-description-en"><%= i18n.__('sliders.descriptionEn') %></label>
              <textarea class="kt-ops-control" id="slider-description-en" name="description.en" dir="ltr" lang="en"
                data-ops-script="latin" placeholder="Enter the slider description in English" required></textarea>
              <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
            </div>
          </section>
        </div>
      </div>
      <footer class="kt-ops-form__footer">
        <a class="kt-ops-btn" href="/dashboard/sliders"><%= i18n.__('operationsContent.cancel') %></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>
          <span data-ops-button-label><%= i18n.__('operationsContent.save') %></span>
        </button>
      </footer>
    </form>
  </div>
</main>
<%- include('../operationsContent/scripts.ejs') %>
