<%
  const isArabic = lang !== 'en';
%>

<% providers.forEach((item) => {
  const itemId = String(item?.id || item?._id || '');
  const itemName = String(item?.name || (isArabic ? 'مقدم خدمة' : 'Service provider'));
  const itemAvatar = String(item?.avatar || '');
  const fullPhone = String(item?.fullPhone || `${item?.countryCode || ''}${item?.phone || ''}`).trim();
  const itemEmail = String(item?.email || '');
  const isBlocked = item?.status === 'block';
  const isActive = item?.status === 'active' && Boolean(item?.active);
  const isAvailable = Boolean(item?.isAvailable);
  const localizedText = (value) => {
    if (typeof value === 'string') return value;
    if (!value || typeof value !== 'object') return '';
    return String(value[isArabic ? 'ar' : 'en'] || value[isArabic ? 'en' : 'ar'] || '');
  };
  const cityName = localizedText(item?.city?.name);
  const locationTitle = localizedText(item?.location?.title)
    || localizedText(item?.location?.description);
  const operationalLocation = cityName || locationTitle;
  const rating = Number(item?.rating) || 0;
  const balance = Number(item?.balance) || 0;
  const initials = itemName
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((part) => part.charAt(0))
    .join('')
    .toUpperCase() || 'KT';
  const providerCode = itemId ? itemId.slice(-6).toUpperCase() : '—';
%>
  <article
    class="kt-provider-card<%= isBlocked ? ' kt-provider-card--blocked' : '' %>"
    data-provider-card
    data-provider-id="<%= itemId %>"
    data-provider-name="<%= itemName %>"
    data-provider-status="<%= item?.status || '' %>"
    data-provider-active="<%= isActive ? 'true' : 'false' %>"
  >
    <label class="kt-provider-check kt-provider-card__select">
      <input
        type="checkbox"
        value="<%= itemId %>"
        aria-label="<%= isArabic ? `تحديد مقدم الخدمة ${itemName}` : `Select provider ${itemName}` %>"
        data-provider-select
      >
      <span aria-hidden="true"><i class="ti ti-check"></i></span>
    </label>

    <section class="kt-provider-card__identity">
      <div class="kt-provider-avatar" data-provider-avatar-shell>
        <% if (itemAvatar) { %>
          <img
            src="<%= itemAvatar %>"
            alt=""
            loading="lazy"
            data-provider-avatar
          >
        <% } %>
        <span data-provider-avatar-fallback><%= initials %></span>
        <i aria-hidden="true"></i>
      </div>
      <div class="kt-provider-card__identity-copy">
        <span class="kt-provider-card__eyebrow">
          <i class="ti ti-building-store" aria-hidden="true"></i>
          <%= isArabic ? 'مقدم خدمة معتمد' : 'Approved provider' %>
        </span>
        <h3 dir="auto"><%= itemName %></h3>
        <span class="kt-provider-card__code">
          <%= isArabic ? 'معرّف الحساب' : 'Account ID' %>
          <b dir="ltr">#<%= providerCode %></b>
        </span>
      </div>
    </section>

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

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

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

      <% if (operationalLocation) { %>
        <span class="kt-provider-card__meta">
          <i class="ti ti-map-pin" aria-hidden="true"></i>
          <strong><%= operationalLocation %></strong>
        </span>
      <% } %>

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

    <section class="kt-provider-card__access">
      <span class="kt-provider-card__section-label">
        <i class="ti ti-lock-access" aria-hidden="true"></i>
        <%= isArabic ? 'الوصول والتشغيل' : 'Access and operations' %>
      </span>
      <div class="kt-provider-card__chips">
        <span class="kt-provider-chip <%= isBlocked ? 'kt-provider-chip--danger' : 'kt-provider-chip--success' %>">
          <i class="ti <%= isBlocked ? 'ti-shield-x' : 'ti-shield-check' %>" aria-hidden="true"></i>
          <%= isBlocked
            ? (isArabic ? 'الحساب محظور' : 'Account blocked')
            : (isArabic ? 'الحساب غير محظور' : 'Account unblocked') %>
        </span>
        <span class="kt-provider-chip <%= isActive ? 'kt-provider-chip--success' : 'kt-provider-chip--warning' %>">
          <i class="ti <%= isActive ? 'ti-bolt' : 'ti-clock-pause' %>" aria-hidden="true"></i>
          <%= isActive
            ? (isArabic ? 'الوصول مفعل' : 'Access enabled')
            : (isArabic ? 'الوصول غير مفعل' : 'Access inactive') %>
        </span>
        <span class="kt-provider-chip <%= isAvailable ? 'kt-provider-chip--primary' : 'kt-provider-chip--muted' %>">
          <i class="ti <%= isAvailable ? 'ti-briefcase' : 'ti-briefcase-off' %>" aria-hidden="true"></i>
          <%= isAvailable
            ? (isArabic ? 'متاح للعمل' : 'Available')
            : (isArabic ? 'غير متاح للعمل' : 'Unavailable') %>
        </span>
      </div>
      <span class="kt-provider-card__date">
        <i class="ti ti-calendar-event" aria-hidden="true"></i>
        <span>
          <small><%= isArabic ? 'تاريخ الانضمام' : 'Joined' %></small>
          <time datetime="<%= item?.createdAt ? new Date(item.createdAt).toISOString() : '' %>">
            <%= item?.createdAt
              ? moment(item.createdAt).locale(lang).format('YYYY/MM/DD')
              : '—' %>
          </time>
        </span>
      </span>
    </section>

    <section class="kt-provider-card__operations" aria-label="<%= isArabic ? 'بيانات التشغيل' : 'Operational data' %>">
      <a
        class="kt-provider-metric"
        href="/dashboard/providers/ratings/<%= itemId %>"
      >
        <span class="kt-provider-metric__icon kt-provider-metric__icon--rating" aria-hidden="true">
          <i class="ti ti-star-filled"></i>
        </span>
        <span>
          <small><%= isArabic ? 'التقييم' : 'Rating' %></small>
          <strong dir="ltr"><%= rating.toFixed(1) %> / 5</strong>
        </span>
      </a>
      <span class="kt-provider-metric">
        <span class="kt-provider-metric__icon" aria-hidden="true">
          <i class="ti ti-wallet"></i>
        </span>
        <span>
          <small><%= isArabic ? 'الرصيد' : 'Balance' %></small>
          <strong dir="ltr"><%= balance.toLocaleString(isArabic ? 'ar-SA' : 'en-US') %> ﷼</strong>
        </span>
      </span>
    </section>

    <footer class="kt-provider-card__footer">
      <div class="kt-provider-card__actions" data-provider-action-cluster>
        <a
          class="kt-provider-action kt-provider-action--view"
          href="/dashboard/providers/show/<%= itemId %>"
        >
          <i class="ti ti-eye" aria-hidden="true"></i>
          <span><%= isArabic ? 'عرض' : 'View' %></span>
        </a>
        <a
          class="kt-provider-action kt-provider-action--edit"
          href="/dashboard/providers/edit/<%= itemId %>"
        >
          <i class="ti ti-pencil" aria-hidden="true"></i>
          <span><%= isArabic ? 'تعديل' : 'Edit' %></span>
        </a>

        <% if (!isBlocked) { %>
          <button
            type="button"
            class="kt-provider-action kt-provider-action--access"
            data-provider-action="activation"
            data-provider-id="<%= itemId %>"
            data-provider-name="<%= itemName %>"
            data-provider-current-active="<%= isActive ? 'true' : 'false' %>"
            data-provider-url="/dashboard/providers/activateDeactivate?id=<%= itemId %>"
          >
            <i class="ti <%= isActive ? 'ti-player-pause' : 'ti-player-play' %>" aria-hidden="true"></i>
            <i class="ti ti-loader-2 kt-provider-action__spinner" aria-hidden="true"></i>
            <span><%= isActive ? (isArabic ? 'تعطيل' : 'Deactivate') : (isArabic ? 'تفعيل' : 'Activate') %></span>
          </button>
        <% } %>

        <button
          type="button"
          class="kt-provider-action <%= isBlocked ? 'kt-provider-action--unblock' : 'kt-provider-action--block' %>"
          data-provider-action="block"
          data-provider-id="<%= itemId %>"
          data-provider-name="<%= itemName %>"
          data-provider-current-status="<%= item?.status || '' %>"
          data-provider-url="/dashboard/providers/blockUnBlock?id=<%= itemId %>&status=<%= item?.status || '' %>"
        >
          <i class="ti <%= isBlocked ? 'ti-lock-open' : 'ti-user-cancel' %>" aria-hidden="true"></i>
          <i class="ti ti-loader-2 kt-provider-action__spinner" aria-hidden="true"></i>
          <span><%= isBlocked ? (isArabic ? 'فك الحظر' : 'Unblock') : (isArabic ? 'حظر' : 'Block') %></span>
        </button>

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

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