<%
  const socialsLocaleCandidate = typeof lang === 'string'
    ? lang
    : (user && typeof user.lang === 'string' ? user.lang : 'ar');
  const socialsLocale = String(socialsLocaleCandidate).toLowerCase().startsWith('en') ? 'en' : 'ar';
  const socialsIsEnglish = socialsLocale === 'en';
  const socialsItems = Array.isArray(socials) ? socials : [];
  const socialsCopy = socialsIsEnglish
    ? {
      eyebrow: 'Content management',
      title: 'Social channels',
      subtitle: 'Manage the communication links and channels visible to users.',
      countLabel: 'Published channels',
      countHelper: 'Available in the application',
      listTitle: 'Channel directory',
      listDescription: 'Review each channel, its public link, and publishing date.',
      selectionHint: 'Multi-select',
      selectionContext: 'Selection mode is active',
      add: 'Add channel',
      refresh: 'Refresh',
      refreshing: 'Refreshing...',
      refreshSuccess: 'List refreshed',
      refreshFailure: 'Could not refresh list',
      bulkDelete: 'Delete selected',
      deleting: 'Deleting...',
      singleDeleteTitle: 'Delete this channel?',
      singleDeleteDescription: 'This channel will be removed from the list. This action cannot be undone.',
      singleDeleteConfirm: 'Delete',
      bulkDeleteTitle: 'Delete selected channels?',
      bulkDeleteDescription: '{count} channels will be removed from the list. This action cannot be undone.',
      cancel: 'Cancel',
      deleteSuccess: 'The selected channel was deleted',
      deleteFailure: 'Could not delete the selected channel.',
    }
    : {
      eyebrow: 'إدارة المحتوى',
      title: 'وسائل التواصل',
      subtitle: 'إدارة روابط وقنوات التواصل الظاهرة للمستخدمين.',
      countLabel: 'القنوات المنشورة',
      countHelper: 'متاحة داخل التطبيق',
      listTitle: 'دليل القنوات',
      listDescription: 'راجع كل قناة ورابطها العام وتاريخ إضافتها.',
      selectionHint: 'تحديد متعدد',
      selectionContext: 'وضع التحديد نشط',
      add: 'إضافة',
      refresh: 'تحديث',
      refreshing: 'جاري التحديث...',
      refreshSuccess: 'تم تحديث القائمة',
      refreshFailure: 'تعذر تحديث القائمة',
      bulkDelete: 'حذف المحدد',
      deleting: 'جاري الحذف...',
      singleDeleteTitle: 'حذف وسيلة التواصل؟',
      singleDeleteDescription: 'سيتم حذف وسيلة التواصل من القائمة. لا يمكن التراجع عن هذه العملية.',
      singleDeleteConfirm: 'حذف',
      bulkDeleteTitle: 'حذف وسائل التواصل المحددة؟',
      bulkDeleteDescription: 'سيتم حذف {count} وسائل تواصل من القائمة. لا يمكن التراجع عن هذه العملية.',
      cancel: 'إلغاء',
      deleteSuccess: 'تم حذف وسيلة التواصل',
      deleteFailure: 'تعذر حذف وسيلة التواصل المحددة.',
    };
%>

<link rel="stylesheet" href="/admin/assets/css/pages/socials.css?v=2.6.2">

<section
  class="kt-socials-page kt-socials-page--list"
  dir="<%= socialsIsEnglish ? 'ltr' : 'rtl' %>"
  data-socials-page
  data-socials-refresh-url="<%= filterData && filterData.url ? filterData.url : '/dashboard/socials?type=filter' %>"
  data-socials-delete-url="/dashboard/socials/delete"
  data-socials-csrf-token="<%= typeof csrfToken === 'string' ? csrfToken : '' %>"
  data-socials-refresh-success="<%= socialsCopy.refreshSuccess %>"
  data-socials-refresh-failure="<%= socialsCopy.refreshFailure %>"
  data-socials-delete-success="<%= socialsCopy.deleteSuccess %>"
  data-socials-delete-failure="<%= socialsCopy.deleteFailure %>"
