<%
  const isArabic = lang !== 'en';
  const providerType = ['all', 'active', 'notActive', 'block'].includes(type)
    ? type
    : 'all';
  const providerItems = Array.isArray(providers) ? providers : [];
  const countItems = Array.isArray(counts) ? counts : [];
  const countValue = (className) => {
    const item = countItems.find((entry) => String(entry?.class || '') === className);
    return Math.max(0, Number(item?.value) || 0);
  };
  const blockedCount = countValue('blockedCount');
  const unblockedCount = countValue('unBlockedCount');
  const activeCount = countValue('activeCount');
  const inactiveCount = Math.max(0, unblockedCount - activeCount);
  const totalCount = unblockedCount + blockedCount;
  const statusCards = [
    {
      key: 'all',
      href: '/dashboard/providers/all',
      icon: 'ti-building-store',
      label: isArabic ? 'كل مقدمي الخدمات' : 'All providers',
      helper: isArabic ? 'سجل التوريد الكامل' : 'Complete supply directory',
      count: totalCount,
    },
    {
      key: 'active',
      href: '/dashboard/providers/active',
      icon: 'ti-shield-check',
      label: isArabic ? 'المفعلون' : 'Active',
      helper: isArabic ? 'وصول تشغيلي متاح' : 'Operational access enabled',
      count: activeCount,
    },
    {
      key: 'notActive',
      href: '/dashboard/providers/notActive',
      icon: 'ti-user-pause',
      label: isArabic ? 'غير المفعلين' : 'Inactive',
      helper: isArabic ? 'بانتظار التفعيل' : 'Waiting for activation',
      count: inactiveCount,
    },
    {
      key: 'block',
      href: '/dashboard/providers/block',
      icon: 'ti-shield-x',
      label: isArabic ? 'المحظورون' : 'Blocked',
      helper: isArabic ? 'وصول تشغيلي موقوف' : 'Operational access stopped',
      count: blockedCount,
    },
  ];
  const currentStatus = statusCards.find((card) => card.key === providerType)
    || statusCards[0];
%>

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

<section
  class="kt-providers-page"
  data-providers-console
  data-provider-status="<%= providerType %>"
  data-provider-filter-url="/dashboard/providers/filter"
  data-providers-csrf-token="<%= csrfToken %>"
  data-copy-refresh="<%= isArabic ? 'تحديث' : 'Refresh' %>"
  data-copy-refreshing="<%= isArabic ? 'جاري التحديث...' : 'Refreshing...' %>"
  data-copy-refresh-success="<%= isArabic ? 'تم تحديث قائمة مقدمي الخدمات' : 'Provider list updated' %>"
  data-copy-refresh-error="<%= isArabic ? 'تعذر تحديث قائمة مقدمي الخدمات' : 'Could not update provider list' %>"
  data-copy-action-error="<%= isArabic ? 'تعذر تنفيذ الإجراء' : 'The action could not be completed' %>"
  data-copy-search-empty="<%= isArabic ? 'لا توجد نتائج مطابقة للبحث' : 'No providers match this search' %>"
