<%
  const socialsTableLocaleCandidate = typeof lang === 'string'
    ? lang
    : (user && typeof user.lang === 'string' ? user.lang : 'ar');
  const socialsTableLocale = String(socialsTableLocaleCandidate).toLowerCase().startsWith('en') ? 'en' : 'ar';
  const socialsTableIsEnglish = socialsTableLocale === 'en';
  const socialsTableItems = Array.isArray(socials) ? socials : [];
  const socialsTableCopy = socialsTableIsEnglish
    ? {
      selectAll: 'Select all channels',
      channel: 'Channel',
      publicLink: 'Public link',
      date: 'Added on',
      actions: 'Actions',
      emptyTitle: 'No social channels yet',
      emptyDescription: 'Add the first channel to make its public link available to users.',
      emptyAction: 'Add channel',
      total: 'Total channels',
      helper: 'All configured communication channels',
    }
    : {
      selectAll: 'تحديد كل وسائل التواصل',
      channel: 'وسيلة التواصل',
      publicLink: 'الرابط العام',
      date: 'تاريخ الإضافة',
      actions: 'التحكم',
      emptyTitle: 'لا توجد وسائل تواصل بعد',
      emptyDescription: 'أضف أول وسيلة تواصل لإتاحة رابطها للمستخدمين.',
      emptyAction: 'إضافة وسيلة',
      total: 'إجمالي الوسائل',
      helper: 'كل قنوات التواصل المسجلة',
    };
%>

<div class="kt-socials-table-fragment" data-socials-table-fragment>
  <% if (!socialsTableItems.length) { %>
    <div class="kt-socials-empty" data-socials-empty>
      <span class="kt-socials-empty__icon" aria-hidden="true">
        <i class="ti ti-brand-hipchat"></i>
      </span>
      <h3><%= socialsTableCopy.emptyTitle %></h3>
      <p><%= socialsTableCopy.emptyDescription %></p>
      <a class="kt-socials-button kt-socials-button--primary" href="/dashboard/socials/create">
        <i class="ti ti-plus" aria-hidden="true"></i>
        <span><%= socialsTableCopy.emptyAction %></span>
      </a>
    </div>
  <% } else { %>
    <div class="kt-socials-table-shell">
      <table class="kt-socials-table">
        <thead>
          <tr>
            <th class="kt-socials-table__select" data-socials-column="selection">
              <label class="kt-socials-checkbox" aria-label="<%= socialsTableCopy.selectAll %>">
                <input
                  type="checkbox"
                  data-socials-select-all
                  data-socials-checkbox
                  aria-label="<%= socialsTableCopy.selectAll %>"
                >
                <span aria-hidden="true"><i class="ti ti-check"></i></span>
              </label>
            </th>
            <th data-socials-column="channel"><%= socialsTableCopy.channel %></th>
            <th data-socials-column="link"><%= socialsTableCopy.publicLink %></th>
            <th data-socials-column="date"><%= socialsTableCopy.date %></th>
            <th class="kt-socials-table__actions" data-socials-column="actions">
              <span class="visually-hidden"><%= socialsTableCopy.actions %></span>
            </th>
          </tr>
        </thead>
        <tbody>
          <%- include('./tds.ejs', {
            socials: socialsTableItems,
            lang: socialsTableLocale,
            i18n
          }) %>
        </tbody>
      </table>
    </div>

    <footer class="kt-socials-table-footer">
      <span>
        <strong><%= socialsTableCopy.total %></strong>
        <b data-socials-footer-count><%= socialsTableItems.length %></b>
      </span>
      <small><%= socialsTableCopy.helper %></small>
    </footer>
  <% } %>
</div>
