syscom-master-admin-ui/src/app/features/localization/pages/translations-manager/translations-manager.html

<div class="grid grid-cols-12 gap-x-6 my-4">
  <div class="col-span-12">
    <app-data-table
      [columns]="columns()"
      [rows]="paginatedRows()"
      [actions]="actions()"
      [totalRecords]="totalRecords()"
      [pageIndex]="pageIndex()"
      [pageSize]="pageSize()"
      tableTitle="Translations Manager"
      [showSearch]="true"
      searchPlaceholder="Search key..."
      [searchDebounceTime]="300"
      [showFilterButton]="true"
      [filterActive]="showFilters()"
      [showAddButton]="true"
      buttonTitle="Add"
      [showImportExportButtons]="true"
      (addClicked)="onAddTranslationClicked()"
      (importClicked)="onImportCsvClicked()"
      (exportClicked)="onExportCsv()"
      (filterClicked)="onToggleFilters()"
      (searchChanged)="onSearchChanged($event)"
      (pageChanged)="onPageChanged($event)"
      (actionClicked)="onActionClick($event)"
    >
      <!-- Data Table Filter Toolbar Template -->
      <ng-template appDataTableToolbar>
        <form [formGroup]="filterForm" (ngSubmit)="applyFilters()" class="flex flex-wrap items-end gap-3 w-full">
          <!-- Module Filter Autocomplete with Floating Label -->
          <div class="w-64 min-w-[200px]">
            <app-autocomplete
              formControlName="module"
              inputId="translation-filter-module"
              variant="floating"
              size="sm"
              label="Module"
              placeholder="Search module..."
              [searchFn]="searchModuleFilters"
              [displayWith]="displayModuleFilter"
              [valueWith]="moduleFilterValue"
              [selectedItem]="selectedModuleFilter()"
              [minSearchLength]="0"
              [debounceTime]="100"
              [limit]="20"
              [clearable]="true"
              [hideValidation]="true"
              wrapperClass="!mb-0 w-full"
              (itemSelected)="onFilterModuleSelected($event)"
            />
          </div>

          <!-- Language Filter Autocomplete with Floating Label -->
          <div class="w-64 min-w-[200px]">
            <app-autocomplete
              formControlName="languageId"
              inputId="translation-filter-language"
              variant="floating"
              size="sm"
              label="Language"
              placeholder="Search language..."
              [searchFn]="searchLanguageFilters"
              [displayWith]="displayLanguageFilter"
              [valueWith]="languageFilterValue"
              [selectedItem]="selectedLanguageFilter()"
              [minSearchLength]="0"
              [debounceTime]="100"
              [limit]="20"
              [clearable]="true"
              [hideValidation]="true"
              wrapperClass="!mb-0 w-full"
              (itemSelected)="onFilterLanguageSelected($event)"
            />
          </div>

          <!-- Filter Actions -->
          <div class="flex items-center gap-2">
            <app-button
              action="custom"
              label="Apply"
              icon="ti ti-filter"
              variant="primary-full"
              type="submit"
              size="sm"
              className="!rounded-full shadow-sm !mb-0 min-h-8"
            />
            <app-button
              action="custom"
              label="Reset"
              icon="ti ti-refresh"
              variant="light"
              type="button"
              size="sm"
              className="!rounded-full shadow-sm !mb-0 min-h-8"
              (buttonClicked)="resetFilters()"
            />
          </div>
        </form>
      </ng-template>

      <!-- Custom Cell Template: Sr. No. -->
      <ng-template appDataTableCell="serialNumber" let-row let-value="value">
        <div class="text-center py-1">
          <span class="font-medium text-textmuted text-xs">{{ value }}</span>
        </div>
      </ng-template>

      <!-- Custom Cell Template: Key -->
      <ng-template appDataTableCell="key" let-row let-value="value">
        <div class="py-1">
          <div class="font-mono text-xs font-semibold text-primary break-all">
            {{ value }}
          </div>
        </div>
      </ng-template>

      <!-- Custom Cell Template: Module -->
      <ng-template appDataTableCell="module" let-value="value">
        <div class="py-1">
          <span class="badge bg-primary/10 text-primary font-medium px-2 py-1 rounded text-xs">
            {{ value || 'Common' }}
          </span>
        </div>
      </ng-template>

      <!-- Custom Cell Template: en-US (Display Text) -->
      <ng-template appDataTableCell="en-US" let-row>
        <div class="py-1">
          <span class="text-sm font-normal text-defaulttextcolor">
            {{ row.translations['en-US'] || '—' }}
          </span>
        </div>
      </ng-template>

      <!-- Custom Cell Template: ar-SA (Display Text) -->
      <ng-template appDataTableCell="ar-SA" let-row>
        <div class="py-1">
          <span dir="rtl" class="text-sm font-normal font-serif text-defaulttextcolor">
            {{ row.translations['ar-SA'] || '—' }}
          </span>
        </div>
      </ng-template>

      <!-- Custom Cell Template: hi-IN (Display Text) -->
      <ng-template appDataTableCell="hi-IN" let-row>
        <div class="py-1">
          <span class="text-sm font-normal text-defaulttextcolor">
            {{ row.translations['hi-IN'] || '—' }}
          </span>
        </div>
      </ng-template>

      <!-- Custom Cell Template: Override -->
      <ng-template appDataTableCell="overrideStatus" let-row let-value="value">
        <div class="text-center py-1">
          @if (value === '—' || !value || value === 'Global') {
            <span class="text-textmuted text-sm font-medium">—</span>
          } @else {
            <span class="badge bg-primary/10 text-primary border border-primary/20 font-semibold px-2 py-1 rounded">
              {{ value }}
            </span>
          }
        </div>
      </ng-template>
    </app-data-table>
  </div>
</div>

<!-- Add/Edit Translation Form Modal Component -->
<app-translation-form-modal
  [open]="modalOpen()"
  [mode]="modalMode()"
  [initialData]="selectedRow()"
  [saving]="saving()"
  (saved)="onTranslationFormSaved($event)"
  (closed)="onModalClosed()"
/>

<!-- Delete Confirm Dialog Component -->
<app-confirm-dialog
  title="Delete Translation Key"
  text="Do you really want to delete this translation key?"
  confirmButtonText="Delete"
  cancelButtonText="Cancel"
  (confirmed)="onDeleteConfirmed()"
  (cancelled)="onDeleteCancelled()"
/>