<%
  const isArabic = lang !== 'en';
  const statusCopy = {
    wait: {
      label: isArabic ? 'قيد الانتظار' : 'Pending',
      helper: isArabic ? 'يحتاج إلى مراجعة' : 'Needs review',
      icon: 'ti-clock-hour-4',
    },
    accept: {
      label: isArabic ? 'مقبول' : 'Accepted',
      helper: isArabic ? 'تمت الموافقة' : 'Approved',
      icon: 'ti-circle-check',
    },
    reject: {
      label: isArabic ? 'مرفوض' : 'Rejected',
      helper: isArabic ? 'تم إنهاء الطلب' : 'Request declined',
      icon: 'ti-circle-x',
    },
  };
%>

<% providersMeta.forEach((item) => {
  const itemId = String(item?._id || item?.id || '');
  const itemName = String(item?.name || (isArabic ? 'مقدم خدمة' : 'Service provider'));
  const itemEmail = String(item?.email || '');
  const countryCode = String(item?.countryCode || '');
  const phone = String(item?.phone || '');
  const fullPhone = `${countryCode}${phone}`.trim();
  const approvalStatus = ['wait', 'accept', 'reject'].includes(item?.approvalStatus)
    ? item.approvalStatus
    : 'wait';
  const state = statusCopy[approvalStatus];
  const initials = itemName
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((part) => part.charAt(0))
    .join('')
    .toUpperCase() || 'KT';
  const requestCode = itemId ? itemId.slice(-6).toUpperCase() : '—';
%>
  <article
    class="kt-join-card kt-join-card--<%= approvalStatus %>"
    data-join-card
    data-join-id="<%= itemId %>"
    data-join-status="<%= approvalStatus %>"
  >
    <label class="kt-join-check kt-join-card__select">
      <input
        type="checkbox"
        value="<%= itemId %>"
        aria-label="<%= isArabic ? `تحديد طلب ${itemName}` : `Select ${itemName}'s request` %>"
        data-join-select
      >
      <span aria-hidden="true"><i class="ti ti-check"></i></span>
    </label>

    <div class="kt-join-card__identity">
      <span class="kt-join-avatar" aria-hidden="true"><%= initials %></span>
      <div class="kt-join-card__identity-copy">
        <span class="kt-join-card__eyebrow">
          <i class="ti ti-building-store" aria-hidden="true"></i>
          <%= isArabic ? 'طلب مقدم خدمة' : 'Provider application' %>
        </span>
        <h3><%= itemName %></h3>
        <span class="kt-join-card__request-id">
          <%= isArabic ? 'رقم الطلب' : 'Request' %>
          <b dir="ltr">#<%= requestCode %></b>
        </span>
      </div>
    </div>

    <div class="kt-join-card__contact">
      <span class="kt-join-card__section-label">
        <i class="ti ti-address-book" aria-hidden="true"></i>
        <%= isArabic ? 'بيانات التواصل' : 'Contact details' %>
      </span>

      <% if (fullPhone) { %>
        <span class="kt-join-card__meta">
          <i class="ti ti-phone" aria-hidden="true"></i>
          <strong dir="ltr"><%= fullPhone %></strong>
        </span>
      <% } %>

      <% if (itemEmail) { %>
        <span class="kt-join-card__meta">
          <i class="ti ti-mail" aria-hidden="true"></i>
          <strong dir="ltr"><%= itemEmail %></strong>
        </span>
      <% } %>

      <% if (!fullPhone && !itemEmail) { %>
        <span class="kt-join-card__meta kt-join-card__meta--muted">
          <i class="ti ti-info-circle" aria-hidden="true"></i>
          <strong><%= isArabic ? 'لا توجد بيانات تواصل إضافية' : 'No additional contact details' %></strong>
        </span>
      <% } %>
    </div>

    <div class="kt-join-card__decision">
      <span class="kt-join-card__section-label">
        <i class="ti ti-gavel" aria-hidden="true"></i>
        <%= isArabic ? 'حالة المراجعة' : 'Review status' %>
      </span>
      <span class="kt-join-state kt-join-state--<%= approvalStatus %>">
        <i class="ti <%= state.icon %>" aria-hidden="true"></i>
        <span>
          <strong><%= state.label %></strong>
          <small><%= state.helper %></small>
        </span>
      </span>
      <span class="kt-join-card__date">
        <i class="ti ti-calendar-event" aria-hidden="true"></i>
        <span>
          <small><%= isArabic ? 'تاريخ الطلب' : 'Submitted' %></small>
          <time datetime="<%= item?.createdAt ? new Date(item.createdAt).toISOString() : '' %>">
            <%= item?.createdAt
              ? moment(item.createdAt).locale(lang).format('YYYY/MM/DD')
              : '—' %>
          </time>
        </span>
      </span>
    </div>

    <div class="kt-join-card__actions" data-join-action-cluster>
      <a
        class="kt-join-action kt-join-action--view"
        href="/dashboard/providersMeta/show/<%= itemId %>"
      >
        <i class="ti ti-eye" aria-hidden="true"></i>
        <span><%= isArabic ? 'عرض' : 'View' %></span>
      </a>

      <% if (approvalStatus === 'wait') { %>
        <button
          type="button"
          class="kt-join-action kt-join-action--accept"
          data-join-action="accept"
          data-join-id="<%= itemId %>"
          data-join-name="<%= itemName %>"
          data-join-url="/dashboard/providersMeta/action/<%= itemId %>?action=accept"
        >
          <i class="ti ti-check" aria-hidden="true"></i>
          <i class="ti ti-loader-2 kt-join-action__spinner" aria-hidden="true"></i>
          <span><%= isArabic ? 'قبول' : 'Accept' %></span>
        </button>

        <button
          type="button"
          class="kt-join-action kt-join-action--reject"
          data-join-action="reject"
          data-join-id="<%= itemId %>"
          data-join-name="<%= itemName %>"
          data-join-url="/dashboard/providersMeta/action/<%= itemId %>?action=reject"
        >
          <i class="ti ti-x" aria-hidden="true"></i>
          <i class="ti ti-loader-2 kt-join-action__spinner" aria-hidden="true"></i>
          <span><%= isArabic ? 'رفض' : 'Reject' %></span>
        </button>
      <% } %>

      <span class="kt-join-card__action-divider" aria-hidden="true"></span>

      <button
        type="button"
        class="kt-join-action kt-join-action--delete"
        data-join-action="delete"
        data-join-id="<%= itemId %>"
        data-join-name="<%= itemName %>"
        data-join-url="/dashboard/providersMeta/delete"
      >
        <i class="ti ti-trash" aria-hidden="true"></i>
        <i class="ti ti-loader-2 kt-join-action__spinner" aria-hidden="true"></i>
        <span><%= isArabic ? 'حذف' : 'Delete' %></span>
      </button>
    </div>
  </article>
<% }) %>
