<%- 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.__('sliders.slider') }),
      description: i18n.__('operationsContent.detailsDescription'),
      icon: 'ti-layout-carousel',
      count: 0,
      showCount: false,
      primaryUrl: '/dashboard/sliders/edit/' + slider.sliderId,
      primaryLabel: i18n.__('operationsContent.edit'),
      primaryIcon: 'ti-edit',
      backUrl: '/dashboard/sliders'
    }) %>
    <section class="kt-ops-section">
      <header class="kt-ops-section__header">
        <span class="kt-ops-section-icon" aria-hidden="true"><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="<%= slider.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.status') %></span>
              <span class="kt-ops-status <%= slider.isActive ? 'kt-ops-status--success' : 'kt-ops-status--warning' %>">
                <%= i18n.__(slider.isActive ? 'operationsContent.active' : 'operationsContent.inactive') %>
              </span>
            </div>
            <div class="kt-ops-detail">
              <span class="kt-ops-detail__label"><%= i18n.__('operationsContent.createdAt') %></span>
              <strong class="kt-ops-detail__value"><%= slider.createdAt || 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.__('sliders.descriptionAr') %></span>
              <div class="kt-ops-content-block"><%= slider.description?.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.__('sliders.descriptionEn') %></span>
              <div class="kt-ops-content-block"><%= slider.description?.en || i18n.__('operationsContent.noData') %></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</main>
<%- include('../operationsContent/scripts.ejs') %>
