Update app.py

app.py

@@ -1,12 +1,12 @@
-from flask import Flask, render_template_string, request, redirect, url_for, jsonify, flash
+from flask import Flask, render_template_string, request, redirect, url_for, jsonify, flash, send_from_directory
 import json
 import os
 import logging
 import threading
 import time
 from datetime import datetime
-from huggingface_hub import HfApi, hf_hub_download
-from huggingface_hub.utils import RepositoryNotFoundError, HfHubHTTPError
+from huggingface_hub import HfApi, hf_hub_download, snapshot_download
+from huggingface_hub.utils import RepositoryNotFoundError, HfHubHTTPError, EntryNotFoundError
 from werkzeug.utils import secure_filename
 from dotenv import load_dotenv
 import uuid
@@ -19,30 +19,32 @@ load_dotenv()
 app = Flask(__name__)
 app.secret_key = os.getenv("FLASK_SECRET_KEY", 'tontalent_secret_key_for_flash_messages_only')
 DATA_FILE = 'tontalent_data.json'
-SYNC_FILES = [DATA_FILE] 
-UPLOAD_FOLDER_HF = "uploads" 
+UPLOAD_DIR = 'uploads'
+os.makedirs(UPLOAD_DIR, exist_ok=True)
+
+SYNC_FILES = [DATA_FILE]
 
 REPO_ID = os.getenv("HF_REPO_ID", "Kgshop/tontalent2")
 HF_TOKEN_WRITE = os.getenv("HF_TOKEN_WRITE")
-HF_TOKEN_READ = os.getenv("HF_TOKEN_READ") 
+HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
 
-TELEGRAM_BOT_TOKEN = os.getenv("TELEGRAM_BOT_TOKEN", "YOUR_TELEGRAM_BOT_TOKEN") # Ensure this is set in .env
+TELEGRAM_BOT_TOKEN = "7549355625:AAGhdbf6x1JEzpH0mUtuxTF83Soi7MFVNZ8" # Placeholder, use env var
 
 DOWNLOAD_RETRIES = 3
 DOWNLOAD_DELAY = 5
 
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
 
-if not TELEGRAM_BOT_TOKEN or TELEGRAM_BOT_TOKEN == "YOUR_TELEGRAM_BOT_TOKEN":
-    logging.warning("TELEGRAM_BOT_TOKEN is not set or is using the default placeholder. Telegram authentication will likely fail.")
-
 def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWNLOAD_DELAY):
     if not HF_TOKEN_READ and not HF_TOKEN_WRITE:
         logging.warning("HF_TOKEN_READ/HF_TOKEN_WRITE not set. Download might fail for private repos.")
     token_to_use = HF_TOKEN_READ if HF_TOKEN_READ else HF_TOKEN_WRITE
+    api = HfApi(token=token_to_use)
+
     files_to_download = [specific_file] if specific_file else SYNC_FILES
     logging.info(f"Attempting download for {files_to_download} from {REPO_ID}...")
     all_successful = True
+
     for file_name in files_to_download:
         success = False
         for attempt in range(retries + 1):
@@ -61,16 +63,16 @@ def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWN
                  return False
             except HfHubHTTPError as e:
                 if e.response.status_code == 404:
-                    logging.warning(f"File {file_name} not found in repo {REPO_ID} (404). Skipping this file.")
+                    logging.warning(f"File {file_name} not found in repo {REPO_ID} (404).")
                     if attempt == 0 and not os.path.exists(file_name):
                         try:
                             if file_name == DATA_FILE:
                                 with open(file_name, 'w', encoding='utf-8') as f:
                                     json.dump({'resumes': [], 'vacancies': [], 'freelance_offers': [], 'users': {}}, f)
                                 logging.info(f"Created empty local file {file_name} because it was not found on HF.")
+                                success = True 
                         except Exception as create_e:
                             logging.error(f"Failed to create empty local file {file_name}: {create_e}")
-                    success = True 
                     break 
                 else:
                     logging.error(f"HTTP error downloading {file_name} (Attempt {attempt + 1}): {e}. Retrying in {delay}s...")
@@ -80,33 +82,107 @@ def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWN
         if not success:
             logging.error(f"Failed to download {file_name} after {retries + 1} attempts.")
             all_successful = False
-    logging.info(f"Download process finished. Overall success: {all_successful}")
+    
+    if all_successful and not specific_file: 
+        logging.info(f"Attempting to sync remote '{UPLOAD_DIR}' directory to local '{UPLOAD_DIR}'...")
+        os.makedirs(UPLOAD_DIR, exist_ok=True)
+        try:
+            remote_upload_files_info = []
+            try:
+                repo_files = api.list_files_info(repo_id=REPO_ID, paths=[UPLOAD_DIR], repo_type="dataset", recursive=True)
+                remote_upload_files_info = [fi for fi in repo_files if fi.path.startswith(UPLOAD_DIR + '/') and fi.type == 'file']
+            except EntryNotFoundError:
+                 logging.warning(f"Remote directory '{UPLOAD_DIR}' not found in repo {REPO_ID}. Skipping sync of this directory.")
+            except HfHubHTTPError as e:
+                if e.response.status_code == 404:
+                    logging.warning(f"Remote '{UPLOAD_DIR}' path not found in repo {REPO_ID} (404). Skipping uploads sync.")
+                else:
+                    logging.error(f"HTTP error listing files in remote '{UPLOAD_DIR}': {e}")
+            except Exception as e:
+                logging.error(f"Unexpected error listing files in remote '{UPLOAD_DIR}': {e}", exc_info=True)
+
+            for file_info in remote_upload_files_info:
+                local_file_path = os.path.join(os.getcwd(), file_info.path)
+                os.makedirs(os.path.dirname(local_file_path), exist_ok=True)
+                
+                needs_download = True
+                if os.path.exists(local_file_path) and os.path.getsize(local_file_path) == file_info.size:
+                    needs_download = False
+                
+                if needs_download:
+                    logging.info(f"Downloading {file_info.path} from HF uploads...")
+                    for attempt in range(retries + 1):
+                        try:
+                            hf_hub_download(
+                                repo_id=REPO_ID, filename=file_info.path, repo_type="dataset",
+                                token=token_to_use, local_dir=".", local_dir_use_symlinks=False,
+                                force_download=True, resume_download=False
+                            )
+                            logging.info(f"Successfully downloaded {file_info.path}.")
+                            break
+                        except Exception as e_dl:
+                            logging.error(f"Error downloading {file_info.path} (Attempt {attempt + 1}): {e_dl}.")
+                            if attempt < retries: time.sleep(delay)
+                            else: logging.error(f"Failed to download {file_info.path} after multiple attempts.")
+                else:
+                    logging.info(f"Skipping download for {file_info.path}, already exists locally with correct size.")
+        except Exception as e:
+            logging.error(f"Error syncing HF '{UPLOAD_DIR}' directory: {e}", exc_info=True)
+
+    logging.info(f"Download process finished. Overall success for SYNC_FILES: {all_successful}")
     return all_successful
 
+
 def upload_db_to_hf(specific_file=None):
     if not HF_TOKEN_WRITE:
         logging.warning("HF_TOKEN_WRITE not set. Skipping upload to Hugging Face.")
         return
+    api = HfApi(token=HF_TOKEN_WRITE)
     try:
-        api = HfApi(token=HF_TOKEN_WRITE)
-        files_to_upload = [specific_file] if specific_file else SYNC_FILES
-        logging.info(f"Starting upload of {files_to_upload} to HF repo {REPO_ID}...")
-        for file_name in files_to_upload:
-            if os.path.exists(file_name):
-                try:
-                    api.upload_file(
-                        path_or_fileobj=file_name, path_in_repo=file_name, repo_id=REPO_ID,
-                        repo_type="dataset",
-                        commit_message=f"Sync {file_name} {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
-                    )
-                    logging.info(f"File {file_name} successfully uploaded to Hugging Face.")
-                except Exception as e:
-                     logging.error(f"Error uploading file {file_name} to Hugging Face: {e}")
-            else:
-                logging.warning(f"File {file_name} not found locally, skipping upload.")
-        logging.info("Finished uploading files to HF.")
+        api.create_repo(repo_id=REPO_ID, repo_type="dataset", exist_ok=True, token=HF_TOKEN_WRITE)
     except Exception as e:
