<%- 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.edit {{module}}', { module: i18n.__('intros.intro') }),
      description: i18n.__('operationsContent.formDescription'),
      icon: 'ti-file-pencil', count: 0, showCount: false,
      primaryUrl: null, primaryLabel: null, backUrl: '/dashboard/intros'
    }) %>
    <form class="kt-ops-form-surface" id="editIntro" action="/dashboard/intros/edit/<%= intro.id %>" 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"><i class="ti ti-device-mobile-message"></i></span>
        <div><h2><%= i18n.__('operationsContent.contentSection') %></h2><p><%= i18n.__('operationsContent.replaceImageHint') %></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="intro-image"><%= i18n.__('intros.image') %></label>
            <div class="kt-ops-media" data-ops-media-wrap>
              <img src="<%= intro.image %>" alt="" data-ops-media data-ops-preview-image>
              <span class="kt-ops-media__fallback" data-ops-media-fallback hidden><span class="kt-ops-media__fallback-icon"><i class="ti ti-photo-off"></i></span><span><%= i18n.__('operationsContent.imageUnavailable') %></span></span>
            </div>
            <div class="kt-ops-file">
              <input class="kt-ops-file__input" id="intro-image" type="file" name="image"
                accept="image/png,image/jpeg" data-ops-file-input>
              <label class="kt-ops-file__trigger" for="intro-image">
                <span class="kt-ops-file__icon"><i class="ti ti-photo-edit"></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__hint"><%= i18n.__('operationsContent.replaceImageHint') %></p>
            <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.__('operationsContent.arabic') %></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="intro-title-ar"><%= i18n.__('intros.titleAr') %></label>
              <input class="kt-ops-control" id="intro-title-ar" name="titleAr" value="<%= intro.titleTranslations?.ar || '' %>" dir="rtl" lang="ar"
                data-ops-script="arabic" placeholder="أدخل عنوان الصفحة الافتتاحية بالعربية" required>
              <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
            </div>
            <div class="kt-ops-field" data-ops-field>
              <label for="intro-description-ar"><%= i18n.__('intros.descriptionAr') %></label>
              <textarea class="kt-ops-control" id="intro-description-ar" name="descriptionAr" dir="rtl" lang="ar" data-ops-script="arabic"
                placeholder="اكتب وصف الصفحة الافتتاحية باللغة العربية" required><%= intro.descriptionTranslations?.ar || '' %></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.__('operationsContent.english') %></strong><span class="kt-ops-language-chip">EN · English</span></div>
            <div class="kt-ops-field" data-ops-field>
              <label for="intro-title-en"><%= i18n.__('intros.titleEn') %></label>
              <input class="kt-ops-control" id="intro-title-en" name="titleEn" value="<%= intro.titleTranslations?.en || '' %>" dir="ltr" lang="en"
                data-ops-script="latin" placeholder="Enter the intro page title in English" required>
              <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
            </div>
            <div class="kt-ops-field" data-ops-field>
              <label for="intro-description-en"><%= i18n.__('intros.descriptionEn') %></label>
              <textarea class="kt-ops-control" id="intro-description-en" name="descriptionEn" dir="ltr" lang="en" data-ops-script="latin"
                placeholder="Enter the intro page description in English" required><%= intro.descriptionTranslations?.en || '' %></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/intros"><%= 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') %>