>
  <div class="kt-socials-container">
    <header class="kt-socials-hero" data-socials-reveal>
      <div class="kt-socials-hero__identity">
        <span class="kt-socials-hero__mark" aria-hidden="true">
          <i class="ti ti-share-3"></i>
        </span>
        <div class="kt-socials-hero__copy">
          <span class="kt-socials-hero__eyebrow"><%= socialsCopy.eyebrow %></span>
          <h1><%= socialsCopy.title %></h1>
          <p><%= socialsCopy.subtitle %></p>
        </div>
      </div>

      <div class="kt-socials-hero__metric" aria-label="<%= socialsCopy.countLabel %>">
        <span class="kt-socials-hero__metric-icon" aria-hidden="true">
          <i class="ti ti-broadcast"></i>
        </span>
        <span class="kt-socials-hero__metric-copy">
          <small><%= socialsCopy.countLabel %></small>
          <strong><%= socialsItems.length %></strong>
          <span><%= socialsCopy.countHelper %></span>
        </span>
      </div>
    </header>

    <section class="kt-socials-resource" data-socials-resource data-socials-reveal>
      <div class="kt-socials-toolbar" data-socials-toolbar>
        <div class="kt-socials-toolbar__context">
          <div class="kt-socials-toolbar__summary" data-socials-default-context>
            <span class="kt-socials-toolbar__icon" aria-hidden="true">
              <i class="ti ti-address-book"></i>
            </span>
            <div>
              <h2><%= socialsCopy.listTitle %></h2>
              <p><%= socialsCopy.listDescription %></p>
            </div>
          </div>

          <div class="kt-socials-selection-context" data-socials-selection-context aria-live="polite">
            <span aria-hidden="true"><i class="ti ti-checks"></i></span>
            <strong><%= socialsCopy.selectionContext %></strong>
          </div>
        </div>

        <div class="kt-socials-toolbar__actions">
          <a class="kt-socials-button kt-socials-button--primary" href="/dashboard/socials/create" data-socials-add>
            <i class="ti ti-plus" aria-hidden="true"></i>
            <span><%= socialsCopy.add %></span>
          </a>

          <div class="kt-socials-action-slot">
            <span class="kt-socials-selection-hint" data-socials-default-action>
              <i class="ti ti-checkbox" aria-hidden="true"></i>
              <span><%= socialsCopy.selectionHint %></span>
            </span>
            <button class="kt-socials-bulk-delete" type="button" data-socials-bulk-delete hidden>
              <i class="ti ti-trash" aria-hidden="true"></i>
              <span><%= socialsCopy.bulkDelete %></span>
              <span class="kt-socials-selection-count" data-socials-selection-count aria-hidden="true">0</span>
            </button>
          </div>

          <button
            class="kt-socials-button kt-socials-button--secondary kt-socials-refresh"
            type="button"
            data-socials-refresh
            data-socials-default-label="<%= socialsCopy.refresh %>"
            data-socials-loading-label="<%= socialsCopy.refreshing %>"
            aria-controls="socials-table-region"
          >
            <span class="kt-socials-button__icon" aria-hidden="true">
              <i class="ti ti-refresh" data-socials-refresh-icon></i>
            </span>
            <span data-socials-refresh-label><%= socialsCopy.refresh %></span>
          </button>
        </div>
      </div>

      <div class="kt-socials-progress" data-socials-refresh-progress hidden aria-hidden="true">
        <span></span>
      </div>

      <div
        class="kt-socials-table-region"
        id="socials-table-region"
        data-socials-table-region
        aria-live="polite"
      >
        <%- include('./dataTable.ejs', {
          socials: socialsItems,
          lang: socialsLocale,
          i18n
        }) %>
      </div>
    </section>
  </div>

  <div
    class="kt-socials-delete-modal"
    data-socials-delete-modal
    data-socials-single-title="<%= socialsCopy.singleDeleteTitle %>"
    data-socials-single-description="<%= socialsCopy.singleDeleteDescription %>"
    data-socials-single-confirm="<%= socialsCopy.singleDeleteConfirm %>"
    data-socials-bulk-title="<%= socialsCopy.bulkDeleteTitle %>"
    data-socials-bulk-description="<%= socialsCopy.bulkDeleteDescription %>"
    data-socials-bulk-confirm="<%= socialsCopy.bulkDelete %>"
    role="alertdialog"
    aria-modal="true"
    aria-labelledby="socials-delete-title"
    aria-describedby="socials-delete-description"
    hidden
  >
    <div class="kt-socials-delete-modal__dialog" data-socials-delete-dialog>
      <span class="kt-socials-delete-modal__icon" aria-hidden="true">
        <i class="ti ti-trash"></i>
      </span>
      <div class="kt-socials-delete-modal__copy">
        <h2 id="socials-delete-title" data-socials-delete-title><%= socialsCopy.singleDeleteTitle %></h2>
        <p id="socials-delete-description" data-socials-delete-description>
          <%= socialsCopy.singleDeleteDescription %>
        </p>
      </div>
      <div class="kt-socials-delete-modal__actions">
        <button class="kt-socials-button kt-socials-button--secondary" type="button" data-socials-delete-cancel>
          <%= socialsCopy.cancel %>
        </button>
        <button
          class="kt-socials-button kt-socials-button--danger"
          type="button"
          data-socials-delete-confirm
          data-socials-default-label="<%= socialsCopy.singleDeleteConfirm %>"
          data-socials-loading-label="<%= socialsCopy.deleting %>"
        >
          <i class="ti ti-trash" data-socials-delete-confirm-icon aria-hidden="true"></i>
          <i class="ti ti-loader-2 kt-socials-spinner" data-socials-delete-confirm-spinner aria-hidden="true" hidden></i>
          <span data-socials-delete-confirm-label><%= socialsCopy.singleDeleteConfirm %></span>
        </button>
      </div>
    </div>
  </div>
</section>

<%- include('./includes.ejs') %>