-        logging.error(f"General error during Hugging Face upload initialization or process: {e}", exc_info=True)
+        logging.error(f"Error ensuring Hugging Face repo exists: {e}", exc_info=True)
+        return
+
+    files_to_upload = [specific_file] if specific_file else SYNC_FILES
+    logging.info(f"Starting upload of {files_to_upload} to HF repo {REPO_ID}...")
+    for file_name in files_to_upload:
+        if os.path.exists(file_name):
+            try:
+                api.upload_file(
+                    path_or_fileobj=file_name, path_in_repo=file_name, repo_id=REPO_ID,
+                    repo_type="dataset", token=HF_TOKEN_WRITE,
+                    commit_message=f"Sync {file_name} {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
+                )
+                logging.info(f"File {file_name} successfully uploaded to Hugging Face.")
+            except Exception as e:
+                 logging.error(f"Error uploading file {file_name} to Hugging Face: {e}")
+        else:
+            logging.warning(f"File {file_name} not found locally, skipping upload.")
+    
+    if not specific_file: 
+        if os.path.exists(UPLOAD_DIR) and os.path.isdir(UPLOAD_DIR) and os.listdir(UPLOAD_DIR):
+            logging.info(f"Attempting to upload local '{UPLOAD_DIR}' directory to HF...")
+            try:
+                api.upload_folder(
+                    folder_path=UPLOAD_DIR,
+                    path_in_repo=UPLOAD_DIR,
+                    repo_id=REPO_ID,
+                    repo_type="dataset",
+                    token=HF_TOKEN_WRITE,
+                    commit_message=f"Sync uploads directory {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}",
+                    allow_patterns="*", 
+                    delete_patterns=None 
+                )
+                logging.info(f"Successfully initiated upload of '{UPLOAD_DIR}' directory to Hugging Face.")
+            except Exception as e:
+                logging.error(f"Error uploading '{UPLOAD_DIR}' directory to Hugging Face: {e}", exc_info=True)
+        elif not os.path.exists(UPLOAD_DIR) or not os.listdir(UPLOAD_DIR):
+             logging.info(f"Local '{UPLOAD_DIR}' directory not found or empty, skipping upload of this directory.")
+
+
+    logging.info("Finished uploading files to HF.")
+
 
 def periodic_backup():
     backup_interval = 1800
@@ -125,7 +201,7 @@ def load_data():
         logging.info(f"Local data loaded successfully from {DATA_FILE}")
         if not isinstance(data, dict):
              logging.warning(f"Local {DATA_FILE} is not a dictionary. Attempting download.")
-             raise FileNotFoundError
+             raise FileNotFoundError 
         for key in default_data:
             if key not in data: data[key] = default_data[key]
         return data
@@ -168,16 +244,13 @@ def save_data(data):
         with open(DATA_FILE, 'w', encoding='utf-8') as file:
             json.dump(data, file, ensure_ascii=False, indent=4)
         logging.info(f"Data successfully saved to {DATA_FILE}")
-        upload_db_to_hf(specific_file=DATA_FILE)
+        upload_db_to_hf() 
     except Exception as e:
         logging.error(f"Error saving data to {DATA_FILE}: {e}", exc_info=True)
 
 def verify_telegram_auth_data(auth_data_str, bot_token):
     if not auth_data_str:
         return False, None
-    if not bot_token:
-        logging.error("Telegram Bot Token is not configured for verification.")
-        return False, None
     
     params = dict(urllib.parse.parse_qsl(auth_data_str))
     if 'hash' not in params:
@@ -203,7 +276,6 @@ def verify_telegram_auth_data(auth_data_str, bot_token):
             return False, None
     return False, None
 
-
 MAIN_APP_TEMPLATE = '''
 <!DOCTYPE html>
 <html lang="en">
@@ -264,7 +336,7 @@ MAIN_APP_TEMPLATE = '''
             transition: color 0.2s, border-bottom-color 0.2s;
         }
         .tab-button.active { color: var(--tg-theme-link-color); border-bottom-color: var(--tg-theme-link-color); }
-        .content { flex-grow: 1; padding: 15px; overflow-x: hidden; }
+        .content { flex-grow: 1; padding: 15px; }
         .list-item {
             background-color: var(--tg-theme-section-bg-color);
             border-radius: 8px;
@@ -273,22 +345,32 @@ MAIN_APP_TEMPLATE = '''
             box-shadow: 0 1px 3px rgba(0,0,0,0.05);
             cursor: pointer;
             transition: background-color 0.2s;
-            display: flex; /* For thumbnail alignment */
-            align-items: flex-start; /* Align items to the top */
+            display: flex;
+            align-items: flex-start;
         }
         .list-item:active { background-color: var(--tg-theme-secondary-bg-color); }
-        .list-item-content { flex-grow: 1; }
+        .item-image-preview-list {
+            width: 60px;
+            height: 60px;
+            margin-right: 12px;
+            flex-shrink: 0;
+            background-color: var(--tg-theme-secondary-bg-color);
+            border-radius: 4px;
+        }
+        .item-image-preview-list img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 4px;
+        }
+        .item-content { flex-grow: 1; }
         .list-item h3 { margin: 0 0 5px 0; font-size: 16px; font-weight: 600; color: var(--tg-theme-text-color); }
         .list-item p { margin: 0 0 3px 0; font-size: 14px; color: var(--tg-theme-hint-color); }
         .list-item .meta { font-size: 12px; color: var(--tg-theme-hint-color); }
-        .thumbnail-image {
-            width: 50px; height: 50px; object-fit: cover; border-radius: 4px;
-            margin-right: 12px; border: 1px solid var(--tg-theme-secondary-bg-color);
-        }
         .form-container { padding: 15px; background-color: var(--tg-theme-section-bg-color); }
         .form-group { margin-bottom: 15px; }
         .form-group label { display: block; font-size: 14px; color: var(--tg-theme-section-header-text-color); margin-bottom: 5px; }
-        .form-group input, .form-group textarea, .form-group input[type="file"] {
+        .form-group input, .form-group textarea {
             width: 100%;
             padding: 10px;
             border: 1px solid var(--tg-theme-secondary-bg-color);
@@ -298,16 +380,10 @@ MAIN_APP_TEMPLATE = '''
             color: var(--tg-theme-text-color);
             box-sizing: border-box;
         }
-        .form-group input[type="file"] { padding: 5px; }
         .form-group textarea { min-height: 80px; resize: vertical; }
