<%
  const socialsRowsLocale = typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar';
  const socialsRowsIsEnglish = socialsRowsLocale === 'en';
  const socialsRowsCopy = socialsRowsIsEnglish
    ? {
      select: 'Select',
      open: 'Open link',
      show: 'View',
      edit: 'Edit',
      remove: 'Delete',
      unnamed: 'Unnamed channel',
    }
    : {
      select: 'تحديد',
      open: 'فتح الرابط',
      show: 'عرض',
      edit: 'تعديل',
      remove: 'حذف',
      unnamed: 'وسيلة بدون اسم',
    };
%>

<% socials.forEach((item) => { %>
  <tr
    class="kt-socials-row"
    data-socials-row
    data-social-id="<%= item.socialMediaId %>"
  >
    <td class="kt-socials-table__select" data-socials-column="selection">
      <label
        class="kt-socials-checkbox"
        aria-label="<%= socialsRowsCopy.select %> <%= item.linkName || socialsRowsCopy.unnamed %>"
      >
        <input
          type="checkbox"
          value="<%= item.socialMediaId %>"
          data-socials-row-checkbox
          data-socials-checkbox
          aria-label="<%= socialsRowsCopy.select %> <%= item.linkName || socialsRowsCopy.unnamed %>"
        >
        <span aria-hidden="true"><i class="ti ti-check"></i></span>
      </label>
    </td>

    <td data-socials-column="channel">
      <div class="kt-socials-channel">
        <span class="kt-socials-channel__image">
          <img
            src="<%= item.linkImage %>"
            alt=""
            width="44"
            height="44"
            loading="lazy"
          >
        </span>
        <span class="kt-socials-channel__copy">
          <strong><%= item.linkName || socialsRowsCopy.unnamed %></strong>
          <small><%= socialsRowsIsEnglish ? 'Communication channel' : 'قناة تواصل' %></small>
        </span>
      </div>
    </td>

    <td data-socials-column="link">
      <a
        class="kt-socials-public-link"
        href="<%= item.linkUrl %>"
        target="_blank"
        rel="noopener noreferrer"
        title="<%= item.linkUrl %>"
      >
        <span class="kt-socials-public-link__icon" aria-hidden="true">
          <i class="ti ti-external-link"></i>
        </span>
        <span><%= item.linkUrl %></span>
        <small><%= socialsRowsCopy.open %></small>
      </a>
    </td>

    <td data-socials-column="date">
      <time class="kt-socials-date">
        <i class="ti ti-calendar-event" aria-hidden="true"></i>
        <span><%= item.timeAdd %></span>
      </time>
    </td>

    <td class="kt-socials-table__actions" data-socials-column="actions">
      <div class="kt-socials-row-actions">
        <a
          class="kt-socials-icon-button"
          href="/dashboard/socials/show/<%= item.socialMediaId %>"
          aria-label="<%= socialsRowsCopy.show %> <%= item.linkName || socialsRowsCopy.unnamed %>"
          title="<%= socialsRowsCopy.show %>"
        >
          <i class="ti ti-eye" aria-hidden="true"></i>
        </a>
        <a
          class="kt-socials-icon-button"
          href="/dashboard/socials/edit/<%= item.socialMediaId %>"
          aria-label="<%= socialsRowsCopy.edit %> <%= item.linkName || socialsRowsCopy.unnamed %>"
          title="<%= socialsRowsCopy.edit %>"
        >
          <i class="ti ti-edit" aria-hidden="true"></i>
        </a>
        <button
          class="kt-socials-icon-button kt-socials-icon-button--danger"
          type="button"
          data-socials-delete
          data-social-id="<%= item.socialMediaId %>"
          aria-label="<%= socialsRowsCopy.remove %> <%= item.linkName || socialsRowsCopy.unnamed %>"
          title="<%= socialsRowsCopy.remove %>"
        >
          <i class="ti ti-trash" aria-hidden="true"></i>
        </button>
      </div>
    </td>
  </tr>
<% }) %>
