added translation

src/app/pages/items-list/items-list.component.html

@@ -12,36 +12,36 @@
 
   <div class="filters-bar">
     <mat-form-field appearance="outline" class="search-field">
-      <mat-label>Search items</mat-label>
+      <mat-label>{{ 'SEARCH_ITEMS' | translate }}</mat-label>
       <input 
         matInput 
         [(ngModel)]="searchQuery"
         (keyup.enter)="onSearch()"
-        placeholder="Search by name...">
+        [placeholder]="'SEARCH_PLACEHOLDER' | translate">
       <button mat-icon-button matSuffix (click)="onSearch()">
         <mat-icon>search</mat-icon>
       </button>
     </mat-form-field>
 
     <mat-form-field appearance="outline" class="filter-field">
-      <mat-label>Visibility</mat-label>
+      <mat-label>{{ 'VISIBILITY' | translate }}</mat-label>
       <mat-select [(ngModel)]="visibilityFilter" (selectionChange)="onFilterChange()">
-        <mat-option [value]="undefined">All</mat-option>
-        <mat-option [value]="true">Visible</mat-option>
-        <mat-option [value]="false">Hidden</mat-option>
+        <mat-option [value]="undefined">{{ 'ALL' | translate }}</mat-option>
+        <mat-option [value]="true">{{ 'VISIBLE' | translate }}</mat-option>
+        <mat-option [value]="false">{{ 'HIDDEN' | translate }}</mat-option>
       </mat-select>
     </mat-form-field>
 
     @if (selectedItems().size > 0) {
       <div class="bulk-actions">
-        <span class="selection-count">{{ selectedItems().size }} selected</span>
+        <span class="selection-count">{{ selectedItems().size }} {{ 'SELECTED' | translate }}</span>
         <button mat-raised-button (click)="bulkToggleVisibility(true)">
           <mat-icon>visibility</mat-icon>
-          Show
+          {{ 'SHOW' | translate }}
         </button>
         <button mat-raised-button (click)="bulkToggleVisibility(false)">
           <mat-icon>visibility_off</mat-icon>
-          Hide
+          {{ 'HIDE' | translate }}
         </button>
       </div>
     }
@@ -98,11 +98,11 @@
           
           <div class="item-details">
             <span class="price">{{ item.price }} {{ item.currency }}</span>
-            <span class="quantity">Qty: {{ item.quantity }}</span>
+            <span class="quantity">{{ 'QTY' | translate }}: {{ item.quantity }}</span>
           </div>
 
           <div class="item-meta">
-            <span class="priority">Priority: {{ item.priority }}</span>
+            <span class="priority">{{ 'PRIORITY' | translate }}: {{ item.priority }}</span>
             <mat-icon [class.visible]="item.visible" [class.hidden]="!item.visible">
               {{ item.visible ? 'visibility' : 'visibility_off' }}
             </mat-icon>
@@ -126,20 +126,20 @@
   @if (loading()) {
     <div class="loading-more">
       <mat-spinner diameter="40"></mat-spinner>
-      <span>Loading more items...</span>
+      <span>{{ 'LOADING_MORE' | translate }}</span>
     </div>
   }
 
   @if (!hasMore() && items().length > 0) {
     <div class="end-message">
-      No more items to load
+      {{ 'NO_MORE_ITEMS' | translate }}
     </div>
   }
 
   @if (!loading() && items().length === 0) {
     <div class="empty-state">
       <mat-icon>inventory_2</mat-icon>
-      <p>No items found</p>
+      <p>{{ 'NO_ITEMS_FOUND' | translate }}</p>
     </div>
   }