-        .image-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
-        .preview-image-container { position: relative; }
-        .preview-image { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; border: 1px solid var(--tg-theme-secondary-bg-color); }
-        .remove-preview-btn {
-            position: absolute; top: -5px; right: -5px; background: var(--tg-theme-destructive-text-color); color: white;
-            border-radius: 50%; width: 20px; height: 20px; font-size: 12px; text-align: center; line-height: 18px;
-            border: none; cursor: pointer; box-shadow: 0 0 5px rgba(0,0,0,0.2); z-index: 1;
-        }
+        .image-preview-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
+        .image-preview-item { position: relative; width: 80px; height: 80px; }
+        .image-preview-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; border: 1px solid var(--tg-theme-secondary-bg-color); }
         .fab {
             position: fixed;
             bottom: 20px;
@@ -330,21 +406,15 @@ MAIN_APP_TEMPLATE = '''
         .detail-view h2 { margin-top: 0; font-size: 20px; color: var(--tg-theme-text-color); }
         .detail-view p { margin-bottom: 8px; line-height: 1.5; font-size: 16px; }
         .detail-view strong { font-weight: 600; color: var(--tg-theme-section-header-text-color); }
-        .image-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; margin-bottom: 10px; }
-        .gallery-image {
-            width: calc(33.333% - 7px); /* Adjust for gap */
-            aspect-ratio: 1 / 1;
-            object-fit: cover; border-radius: 6px;
-            border: 1px solid var(--tg-theme-secondary-bg-color);
-            cursor: zoom-in;
-        }
-        @media (max-width: 400px) {
-            .gallery-image { width: calc(50% - 5px); }
+        .detail-image-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
+        .detail-image-gallery img {
+            width: calc(50% - 5px); max-width: 150px; height: auto; aspect-ratio: 1 / 1;
+            object-fit: cover; border-radius: 6px; border: 1px solid var(--tg-theme-secondary-bg-color);
         }
+        @media (max-width: 400px) { .detail-image-gallery img { width: calc(100%); max-width: none; } }
         .loading, .empty-state { text-align: center; padding: 40px 15px; color: var(--tg-theme-hint-color); font-size: 16px; }
         .user-info { padding: 10px 15px; background-color: var(--tg-theme-secondary-bg-color); font-size: 13px; text-align: center; color: var(--tg-theme-hint-color); }
         .error-message { color: var(--tg-theme-destructive-text-color); font-size: 14px; margin-top: 5px; }
-        .max-images-note { font-size: 12px; color: var(--tg-theme-hint-color); margin-top: 5px; }
     </style>
 </head>
 <body>
@@ -364,13 +434,10 @@ MAIN_APP_TEMPLATE = '''
 
     <script>
         const tg = window.Telegram.WebApp;
-        const HF_REPO_ID = "{{ HF_REPO_ID }}";
-        const MAX_IMAGES = 10;
         let currentUser = null;
         let currentView = 'resumes';
         let currentItem = null;
-        let selectedFilesForUpload = [];
-        let existingImagePaths = [];
+        let selectedFilesStore = [];
 
         function applyThemeParams() {
             document.documentElement.style.setProperty('--tg-theme-bg-color', tg.themeParams.bg_color || '#ffffff');
@@ -388,17 +455,23 @@ MAIN_APP_TEMPLATE = '''
         }
         
         async function apiCall(endpoint, method = 'GET', body = null) {
-            const headers = { 'Content-Type': 'application/json' };
+            const headers = {};
             if (tg.initData) {
                 headers['X-Telegram-Auth'] = tg.initData;
             }
             const options = { method, headers };
-            if (body) options.body = JSON.stringify(body);
+            if (body instanceof FormData) {
+                options.body = body;
+            } else if (body) {
+                headers['Content-Type'] = 'application/json';
+                options.body = JSON.stringify(body);
+            }
+            
             try {
                 const response = await fetch(endpoint, options);
                 if (!response.ok) {
                     const errorData = await response.json().catch(() => ({ error: 'Request failed' }));
-                    throw new Error(errorData.error || `HTTP error ${response.status}`);
+                    throw new Error(errorData.error || \`HTTP error \${response.status}\`);
                 }
                 return response.json();
             } catch (error) {
@@ -411,226 +484,239 @@ MAIN_APP_TEMPLATE = '''
         function renderList(items, type) {
             const contentDiv = document.getElementById('mainContent');
             if (!items || items.length === 0) {
-                contentDiv.innerHTML = `<div class="empty-state">No ${type} found. Be the first to add one!</div>`;
+                contentDiv.innerHTML = \`<div class="empty-state">No \${type} found. Be the first to add one!</div>\`;
                 return;
             }
-            contentDiv.innerHTML = items.map(item => {
-                let thumbnailHtml = '';
-                if (item.images && item.images.length > 0) {
-                    const imageUrl = `https://huggingface.co/datasets/${HF_REPO_ID}/resolve/main/${item.images[0]}`;
-                    thumbnailHtml = `<img src="${imageUrl}" class="thumbnail-image" alt="Thumbnail">`;
-                }
-                return `
-                <div class="list-item" onclick="handleListItemClick('${type}', '${item.id}')">
-                    ${thumbnailHtml}
-                    <div class="list-item-content">
-                        <h3>${item.title || item.name || 'Untitled'}</h3>
-                        ${type === 'vacancies' && item.company_name ? `<p><strong>Company:</strong> ${item.company_name}</p>` : ''}
-                        ${type === 'freelance_offers' && item.budget ? `<p><strong>Budget:</strong> ${item.budget}</p>` : ''}
-                        <p class="meta">Posted by: @${item.user_telegram_username || 'anonymous'} on ${new Date(item.timestamp).toLocaleDateString()}</p>
+            contentDiv.innerHTML = items.map(item => \`
+                <div class="list-item" onclick="showDetailView('\${type}', '\${item.id}')">
+                    <div class="item-image-preview-list">
+                        \${item.images && item.images.length > 0 ? \`<img src="/uploads/\${item.images[0]}" alt="\${item.title || item.name || 'Preview'}">\` : ''}
                     </div>
-                </div>`;
-            }).join('');
-        }
-
-        function handleListItemClick(type, id) {
-            tg.HapticFeedback.impactOccurred('light');
-            showDetailView(type, id);
+                    <div class="item-content">
+                        <h3>\${item.title || item.name || 'Untitled'}</h3>
+                        \${type === 'vacancies' && item.company_name ? \`<p><strong>Company:</strong> \${item.company_name}</p>\` : ''}
+                        \${type === 'freelance_offers' && item.budget ? \`<p><strong>Budget:</strong> \${item.budget}</p>\` : ''}
+                        <p class="meta">Posted by: @\${item.user_telegram_username || 'anonymous'} on \${new Date(item.timestamp).toLocaleDateString()}</p>
+                    </div>
+                </div>
+            \`).join('');
         }
 
         function showDetailView(type, id) {
+            tg.HapticFeedback.impactOccurred('light');
             tg.BackButton.show();
-            tg.BackButton.onClick(() => {
-                tg.HapticFeedback.selectionChanged();
-                loadView(type);
-            });
+            tg.BackButton.onClick(() => { loadView(type); tg.HapticFeedback.impactOccurred('light'); });
             tg.MainButton.hide();
             document.getElementById('fabButton').style.display = 'none';
 
-            apiCall(`/api/${type}/${id}`)
+            apiCall(\`/api/\${type}/\${id}\`)
                 .then(item => {
                     currentItem = item;
                     const contentDiv = document.getElementById('mainContent');
-                    let imageGalleryHtml = '';
+                    let detailsHtml = \`<div class="detail-view"><h2>\${item.title || item.name}</h2>\`;
+                    
                     if (item.images && item.images.length > 0) {
-                        imageGalleryHtml = '<div class="image-gallery">';
-                        item.images.forEach(imgPath => {
-                            const imageUrl = `https://huggingface.co/datasets/${HF_REPO_ID}/resolve/main/${imgPath}`;
-                            imageGalleryHtml += `<img src="${imageUrl}" class="gallery-image" alt="Item image" onclick="tg.openLink('${imageUrl}')">`;
-                        });
-                        imageGalleryHtml += '</div>';
+                        detailsHtml += \`<div class="detail-image-gallery">\`;
+                        detailsHtml += item.images.map(imgFile => \`<img src="/uploads/\${imgFile}" alt="Image for \${item.title || item.name}">\`).join('');
+                        detailsHtml += \`</div>\`;
                     }
 
-                    let detailsHtml = `<div class="detail-view"><h2>${item.title || item.name}</h2>`;
-                    detailsHtml += imageGalleryHtml;
                     if (type === 'resumes') {
-                        detailsHtml += `
-                            <p><strong>Skills:</strong> ${item.skills || 'N/A'}</p>
-                            <p><strong>Experience:</strong><br>${item.experience ? item.experience.replace(/\\n/g, '<br>') : 'N/A'}</p>
-                            <p><strong>Education:</strong><br>${item.education ? item.education.replace(/\\n/g, '<br>') : 'N/A'}</p>
-                            <p><strong>Contact:</strong> ${item.contact || `@${item.user_telegram_username}`}</p>
-                            ${item.portfolio_link ? `<p><strong>Portfolio:</strong> <a href="${item.portfolio_link}" target="_blank" onclick="tg.openLink('${item.portfolio_link}'); return false;">${item.portfolio_link}</a></p>` : ''}
-                        `;
+                        detailsHtml += \`
+                            <p><strong>Skills:</strong> \${item.skills || 'N/A'}</p>
+                            <p><strong>Experience:</strong><br>\${item.experience ? item.experience.replace(/\\n/g, '<br>') : 'N/A'}</p>
+                            <p><strong>Education:</strong><br>\${item.education ? item.education.replace(/\\n/g, '<br>') : 'N/A'}</p>
+                            <p><strong>Contact:</strong> \${item.contact || \`@\${item.user_telegram_username}\`}</p>
+                            \${item.portfolio_link ? \`<p><strong>Portfolio:</strong> <a href="\${item.portfolio_link}" target="_blank">\${item.portfolio_link}</a></p>\` : ''}
+                        \`;
                     } else if (type === 'vacancies') {
-                        detailsHtml += `
-                            <p><strong>Company:</strong> ${item.company_name || 'N/A'}</p>
-                            <p><strong>Description:</strong><br>${item.description ? item.description.replace(/\\n/g, '<br>') : 'N/A'}</p>
-                            <p><strong>Requirements:</strong><br>${item.requirements ? item.requirements.replace(/\\n/g, '<br>') : 'N/A'}</p>
-                            <p><strong>Salary:</strong> ${item.salary || 'N/A'}</p>
-                            <p><strong>Location:</strong> ${item.location || 'N/A'}</p>
-                            <p><strong>Contact/Apply:</strong> ${item.contact || `@${item.user_telegram_username}`}</p>
-                        `;
+                        detailsHtml += \`
+                            <p><strong>Company:</strong> \${item.company_name || 'N/A'}</p>
+                            <p><strong>Description:</strong><br>\${item.description ? item.description.replace(/\\n/g, '<br>') : 'N/A'}</p>
+                            <p><strong>Requirements:</strong><br>\${item.requirements ? item.requirements.replace(/\\n/g, '<br>') : 'N/A'}</p>
+                            <p><strong>Salary:</strong> \${item.salary || 'N/A'}</p>
+                            <p><strong>Location:</strong> \${item.location || 'N/A'}</p>
+                            <p><strong>Contact/Apply:</strong> \${item.contact || \`@\${item.user_telegram_username}\`}</p>
+                        \`;
                     } else if (type === 'freelance_offers') {
-                        detailsHtml += `
-                            <p><strong>Description:</strong><br>${item.description ? item.description.replace(/\\n/g, '<br>') : 'N/A'}</p>
-                            <p><strong>Budget:</strong> ${item.budget || 'N/A'}</p>
-                            <p><strong>Deadline:</strong> ${item.deadline || 'N/A'}</p>
-                            <p><strong>Skills Needed:</strong> ${item.skills_needed || 'N/A'}</p>
-                            <p><strong>Contact:</strong> ${item.contact || `@${item.user_telegram_username}`}</p>
-                        `;
+                        detailsHtml += \`
+                            <p><strong>Description:</strong><br>\${item.description ? item.description.replace(/\\n/g, '<br>') : 'N/A'}</p>
+                            <p><strong>Budget:</strong> \${item.budget || 'N/A'}</p>
+                            <p><strong>Deadline:</strong> \${item.deadline || 'N/A'}</p>
+                            <p><strong>Skills Needed:</strong> \${item.skills_needed || 'N/A'}</p>
+                            <p><strong>Contact:</strong> \${item.contact || \`@\${item.user_telegram_username}\`}</p>
+                        \`;
                     }
-                    detailsHtml += `<p class="meta">Posted by: @${item.user_telegram_username || 'anonymous'} on ${new Date(item.timestamp).toLocaleDateString()}</p></div>`;
+                    detailsHtml += \`<p class="meta">Posted by: @\${item.user_telegram_username || 'anonymous'} on \${new Date(item.timestamp).toLocaleDateString()}</p></div>\`;
                     contentDiv.innerHTML = detailsHtml;
 
                     if (currentUser && item.user_id === currentUser.id) {
                         tg.MainButton.setText('Edit My Post');
-                        tg.MainButton.onClick(() => showForm(type, item));
+                        tg.MainButton.onClick(() => { showForm(type, item); tg.HapticFeedback.impactOccurred('light'); });
                         tg.MainButton.show();
                     }
                 })
                 .catch(err => {
-                    document.getElementById('mainContent').innerHTML = `<div class="empty-state">Error loading details.</div>`;
+                    document.getElementById('mainContent').innerHTML = \`<div class="empty-state">Error loading details.</div>\`;
                 });
         }
         
+        function previewUploadedImages(files) {
+            const previewContainer = document.getElementById('imagePreviewContainer');
+            previewContainer.innerHTML = ''; 
+            selectedFilesStore = Array.from(files).slice(0, 10);
+
+            if (files.length > 10) {
+                tg.showAlert('You can upload a maximum of 10 images. Only the first 10 will be processed.');
+                 tg.HapticFeedback.notificationOccurred('warning');
+            }
+
+            selectedFilesStore.forEach(file => {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const div = document.createElement('div');
+                    div.classList.add('image-preview-item');
+                    const img = document.createElement('img');
+                    img.src = e.target.result;
+                    div.appendChild(img);
+                    previewContainer.appendChild(div);
+                }
+                reader.readAsDataURL(file);
+            });
+        }
+
         function showForm(type, itemToEdit = null) {
+            tg.HapticFeedback.impactOccurred('light');
             currentItem = itemToEdit;
-            selectedFilesForUpload = [];
-            existingImagePaths = itemToEdit?.images || [];
-
+            selectedFilesStore = []; 
             tg.BackButton.show();
             tg.BackButton.onClick(() => {
-                tg.HapticFeedback.selectionChanged();
+                tg.HapticFeedback.impactOccurred('light');
                 if (itemToEdit) showDetailView(type, itemToEdit.id);
                 else loadView(type);
             });
             document.getElementById('fabButton').style.display = 'none';
 
             const contentDiv = document.getElementById('mainContent');
-            let formHtml = `<div class="form-container"><h2>${itemToEdit ? 'Edit' : 'New'} ${type.slice(0, -1)}</h2>`;
+            let formHtml = \`<div class="form-container"><h2>\${itemToEdit ? 'Edit' : 'New'} \${type.slice(0, -1)}</h2>\`;
             
             if (type === 'resumes') {
-                formHtml += `
-                    <div class="form-group"><label for="name">Full Name</label><input type="text" id="name" value="${itemToEdit?.name || ''}" required></div>
-                    <div class="form-group"><label for="title">Job Title / Desired Position</label><input type="text" id="title" value="${itemToEdit?.title || ''}" required></div>
-                    <div class="form-group"><label for="skills">Skills (comma separated)</label><textarea id="skills">${itemToEdit?.skills || ''}</textarea></div>
-                    <div class="form-group"><label for="experience">Experience</label><textarea id="experience">${itemToEdit?.experience || ''}</textarea></div>
-                    <div class="form-group"><label for="education">Education</label><textarea id="education">${itemToEdit?.education || ''}</textarea></div>
-                    <div class="form-group"><label for="contact">Contact Info</label><input type="text" id="contact" value="${itemToEdit?.contact || ''}"></div>
-                    <div class="form-group"><label for="portfolio_link">Portfolio Link</label><input type="url" id="portfolio_link" value="${itemToEdit?.portfolio_link || ''}"></div>
-                `;
+                formHtml += \`
+                    <div class="form-group">
+                        <label for="name">Full Name</label>
+                        <input type="text" id="name" value="\${itemToEdit?.name || ''}" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="title">Job Title / Desired Position</label>
+                        <input type="text" id="title" value="\${itemToEdit?.title || ''}" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="skills">Skills (comma separated)</label>
+                        <textarea id="skills">\${itemToEdit?.skills || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="experience">Experience</label>
+                        <textarea id="experience">\${itemToEdit?.experience || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="education">Education</label>
+                        <textarea id="education">\${itemToEdit?.education || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="contact">Contact Info (e.g., email, or leave blank to use Telegram)</label>
+                        <input type="text" id="contact" value="\${itemToEdit?.contact || ''}">
+                    </div>
+                    <div class="form-group">
+                        <label for="portfolio_link">Portfolio Link (optional)</label>
+                        <input type="url" id="portfolio_link" value="\${itemToEdit?.portfolio_link || ''}">
+                    </div>
+                \`;
             } else if (type === 'vacancies') {
-                formHtml += `
-                    <div class="form-group"><label for="company_name">Company Name</label><input type="text" id="company_name" value="${itemToEdit?.company_name || ''}" required></div>
-                    <div class="form-group"><label for="title">Job Title</label><input type="text" id="title" value="${itemToEdit?.title || ''}" required></div>
-                    <div class="form-group"><label for="description">Description</label><textarea id="description">${itemToEdit?.description || ''}</textarea></div>
-                    <div class="form-group"><label for="requirements">Requirements</label><textarea id="requirements">${itemToEdit?.requirements || ''}</textarea></div>
-                    <div class="form-group"><label for="salary">Salary/Compensation</label><input type="text" id="salary" value="${itemToEdit?.salary || ''}"></div>
-                    <div class="form-group"><label for="location">Location</label><input type="text" id="location" value="${itemToEdit?.location || ''}"></div>
-                    <div class="form-group"><label for="contact">Contact Info / How to Apply</label><textarea id="contact">${itemToEdit?.contact || ''}</textarea></div>
-                `;
+                formHtml += \`
+                    <div class="form-group">
+                        <label for="company_name">Company Name</label>
+                        <input type="text" id="company_name" value="\${itemToEdit?.company_name || ''}" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="title">Job Title</label>
+                        <input type="text" id="title" value="\${itemToEdit?.title || ''}" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="description">Description</label>
+                        <textarea id="description">\${itemToEdit?.description || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="requirements">Requirements</label>
+                        <textarea id="requirements">\${itemToEdit?.requirements || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="salary">Salary/Compensation</label>
+                        <input type="text" id="salary" value="\${itemToEdit?.salary || ''}">
+                    </div>
+                    <div class="form-group">
+                        <label for="location">Location (e.g., Remote, City)</label>
+                        <input type="text" id="location" value="\${itemToEdit?.location || ''}">
+                    </div>
+                    <div class="form-group">
+                        <label for="contact">Contact Info / How to Apply</label>
+                        <textarea id="contact">\${itemToEdit?.contact || ''}</textarea>
+                    </div>
+                \`;
             } else if (type === 'freelance_offers') {
-                formHtml += `
-                    <div class="form-group"><label for="title">Project Title</label><input type="text" id="title" value="${itemToEdit?.title || ''}" required></div>
-                    <div class="form-group"><label for="description">Description of Work</label><textarea id="description">${itemToEdit?.description || ''}</textarea></div>
-                    <div class="form-group"><label for="budget">Budget</label><input type="text" id="budget" value="${itemToEdit?.budget || ''}"></div>
-                    <div class="form-group"><label for="deadline">Expected Deadline</label><input type="text" id="deadline" value="${itemToEdit?.deadline || ''}"></div>
-                    <div class="form-group"><label for="skills_needed">Skills Needed</label><textarea id="skills_needed">${itemToEdit?.skills_needed || ''}</textarea></div>
-                    <div class="form-group"><label for="contact">Contact Info</label><input type="text" id="contact" value="${itemToEdit?.contact || ''}"></div>
-                `;
+                formHtml += \`
+                    <div class="form-group">
+                        <label for="title">Project Title</label>
+                        <input type="text" id="title" value="\${itemToEdit?.title || ''}" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="description">Description of Work</label>
+                        <textarea id="description">\${itemToEdit?.description || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="budget">Budget</label>
+                        <input type="text" id="budget" value="\${itemToEdit?.budget || ''}">
+                    </div>
+                    <div class="form-group">
+                        <label for="deadline">Expected Deadline</label>
+                        <input type="text" id="deadline" value="\${itemToEdit?.deadline || ''}">
+                    </div>
+                    <div class="form-group">
+                        <label for="skills_needed">Skills Needed (comma separated)</label>
+                        <textarea id="skills_needed">\${itemToEdit?.skills_needed || ''}</textarea>
+                    </div>
+                     <div class="form-group">
+                        <label for="contact">Contact Info (or leave blank to use Telegram)</label>
+                        <input type="text" id="contact" value="\${itemToEdit?.contact || ''}">
+                    </div>
+                \`;
             }
-            formHtml += `
+            formHtml += \`
                 <div class="form-group">
-                    <label for="itemImages">Images (up to ${MAX_IMAGES} total)</label>
-                    <input type="file" id="itemImages" multiple accept="image/*" onchange="handleFileSelect(event)">
-                    <div class="max-images-note">Current: <span id="currentImageCount">${existingImagePaths.length}</span>, Max: ${MAX_IMAGES}</div>
-                    <div id="imagePreviews" class="image-previews"></div>
+                    <label for="images">Images (up to 10)</label>
+                    <input type="file" id="images" multiple accept="image/*" onchange="previewUploadedImages(this.files)">
+                    <div id="imagePreviewContainer" class="image-preview-container"></div>
                 </div>
-            `;
-            formHtml += `<div id="formError" class="error-message"></div></div>`;
+                \${itemToEdit && itemToEdit.images && itemToEdit.images.length > 0 ? \`
+                    <div class="form-group">
+                        <label>Current Images</label>
+                        <div class="detail-image-gallery">
+                            \${itemToEdit.images.map(imgFile => \`<img src="/uploads/\${imgFile}" alt="Current image"> \`).join('')}
+                        </div>
+                        <small>\${selectedFilesStore.length > 0 ? 'Uploading new images will replace these.' : 'Current images will be kept unless new ones are uploaded.'}</small>
+                    </div>\` : ''}
+            \`;
+            formHtml += \`<div id="formError" class="error-message"></div></div>\`;
             contentDiv.innerHTML = formHtml;
-            renderImagePreviews();
 
             tg.MainButton.setText(itemToEdit ? 'Save Changes' : 'Post');
             tg.MainButton.show();
             tg.MainButton.onClick(() => handleSubmit(type, itemToEdit ? itemToEdit.id : null));
         }
 
-        function handleFileSelect(event) {
-            const files = event.target.files;
-            const totalAfterAdd = existingImagePaths.length + selectedFilesForUpload.length + files.length;
-            if (totalAfterAdd > MAX_IMAGES) {
-                tg.showAlert(`You can select a maximum of ${MAX_IMAGES} images in total. You already have ${existingImagePaths.length + selectedFilesForUpload.length} and tried to add ${files.length}.`);
-                event.target.value = ''; // Clear selection
-                return;
-            }
-            for (let i = 0; i < files.length; i++) {
-                selectedFilesForUpload.push(files[i]);
-            }
-            renderImagePreviews();
-        }
-
-        function renderImagePreviews() {
-            const previewContainer = document.getElementById('imagePreviews');
-            if (!previewContainer) return;
-            previewContainer.innerHTML = '';
-
-            existingImagePaths.forEach((path, index) => {
-                const imgContainer = document.createElement('div');
-                imgContainer.className = 'preview-image-container';
-                const img = document.createElement('img');
-                img.src = `https://huggingface.co/datasets/${HF_REPO_ID}/resolve/main/${path}`;
-                img.className = 'preview-image';
-                const removeBtn = document.createElement('button');
-                removeBtn.innerHTML = '×';
-                removeBtn.className = 'remove-preview-btn';
-                removeBtn.onclick = () => {
-                    existingImagePaths.splice(index, 1);
-                    renderImagePreviews();
-                };
-                imgContainer.appendChild(img);
-                imgContainer.appendChild(removeBtn);
-                previewContainer.appendChild(imgContainer);
-            });
-
-            selectedFilesForUpload.forEach((file, index) => {
-                const imgContainer = document.createElement('div');
-                imgContainer.className = 'preview-image-container';
-                const reader = new FileReader();
-                const img = document.createElement('img');
-                img.className = 'preview-image';
-                reader.onload = e => img.src = e.target.result;
-                reader.readAsDataURL(file);
-                const removeBtn = document.createElement('button');
-                removeBtn.innerHTML = '×';
-                removeBtn.className = 'remove-preview-btn';
-                removeBtn.onclick = () => {
-                    selectedFilesForUpload.splice(index, 1);
-                    document.getElementById('itemImages').value = ''; // Reset file input to allow re-selection of same file if needed
-                    renderImagePreviews();
-                };
-                imgContainer.appendChild(img);
-                imgContainer.appendChild(removeBtn);
-                previewContainer.appendChild(imgContainer);
-            });
-             document.getElementById('currentImageCount').textContent = existingImagePaths.length + selectedFilesForUpload.length;
-        }
-
         function handleSubmit(type, itemId = null) {
             const payload = {};
             let isValid = true;
-            const formErrorDiv = document.getElementById('formError');
-            formErrorDiv.textContent = '';
+            document.getElementById('formError').textContent = '';
 
             if (type === 'resumes') {
                 payload.name = document.getElementById('name').value.trim();
@@ -661,50 +747,26 @@ MAIN_APP_TEMPLATE = '''
             }
 
             if (!isValid) {
-                formErrorDiv.textContent = 'Please fill in all required fields.';
+                document.getElementById('formError').textContent = 'Please fill in all required fields.';
                 tg.HapticFeedback.notificationOccurred('error');
                 return;
             }
             
             tg.MainButton.showProgress();
 
-            if (selectedFilesForUpload.length > 0) {
-                formErrorDiv.textContent = 'Uploading images...';
-                const formData = new FormData();
-                selectedFilesForUpload.forEach(file => formData.append('images', file));
-
-                fetch('/api/upload_image', {
-                    method: 'POST',
-                    headers: { 'X-Telegram-Auth': tg.initData },
-                    body: formData
-                })
-                .then(response => {
-                    if (!response.ok) {
-                         return response.json().then(err => { throw new Error(err.error || 'Image upload failed'); });
-                    }
-                    return response.json();
-                })
-                .then(uploadResponse => {
-                    payload.images = [...existingImagePaths, ...uploadResponse.image_paths];
-                    submitItemData(type, itemId, payload);
-                })
-                .catch(err => {
-                    tg.HapticFeedback.notificationOccurred('error');
-                    tg.MainButton.hideProgress();
-                    formErrorDiv.textContent = err.message || 'Failed to upload images.';
-                });
-            } else {
-                payload.images = existingImagePaths;
-                submitItemData(type, itemId, payload);
+            const formData = new FormData();
+            for (const key in payload) {
+                formData.append(key, payload[key]);
             }
-        }
+            if (selectedFilesStore.length > 0) {
+                selectedFilesStore.forEach(file => formData.append('images', file, file.name));
+            }
+
 
-        function submitItemData(type, itemId, payload) {
             const method = itemId ? 'PUT' : 'POST';
-            const endpoint = itemId ? `/api/${type}/${itemId}` : `/api/${type}`;
-            document.getElementById('formError').textContent = itemId ? 'Saving changes...' : 'Posting...';
+            const endpoint = itemId ? \`/api/\${type}/\${itemId}\` : \`/api/\${type}\`;
 
-            apiCall(endpoint, method, payload)
+            apiCall(endpoint, method, formData)
                 .then(response => {
                     tg.HapticFeedback.notificationOccurred('success');
                     tg.MainButton.hideProgress();
@@ -720,73 +782,38 @@ MAIN_APP_TEMPLATE = '''
         function loadView(tabName) {
             currentView = tabName;
             document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
-            document.querySelector(`.tab-button[data-tab="${tabName}"]`).classList.add('active');
+            document.querySelector(\`.tab-button[data-tab="\${tabName}"]\`).classList.add('active');
             
-            document.getElementById('mainContent').innerHTML = `<div class="loading">Loading ${tabName}...</div>`;
+            document.getElementById('mainContent').innerHTML = \`<div class="loading">Loading \${tabName}...</div>\`;
             tg.BackButton.hide();
             tg.MainButton.hide();
             document.getElementById('fabButton').style.display = 'block';
 
-            apiCall(`/api/${tabName}`)
+            apiCall(\`/api/\${tabName}\`)
                 .then(data => renderList(data, tabName))
                 .catch(err => {
-                    document.getElementById('mainContent').innerHTML = `<div class="empty-state">Error loading ${tabName}.</div>`;
+                    document.getElementById('mainContent').innerHTML = \`<div class="empty-state">Error loading \${tabName}.</div>\`;
                 });
         }
         
-        function setupSwipeNavigation() {
-            const contentElement = document.getElementById('mainContent');
-            let touchstartX = 0;
-            let touchstartY = 0;
-            let touchendX = 0;
-            let touchendY = 0;
-            const swipeThreshold = 75; 
-            let isSwiping = false;
-
-            contentElement.addEventListener('touchstart', function(event) {
-                touchstartX = event.changedTouches[0].screenX;
-                touchstartY = event.changedTouches[0].screenY;
-                isSwiping = false;
-            }, { passive: true });
-
-            contentElement.addEventListener('touchmove', function(event) {
-                if (isSwiping) return;
-                const deltaX = event.changedTouches[0].screenX - touchstartX;
-                const deltaY = event.changedTouches[0].screenY - touchstartY;
-                if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) { // Prioritize horizontal swipe
-                     isSwiping = true; // Mark that we started a horizontal swipe
-                }
-            }, { passive: false });
+        let touchstartX = 0;
+        let touchendX = 0;
+        const swipeThreshold = 75; 
 
+        function handleSwipeGesture() {
+            const swipeDiff = touchendX - touchstartX;
+            if (Math.abs(swipeDiff) < swipeThreshold) return;
 
-            contentElement.addEventListener('touchend', function(event) {
-                touchendX = event.changedTouches[0].screenX;
-                touchendY = event.changedTouches[0].screenY;
-                handleSwipe();
-                isSwiping = false;
-            }, { passive: true });
+            const tabs = ['resumes', 'vacancies', 'freelance_offers'];
+            let currentIndex = tabs.indexOf(currentView);
 
-            function handleSwipe() {
-                const deltaX = touchendX - touchstartX;
-                const deltaY = touchendY - touchstartY;
-                
-                if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > swipeThreshold) {
-                    const tabButtons = Array.from(document.querySelectorAll('.tab-button'));
-                    const currentTabIndex = tabButtons.findIndex(btn => btn.classList.contains('active'));
-                    
-                    if (touchendX < touchstartX) { // Swiped left
-                        if (currentTabIndex < tabButtons.length - 1) {
-                            loadView(tabButtons[currentTabIndex + 1].dataset.tab);
-                            tg.HapticFeedback.selectionChanged();
-                        }
-                    } else { // Swiped right
-                        if (currentTabIndex > 0) {
-                            loadView(tabButtons[currentTabIndex - 1].dataset.tab);
-                            tg.HapticFeedback.selectionChanged();
-                        }
-                    }
-                }
+            if (swipeDiff < 0) { 
+                currentIndex = (currentIndex + 1) % tabs.length;
+            } else { 
+                currentIndex = (currentIndex - 1 + tabs.length) % tabs.length;
             }
+            tg.HapticFeedback.impactOccurred('medium');
+            loadView(tabs[currentIndex]);
         }
 
         async function init() {
@@ -795,31 +822,36 @@ MAIN_APP_TEMPLATE = '''
             tg.expand();
             tg.enableClosingConfirmation();
 
-            document.getElementById('userInfo').textContent = `Welcome, ${tg.initDataUnsafe.user?.first_name || 'User'}! (@${tg.initDataUnsafe.user?.username || 'anonymous'})`;
+            document.getElementById('userInfo').textContent = \`Welcome, \${tg.initDataUnsafe.user?.first_name || 'User'}! (@\${tg.initDataUnsafe.user?.username || 'anonymous'})\`;
             
             try {
                 const authResponse = await apiCall('/api/auth_user', 'POST', { init_data: tg.initData });
                 currentUser = authResponse.user;
                 if (currentUser) {
-                     document.getElementById('userInfo').textContent = `Logged in as: ${currentUser.first_name} (@${currentUser.username || 'id'+currentUser.id})`;
+                     document.getElementById('userInfo').textContent = \`Logged in as: \${currentUser.first_name} (@\${currentUser.username})\`;
                 }
             } catch (error) {
                 console.error("Auth error:", error);
-                document.getElementById('userInfo').textContent = `Auth failed. Limited functionality.`;
+                document.getElementById('userInfo').textContent = \`Auth failed. Limited functionality.\`;
+                tg.showAlert("Authentication with the server failed. Some features might not work correctly.");
             }
 
+
             document.querySelectorAll('.tab-button').forEach(button => {
                 button.addEventListener('click', () => {
-                    tg.HapticFeedback.selectionChanged();
+                    tg.HapticFeedback.impactOccurred('light');
                     loadView(button.dataset.tab);
                 });
             });
             document.getElementById('fabButton').addEventListener('click', () => {
-                tg.HapticFeedback.impactOccurred('medium');
+                tg.HapticFeedback.impactOccurred('heavy');
                 showForm(currentView);
             });
             
-            setupSwipeNavigation();
+            const mainContentEl = document.getElementById('mainContent');
+            mainContentEl.addEventListener('touchstart', e => { touchstartX = e.changedTouches[0].screenX; }, {passive: true});
+            mainContentEl.addEventListener('touchend', e => { touchendX = e.changedTouches[0].screenX; handleSwipeGesture(); }, {passive: true});
+
             loadView('resumes');
         }
 
@@ -872,14 +904,13 @@ ADMIN_TEMPLATE = '''
             <h2>Data Synchronization with Hugging Face</h2>
             <div class="sync-buttons">
                 <form method="POST" action="{{ url_for('force_upload_admin') }}" onsubmit="return confirm('Upload local data to Hugging Face? This will overwrite server data.');">
-                    <button type="submit" class="button button-primary">Upload DB to HF</button>
+                    <button type="submit" class="button button-primary">Upload DB & Uploads to HF</button>
                 </form>
                 <form method="POST" action="{{ url_for('force_download_admin') }}" onsubmit="return confirm('Download data from Hugging Face? This will overwrite local data.');">
-                    <button type="submit" class="button button-secondary">Download DB from HF</button>
+                    <button type="submit" class="button button-secondary">Download DB & Uploads from HF</button>
                 </form>
             </div>
             <p style="font-size: 0.8em; color: #666;">Automatic backup runs every 30 minutes if HF_TOKEN_WRITE is set.</p>
-            <p style="font-size: 0.8em; color: #666;">Image files are stored in the '{{ UPLOAD_FOLDER_HF }}' directory in the HF repository.</p>
         </div>
 
         <div class="section">
@@ -888,8 +919,8 @@ ADMIN_TEMPLATE = '''
             <div class="item">
                 <h3>{{ resume.name }} - {{ resume.title }}</h3>
                 <p>User ID: {{ resume.user_id }} (@{{ resume.user_telegram_username }})</p>
+                <p>Posted: {{ resume.timestamp }}</p>
                 <p>Images: {{ resume.images|length if resume.images else 0 }}</p>
-                <p>Posted: {{ resume.timestamp|format_datetime }}</p>
                 <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this resume?');">
                     <input type="hidden" name="item_type" value="resumes">
                     <input type="hidden" name="item_id" value="{{ resume.id }}">
@@ -907,8 +938,8 @@ ADMIN_TEMPLATE = '''
             <div class="item">
                 <h3>{{ vacancy.title }} - {{ vacancy.company_name }}</h3>
                 <p>User ID: {{ vacancy.user_id }} (@{{ vacancy.user_telegram_username }})</p>
+                <p>Posted: {{ vacancy.timestamp }}</p>
                 <p>Images: {{ vacancy.images|length if vacancy.images else 0 }}</p>
-                <p>Posted: {{ vacancy.timestamp|format_datetime }}</p>
                 <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this vacancy?');">
                     <input type="hidden" name="item_type" value="vacancies">
                     <input type="hidden" name="item_id" value="{{ vacancy.id }}">
@@ -927,8 +958,8 @@ ADMIN_TEMPLATE = '''
                 <h3>{{ offer.title }}</h3>
                 <p>User ID: {{ offer.user_id }} (@{{ offer.user_telegram_username }})</p>
                 <p>Budget: {{ offer.budget }}</p>
+                <p>Posted: {{ offer.timestamp }}</p>
                 <p>Images: {{ offer.images|length if offer.images else 0 }}</p>
-                <p>Posted: {{ offer.timestamp|format_datetime }}</p>
                 <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this freelance offer?');">
                     <input type="hidden" name="item_type" value="freelance_offers">
                     <input type="hidden" name="item_id" value="{{ offer.id }}">
@@ -944,20 +975,13 @@ ADMIN_TEMPLATE = '''
 </html>
 '''
 
-@app.template_filter('format_datetime')
-def format_datetime_filter(s):
-    if not s:
-        return "N/A"
-    try:
-        dt = datetime.fromisoformat(s)
-        return dt.strftime("%Y-%m-%d %H:%M:%S")
-    except:
-        return s
-
-
 @app.route('/')
 def main_app_view():
-    return render_template_string(MAIN_APP_TEMPLATE, HF_REPO_ID=REPO_ID)
+    return render_template_string(MAIN_APP_TEMPLATE)
+
+@app.route('/uploads/<path:filename>')
+def serve_upload(filename):
+    return send_from_directory(UPLOAD_DIR, filename)
 
 @app.route('/api/auth_user', methods=['POST'])
 def auth_user():
@@ -969,24 +993,23 @@ def auth_user():
         else:
             return jsonify({"error": "Authentication data not provided"}), 401
 
-    is_valid, user_data = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
+    is_valid, user_data_dict = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
 
-    if not is_valid or not user_data:
-        logging.warning(f"Invalid auth data. Valid: {is_valid}, UserData: {user_data is not None}")
+    if not is_valid or not user_data_dict:
         return jsonify({"error": "Invalid authentication data"}), 403
 
     data = load_data()
     users = data.get('users', {})
-    user_id_str = str(user_data.get('id'))
+    user_id_str = str(user_data_dict.get('id'))
 
     if user_id_str not in users:
         users[user_id_str] = {
-            'id': user_data.get('id'),
-            'first_name': user_data.get('first_name'),
-            'last_name': user_data.get('last_name'),
-            'username': user_data.get('username'),
-            'language_code': user_data.get('language_code'),
-            'photo_url': user_data.get('photo_url'),
+            'id': user_data_dict.get('id'),
+            'first_name': user_data_dict.get('first_name'),
+            'last_name': user_data_dict.get('last_name'),
+            'username': user_data_dict.get('username'),
+            'language_code': user_data_dict.get('language_code'),
+            'photo_url': user_data_dict.get('photo_url'),
             'first_seen': datetime.now().isoformat()
         }
     users[user_id_str]['last_seen'] = datetime.now().isoformat()
@@ -999,58 +1022,11 @@ def get_authenticated_user(request_obj):
     auth_data_str = request_obj.headers.get('X-Telegram-Auth')
     if not auth_data_str:
         return None
-    is_valid, user_data = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
-    if is_valid and user_data:
-        return user_data
-    logging.warning(f"get_authenticated_user failed. Valid: {is_valid}, UserData: {user_data is not None}")
+    is_valid, user_data_dict = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
+    if is_valid and user_data_dict:
+        return user_data_dict
     return None
 
-@app.route('/api/upload_image', methods=['POST'])
-def upload_image():
-    user = get_authenticated_user(request)
-    if not user:
-        return jsonify({"error": "Authentication required"}), 401
-
-    if not HF_TOKEN_WRITE:
-        return jsonify({"error": "Image upload service not configured (no write token)."}), 500
-
-    if 'images' not in request.files:
-        return jsonify({"error": "No image files provided"}), 400
-
-    files = request.files.getlist('images')
-    if not files or all(f.filename == '' for f in files):
-        return jsonify({"error": "No selected files"}), 400
-    
-    if len(files) > 10: # Max 10 images per upload request
-         return jsonify({"error": f"Cannot upload more than 10 images at once."}), 400
-
-
-    uploaded_image_paths = []
-    api = HfApi(token=HF_TOKEN_WRITE)
-
-    for file in files:
-        if file:
-            filename = secure_filename(file.filename)
-            unique_filename = f"{uuid.uuid4()}_{filename}"
-            path_in_repo = f"{UPLOAD_FOLDER_HF}/{unique_filename}"
-            
-            try:
-                file.seek(0) 
-                api.upload_file(
-                    path_or_fileobj=file,
-                    path_in_repo=path_in_repo,
-                    repo_id=REPO_ID,
-                    repo_type="dataset",
-                    commit_message=f"Upload image {unique_filename} by user {user.get('id')}"
-                )
-                uploaded_image_paths.append(path_in_repo)
-                logging.info(f"Successfully uploaded {path_in_repo} by user {user.get('id')}")
-            except Exception as e:
-                logging.error(f"Failed to upload {unique_filename} to HF: {e}")
-                return jsonify({"error": f"Failed to upload image {filename}. Error: {str(e)}"}), 500
-    
-    return jsonify({"message": "Images uploaded successfully", "image_paths": uploaded_image_paths}), 200
-
 
 @app.route('/api/<item_type>', methods=['GET'])
 def get_items(item_type):
@@ -1060,6 +1036,7 @@ def get_items(item_type):
     items = sorted(data.get(item_type, []), key=lambda x: x.get('timestamp', ''), reverse=True)
     return jsonify(items), 200
 
+
 @app.route('/api/<item_type>/<item_id>', methods=['GET'])
 def get_item(item_type, item_id):
     if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
@@ -1070,6 +1047,7 @@ def get_item(item_type, item_id):
         return jsonify(item), 200
     return jsonify({"error": "Item not found"}), 404
 
+
 @app.route('/api/<item_type>', methods=['POST'])
 def create_item(item_type):
     user = get_authenticated_user(request)
@@ -1079,19 +1057,35 @@ def create_item(item_type):
     if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
         return jsonify({"error": "Invalid item type"}), 400
     
-    req_data = request.json
+    req_data = request.form 
     if not req_data:
         return jsonify({"error": "No data provided"}), 400
 
     new_item = {
         "id": str(uuid.uuid4()),
         "user_id": str(user.get('id')),
-        "user_telegram_username": user.get('username', f"id{user.get('id')}"),
+        "user_telegram_username": user.get('username', 'unknown'),
         "timestamp": datetime.now().isoformat(),
-        "images": req_data.get('images', []) 
+        "images": []
     }
-    if len(new_item["images"]) > 10:
-        return jsonify({"error": "Cannot associate more than 10 images."}), 400
+
+    uploaded_files = request.files.getlist("images")
+    if len(uploaded_files) > 10:
+        return jsonify({"error": "Maximum 10 images allowed"}), 400
+    
+    for file_storage in uploaded_files:
+        if file_storage and file_storage.filename:
+            original_filename = secure_filename(file_storage.filename)
+            extension = os.path.splitext(original_filename)[1].lower()
+            if extension not in ['.png', '.jpg', '.jpeg', '.gif', '.webp']:
+                return jsonify({"error": f"Invalid image file type: {extension}"}), 400
+            unique_filename = f"{uuid.uuid4()}{extension}"
+            try:
+                file_storage.save(os.path.join(UPLOAD_DIR, unique_filename))
+                new_item["images"].append(unique_filename)
+            except Exception as e:
+                logging.error(f"Failed to save uploaded file {unique_filename}: {e}")
+                return jsonify({"error": "Failed to save image"}), 500
 
 
     if item_type == 'resumes':
@@ -1129,6 +1123,7 @@ def create_item(item_type):
     save_data(data)
     return jsonify(new_item), 201
 
+
 @app.route('/api/<item_type>/<item_id>', methods=['PUT'])
 def update_item(item_type, item_id):
     user = get_authenticated_user(request)
@@ -1137,28 +1132,58 @@ def update_item(item_type, item_id):
     if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
         return jsonify({"error": "Invalid item type"}), 400
     
-    req_data = request.json
+    req_data = request.form
     if not req_data: return jsonify({"error": "No data provided"}), 400
 
     data = load_data()
     items_list = data.get(item_type, [])
     item_index = -1
+    original_item = None
     for idx, i in enumerate(items_list):
         if i['id'] == item_id:
             item_index = idx
+            original_item = i
             break
     
-    if item_index == -1: return jsonify({"error": "Item not found"}), 404
+    if item_index == -1 or original_item is None: return jsonify({"error": "Item not found"}), 404
     
-    original_item = items_list[item_index]
     if str(original_item.get('user_id')) != str(user.get('id')):
         return jsonify({"error": "Forbidden: You can only edit your own items"}), 403
 
     updated_item = original_item.copy()
     updated_item['updated_timestamp'] = datetime.now().isoformat()
-    updated_item['images'] = req_data.get('images', original_item.get('images', []))
-    if len(updated_item["images"]) > 10:
-        return jsonify({"error": "Cannot associate more than 10 images."}), 400
+
+    uploaded_files = request.files.getlist("images")
+    if uploaded_files and any(f.filename for f in uploaded_files):
+        if len(uploaded_files) > 10:
+            return jsonify({"error": "Maximum 10 images allowed"}), 400
+        
+        new_image_filenames = []
+        for file_storage in uploaded_files:
+            if file_storage and file_storage.filename:
+                original_filename = secure_filename(file_storage.filename)
+                extension = os.path.splitext(original_filename)[1].lower()
+                if extension not in ['.png', '.jpg', '.jpeg', '.gif', '.webp']:
+                     return jsonify({"error": f"Invalid image file type: {extension}"}), 400
+                unique_filename = f"{uuid.uuid4()}{extension}"
+                try:
+                    file_storage.save(os.path.join(UPLOAD_DIR, unique_filename))
+                    new_image_filenames.append(unique_filename)
+                except Exception as e:
+                    logging.error(f"Failed to save updated file {unique_filename}: {e}")
+                    return jsonify({"error": "Failed to save image"}), 500
+        
+        if new_image_filenames:
+            old_images_to_remove = original_item.get("images", [])
+            updated_item['images'] = new_image_filenames
+            for old_img_name in old_images_to_remove:
+                if old_img_name not in new_image_filenames: # Avoid deleting if re-uploaded with same name (unlikely with UUID)
+                    try:
+                        os.remove(os.path.join(UPLOAD_DIR, old_img_name))
+                    except OSError:
+                        logging.warning(f"Could not delete old image {old_img_name} during update.")
+    else:
+        updated_item['images'] = original_item.get('images', [])
 
 
     if item_type == 'resumes':
@@ -1195,6 +1220,7 @@ def update_item(item_type, item_id):
     save_data(data)
     return jsonify(updated_item), 200
 
+
 @app.route('/api/<item_type>/<item_id>', methods=['DELETE'])
 def delete_item(item_type, item_id):
     user = get_authenticated_user(request)
@@ -1205,24 +1231,27 @@ def delete_item(item_type, item_id):
 
     data = load_data()
     items_list = data.get(item_type, [])
-    original_length = len(items_list)
     
     item_to_delete = next((i for i in items_list if i['id'] == item_id), None)
     if not item_to_delete: return jsonify({"error": "Item not found"}), 404
 
     if str(item_to_delete.get('user_id')) != str(user.get('id')):
-        # Allow admin deletion from here in future if needed by checking role
         return jsonify({"error": "Forbidden: You can only delete your own items"}), 403
-    
-    # Image deletion from HF is not implemented here to keep it simpler
-    # For full cleanup, one would iterate item_to_delete.get('images', []) and call api.delete_file()
 
+    images_to_remove = item_to_delete.get("images", [])
+    
     data[item_type] = [i for i in items_list if i['id'] != item_id]
     
-    if len(data[item_type]) < original_length:
-        save_data(data)
-        return jsonify({"message": "Item deleted successfully"}), 200
-    return jsonify({"error": "Item not found or deletion failed"}), 404
+    save_data(data) 
+
+    for img_name in images_to_remove:
+        try:
+            os.remove(os.path.join(UPLOAD_DIR, img_name))
+            logging.info(f"Deleted image file {img_name} for item {item_id}")
+        except OSError as e:
+            logging.warning(f"Could not delete image file {img_name}: {e}")
+            
+    return jsonify({"message": "Item deleted successfully"}), 200
 
 
 @app.route('/admin', methods=['GET'])
@@ -1231,8 +1260,7 @@ def admin_panel():
     return render_template_string(ADMIN_TEMPLATE,
                                   resumes=sorted(data.get('resumes', []), key=lambda x: x.get('timestamp', ''), reverse=True),
                                   vacancies=sorted(data.get('vacancies', []), key=lambda x: x.get('timestamp', ''), reverse=True),
-                                  freelance_offers=sorted(data.get('freelance_offers', []), key=lambda x: x.get('timestamp', ''), reverse=True),
-                                  UPLOAD_FOLDER_HF=UPLOAD_FOLDER_HF)
+                                  freelance_offers=sorted(data.get('freelance_offers', []), key=lambda x: x.get('timestamp', ''), reverse=True))
 
 @app.route('/admin/delete', methods=['POST'])
 def admin_delete_item():
@@ -1245,25 +1273,22 @@ def admin_delete_item():
 
     data = load_data()
     items_list = data.get(item_type, [])
-    original_length = len(items_list)
     
-    # Future: If deleting images from HF is desired for admin delete:
-    # item_to_delete = next((i for i in items_list if i['id'] == item_id), None)
-    # if item_to_delete and item_to_delete.get('images') and HF_TOKEN_WRITE:
-    #     api = HfApi(token=HF_TOKEN_WRITE)
-    #     for img_path in item_to_delete['images']:
-    #         try:
-    #             api.delete_file(path_in_repo=img_path, repo_id=REPO_ID, repo_type="dataset")
-    #             logging.info(f"Admin deleted image {img_path} from HF.")
-    #         except Exception as e:
-    #             logging.error(f"Admin failed to delete image {img_path} from HF: {e}")
-
-
-    data[item_type] = [i for i in items_list if i['id'] != item_id]
+    item_to_delete = next((i for i in items_list if i['id'] == item_id), None)
 
-    if len(data[item_type]) < original_length:
+    if item_to_delete:
+        images_to_remove = item_to_delete.get("images", [])
+        data[item_type] = [i for i in items_list if i['id'] != item_id]
         save_data(data)
-        flash(f'{item_type.capitalize().rstrip("s")} deleted successfully.', 'success')
+        
+        for img_name in images_to_remove:
+            try:
+                os.remove(os.path.join(UPLOAD_DIR, img_name))
+                logging.info(f"Admin deleted image file {img_name} for item {item_id}")
+            except OSError as e:
+                logging.warning(f"Admin could not delete image file {img_name}: {e}")
+        
+        flash(f'{item_type.capitalize()[:-1]} deleted successfully.', 'success')
     else:
         flash('Item not found or already deleted.', 'warning')
     return redirect(url_for('admin_panel'))
@@ -1273,7 +1298,7 @@ def force_upload_admin():
     logging.info("Admin forcing upload to Hugging Face...")
     try:
         upload_db_to_hf()
-        flash("Data successfully uploaded to Hugging Face.", 'success')
+        flash("Data and uploads successfully uploaded to Hugging Face.", 'success')
     except Exception as e:
         logging.error(f"Error during forced upload: {e}", exc_info=True)
         flash(f"Error uploading to Hugging Face: {e}", 'error')
@@ -1284,10 +1309,10 @@ def force_download_admin():
     logging.info("Admin forcing download from Hugging Face...")
     try:
         if download_db_from_hf():
-            flash("Data successfully downloaded from Hugging Face. Local files updated.", 'success')
+            flash("Data and uploads successfully downloaded from Hugging Face. Local files updated.", 'success')
             load_data() 
         else:
-            flash("Failed to download data from Hugging Face. Check logs.", 'error')
+            flash("Failed to download data/uploads from Hugging Face. Check logs.", 'error')
     except Exception as e:
         logging.error(f"Error during forced download: {e}", exc_info=True)
         flash(f"Error downloading from Hugging Face: {e}", 'error')
@@ -1296,8 +1321,7 @@ def force_download_admin():
 
 if __name__ == '__main__':
     logging.info("Application starting up. Performing initial data load/download...")
-    if not os.path.exists(DATA_FILE):
-        download_db_from_hf(specific_file=DATA_FILE) 
+    download_db_from_hf() 
     load_data()
     logging.info("Initial data load complete.")