<%- include('../operationsContent/assets.ejs') %>
<main class="kt-ops" data-ops-page>
  <div class="kt-ops__stack">
    <%- include('../operationsContent/hero.ejs', {
      heading: i18n.__('common.show {{module}}', { module: i18n.__('intros.intro') }),
      description: i18n.__('operationsContent.detailsDescription'),
      icon: 'ti-device-mobile-message', count: 0, showCount: false,
      primaryUrl: '/dashboard/intros/edit/' + intro.id,
      primaryLabel: i18n.__('operationsContent.edit'), primaryIcon: 'ti-edit',
      backUrl: '/dashboard/intros'
    }) %>
    <section class="kt-ops-section">
      <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-photo"></i></span><div><h2><%= i18n.__('operationsContent.preview') %></h2><p><%= i18n.__('operationsContent.detailsDescription') %></p></div></header>
      <div class="kt-ops-section__body">
        <div class="kt-ops-form-grid">
          <div class="kt-ops-media" data-ops-media-wrap>
            <img src="<%= intro.image %>" alt="" data-ops-media>
            <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-details-grid">
            <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('operationsContent.createdAt') %></span><strong class="kt-ops-detail__value"><%= intro.createdAt ? moment(intro.createdAt).locale(lang).format('YYYY/MM/DD HH:mm') : i18n.__('operationsContent.noData') %></strong></div>
            <div class="kt-ops-detail kt-ops-detail--wide" dir="rtl" lang="ar"><span class="kt-ops-detail__label"><%= i18n.__('intros.titleAr') %></span><strong class="kt-ops-detail__value"><%= intro.titleTranslations?.ar || i18n.__('operationsContent.noData') %></strong></div>
            <div class="kt-ops-detail kt-ops-detail--wide" dir="ltr" lang="en"><span class="kt-ops-detail__label"><%= i18n.__('intros.titleEn') %></span><strong class="kt-ops-detail__value"><%= intro.titleTranslations?.en || i18n.__('operationsContent.noData') %></strong></div>
            <div class="kt-ops-detail kt-ops-detail--wide" dir="rtl" lang="ar"><span class="kt-ops-detail__label"><%= i18n.__('intros.descriptionAr') %></span><div class="kt-ops-content-block"><%= intro.descriptionTranslations?.ar || i18n.__('operationsContent.noData') %></div></div>
            <div class="kt-ops-detail kt-ops-detail--wide" dir="ltr" lang="en"><span class="kt-ops-detail__label"><%= i18n.__('intros.descriptionEn') %></span><div class="kt-ops-content-block"><%= intro.descriptionTranslations?.en || i18n.__('operationsContent.noData') %></div></div>
          </div>
        </div>
      </div>
    </section>
  </div>
</main>
<%- include('../operationsContent/scripts.ejs') %>