>
  <div
    data-providers-contract
    data-providers-csrf-token="<%= csrfToken %>"
    hidden
  ></div>

  <header class="kt-providers-hero">
    <div class="kt-providers-hero__identity">
      <span class="kt-providers-hero__icon" aria-hidden="true">
        <i class="ti ti-building-community"></i>
      </span>
      <div>
        <span class="kt-providers-hero__eyebrow">
          <%= isArabic ? 'عمليات شبكة التوريد' : 'Supply network operations' %>
        </span>
        <h1><%= isArabic ? 'مقدمي الخدمات' : 'Service providers' %></h1>
        <p>
          <%= isArabic
            ? 'إدارة حالة مقدمي الخدمات، بيانات التواصل، والوصول التشغيلي.'
            : 'Manage provider status, contact details, and operational access.' %>
        </p>
      </div>
    </div>

    <div class="kt-providers-hero__summary" data-provider-current-summary>
      <span class="kt-providers-hero__summary-icon" aria-hidden="true">
        <i class="ti <%= currentStatus.icon %>"></i>
      </span>
      <span>
        <small data-provider-current-label><%= currentStatus.label %></small>
        <strong data-provider-current-count><%= providerItems.length %></strong>
        <em><%= isArabic ? 'مقدم خدمة معروض الآن' : 'providers shown now' %></em>
      </span>
    </div>
  </header>

  <nav
    class="kt-providers-statuses"
    aria-label="<%= isArabic ? 'تصفية مقدمي الخدمات حسب الحالة' : 'Filter providers by status' %>"
    aria-busy="false"
    data-provider-status-navigation
  >
    <% statusCards.forEach((card) => { %>
      <a
        class="kt-provider-status kt-provider-status--<%= card.key %><%= providerType === card.key ? ' is-active' : '' %>"
        href="<%= card.href %>"
        data-provider-status-link="<%= card.key %>"
        data-provider-status-label="<%= card.label %>"
        <%- providerType === card.key ? 'aria-current="page"' : '' %>
      >
        <span class="kt-provider-status__icon" aria-hidden="true">
          <i class="ti <%= card.icon %>"></i>
        </span>
        <span class="kt-provider-status__copy">
          <strong><%= card.label %></strong>
          <small><%= card.helper %></small>
        </span>
        <b class="kt-provider-status__count" data-provider-status-count><%= card.count %></b>
      </a>
    <% }) %>
  </nav>

  <section class="kt-providers-console" aria-labelledby="providers-console-title">
    <header class="kt-providers-console__header">
      <div class="kt-providers-console__title">
        <span class="kt-providers-console__title-icon" aria-hidden="true">
          <i class="ti ti-address-book"></i>
        </span>
        <div>
          <h2 id="providers-console-title">
            <%= isArabic ? 'سجل مقدمي الخدمات' : 'Provider directory' %>
          </h2>
          <p>
            <%= isArabic
              ? 'هوية مقدم الخدمة، الوصول، والتشغيل في سجل واحد واضح.'
              : 'Provider identity, access, and operations in one clear record.' %>
          </p>
        </div>
      </div>

      <div class="kt-providers-toolbar" data-provider-toolbar>
        <form class="kt-providers-search" data-provider-search-form role="search">
          <i class="ti ti-search" aria-hidden="true"></i>
          <input
            type="search"
            name="name"
            autocomplete="off"
            placeholder="<%= isArabic ? 'ابحث باسم مقدم الخدمة' : 'Search provider name' %>"
            aria-label="<%= isArabic ? 'ابحث باسم مقدم الخدمة' : 'Search provider name' %>"
            data-provider-search-input
          >
          <button
            type="button"
            class="kt-providers-search__clear"
            aria-label="<%= isArabic ? 'مسح البحث' : 'Clear search' %>"
            data-provider-search-clear
            hidden
          >
            <i class="ti ti-x" aria-hidden="true"></i>
          </button>
        </form>

        <button
          type="button"
          class="kt-provider-button kt-provider-button--danger-soft"
          data-provider-bulk-delete
          hidden
        >
          <i class="ti ti-trash" aria-hidden="true"></i>
          <span><%= isArabic ? 'حذف المحدد' : 'Delete selected' %></span>
          <b data-provider-selected-count>0</b>
        </button>

        <button
          type="button"
          class="kt-provider-button kt-provider-button--refresh"
          data-provider-refresh
        >
          <i class="ti ti-refresh" aria-hidden="true" data-provider-refresh-icon></i>
          <span data-provider-refresh-label><%= isArabic ? 'تحديث' : 'Refresh' %></span>
        </button>
      </div>
    </header>

    <div class="kt-providers-console__body" data-provider-fragment>
      <%- include('./dataTable.ejs', { providers: providerItems, type: providerType }) %>
    </div>
  </section>

  <%- include('./listIncludes.ejs') %>
</section>

<script src="/admin/assets/js/pages/providers-contract.js?v=2.8.0"></script>
<script src="/admin/assets/js/pages/providers.js?v=2.8.0"></script>
