Add number of results

index.html

@@ -148,7 +148,7 @@
         <button class="negative-mode-toggle" @click="toggleDarkMode">{{ darkMode ? 'عادی' : 'نگاتیو' }}</button>
         <div class="options">
             <fieldset style="border: none; padding: 0; margin: 0;">
-                <label><input type="radio" v-model="posterMode" :value="false" /> لوگو</label>
+                <label><input type="radio" v-model="posterMode" :value="false" /> لوگوها</label>
                 &nbsp;
                 <label><input type="radio" v-model="posterMode" :value="true" /> پوسترها</label>
             </fieldset>
@@ -181,7 +181,8 @@
                 </select>
             </label>
         </div>
-
+<!-- نمایش تعداد نتایج و تعداد کل فیلم‌ها --> 
+        <p>نمایش {{ filteredItems.length }} از {{ totalItems }} عنوان</p>
         <div v-if="filteredItems.length > 0" class="results-grid">
             <div class="item-card" v-for="(item, index) in filteredItems" :key="index">
                 <a :href="getImageLink(item)" target="_blank"><img :src="getImageUrl(item)" :alt="item.filmLabel"
@@ -267,7 +268,9 @@
         const selectedDesigner = ref('');
 
         const items = ref([]);
-        getAllItems().then(result => items.value = result);
+        const totalItems = ref(0); // متغیر جدید برای نگهداری تعداد کل فیلم‌ها 
+        getAllItems().then(result => { items.value = result; totalItems.value = result.length; // تنظیم تعداد کل فیلم‌ها });
+       // getAllItems().then(result => items.value = result);
 
         const similarCharsMapping = {
             'ط': '[طظ]', 'ظ': '[طظ]', 'ب': '[بپتثنی]', 'پ': '[بپتثنی]',
@@ -368,7 +371,7 @@
         const getImdbLink = imdbID => `https://www.imdb.com/title/${imdbID}`;
         const getWikidataLink = film => film;
 
-        return { searchTerm, combineSimilarChars, posterMode, filteredItems, getImageUrl, getImdbLink, getWikidataLink, getItemTitleWithYear, darkMode, toggleDarkMode, sortOrder, selectedYear, availableYears, availableDesigners, selectedDesigner, getImageLink, allowSingleCharSearch };
+        return { searchTerm, combineSimilarChars, posterMode, filteredItems, getImageUrl, getImdbLink, getWikidataLink, getItemTitleWithYear, darkMode, toggleDarkMode, sortOrder, selectedYear, availableYears, availableDesigners, selectedDesigner, getImageLink, allowSingleCharSearch, totalItems };
     }
 }).mount('#app');
 </script>