<%
  const exportMenuCopy = clientsLocale === 'ar'
    ? {
        trigger: 'تصدير',
        title: 'خيارات التصدير',
        helper: 'اختر صيغة الملف المطلوبة'
      }
    : {
        trigger: 'Export',
        title: 'Export options',
        helper: 'Choose the required file format'
      };
%>

<div class="kt-client-menu kt-client-export-menu" data-people-menu>
  <button
    class="kt-people-btn kt-people-btn--soft kt-client-menu__trigger"
    type="button"
    aria-haspopup="menu"
    aria-expanded="false"
    aria-controls="clients-export-menu"
    data-people-menu-trigger
  >
    <i class="ti ti-file-export" aria-hidden="true"></i>
    <span><%= exportMenuCopy.trigger %></span>
    <i class="ti ti-chevron-down kt-client-menu__chevron" aria-hidden="true"></i>
  </button>

  <div
    class="kt-client-menu__panel kt-client-export-menu__panel"
    id="clients-export-menu"
    role="menu"
    aria-label="<%= exportMenuCopy.title %>"
    data-people-menu-panel
    hidden
  >
    <header class="kt-client-menu__header">
      <strong><%= exportMenuCopy.title %></strong>
      <small><%= exportMenuCopy.helper %></small>
    </header>

    <button
      class="kt-client-menu__item"
      type="button"
      role="menuitem"
      data-people-export="pdf"
      data-people-export-title="<%= title %>"
    >
      <span class="kt-client-menu__icon" aria-hidden="true"><i class="ti ti-pdf"></i></span>
      <span>
        <strong><%= clientsCopy.pdf %></strong>
        <small>PDF</small>
      </span>
    </button>

    <button
      class="kt-client-menu__item"
      type="button"
      role="menuitem"
      data-people-export="excel"
      data-people-export-title="<%= title %>"
    >
      <span class="kt-client-menu__icon" aria-hidden="true"><i class="ti ti-file-spreadsheet"></i></span>
      <span>
        <strong><%= clientsCopy.excel %></strong>
        <small>Excel</small>
      </span>
    </button>

    <button
      class="kt-client-menu__item"
      type="button"
      role="menuitem"
      data-people-export="all"
      data-people-export-title="<%= title %>"
      data-people-export-route="<%= JSON.stringify(exportData) %>"
      data-default-label="<%= clientsCopy.excelAll %>"
      data-loading-label="<%= clientsCopy.exporting %>"
    >
      <span class="kt-client-menu__icon" aria-hidden="true"><i class="ti ti-files"></i></span>
      <span>
        <strong data-people-button-label><%= clientsCopy.excelAll %></strong>
        <small><%= clientsLocale === 'ar' ? 'كامل السجل' : 'Complete register' %></small>
      </span>
    </button>
  </div>
</div>
