Update app.py

app.py

@@ -5,7 +5,7 @@ import logging
 import threading
 import time
 from datetime import datetime
-from huggingface_hub import HfApi, hf_hub_download, snapshot_download
+from huggingface_hub import HfApi, hf_hub_download, list_repo_files
 from huggingface_hub.utils import RepositoryNotFoundError, HfHubHTTPError, EntryNotFoundError
 from werkzeug.utils import secure_filename
 from dotenv import load_dotenv
@@ -18,31 +18,47 @@ 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'
-UPLOAD_DIR = 'uploads'
-os.makedirs(UPLOAD_DIR, exist_ok=True)
+UPLOADS_DIR_NAME = 'uploads' # Relative to project root
+app.config['UPLOAD_FOLDER'] = UPLOADS_DIR_NAME
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+MAX_IMAGE_FILES = 10
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'webp'}
 
-SYNC_FILES = [DATA_FILE]
+SYNC_FILES = [DATA_FILE] # Main data file, images handled separately based on this 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")
 
-TELEGRAM_BOT_TOKEN = "7549355625:AAGhdbf6x1JEzpH0mUtuxTF83Soi7MFVNZ8" # Placeholder, use env var
+TELEGRAM_BOT_TOKEN = "7549355625:AAGhdbf6x1JEzpH0mUtuxTF83Soi7MFVNZ8" # Replace with your actual bot token
 
 DOWNLOAD_RETRIES = 3
 DOWNLOAD_DELAY = 5
 
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
 
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def _get_all_image_paths_from_data(data_dict):
+    image_paths = set()
+    for item_type_key in ['resumes', 'vacancies', 'freelance_offers']:
+        for item in data_dict.get(item_type_key, []):
+            for img_path in item.get('images', []):
+                if img_path.startswith(UPLOADS_DIR_NAME + "/"): # Ensure it's a path we manage
+                    image_paths.add(img_path)
+    return list(image_paths)
+
 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}...")
+    logging.info(f"Attempting download for primary files {files_to_download} from {REPO_ID}...")
     all_successful = True
 
     for file_name in files_to_download:
@@ -59,129 +75,172 @@ def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWN
                 success = True
                 break
             except RepositoryNotFoundError:
-                 logging.error(f"Repository {REPO_ID} not found. Download cancelled for all files.")
-                 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).")
+                logging.error(f"Repository {REPO_ID} not found. Download cancelled.")
+                return False
+            except (HfHubHTTPError, EntryNotFoundError) as e:
+                is_404 = isinstance(e, EntryNotFoundError) or (isinstance(e, HfHubHTTPError) and e.response.status_code == 404)
+                if is_404:
+                    logging.warning(f"File {file_name} not found in repo {REPO_ID} (404). Skipping this file.")
                     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 
+                                success = True # Created locally, treat as success for this file
                         except Exception as create_e:
                             logging.error(f"Failed to create empty local file {file_name}: {create_e}")
                     break 
                 else:
                     logging.error(f"HTTP error downloading {file_name} (Attempt {attempt + 1}): {e}. Retrying in {delay}s...")
             except Exception as e:
-                 logging.error(f"Unexpected error downloading {file_name} (Attempt {attempt + 1}): {e}. Retrying in {delay}s...", exc_info=True)
+                logging.error(f"Unexpected error downloading {file_name} (Attempt {attempt + 1}): {e}. Retrying in {delay}s...", exc_info=True)
             if attempt < retries: time.sleep(delay)
         if not success:
             logging.error(f"Failed to download {file_name} after {retries + 1} attempts.")
             all_successful = False
-    
-    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)
+
+    if not all_successful:
+        logging.error("Not all primary files downloaded successfully. Image download might be skipped or incomplete.")
+        return False
+
+    # Download images if DATA_FILE was part of the download or no specific file was requested (full sync)
+    if (specific_file is None or specific_file == DATA_FILE) and os.path.exists(DATA_FILE):
+        logging.info("Downloading referenced image files...")
         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}.")
+            with open(DATA_FILE, 'r', encoding='utf-8') as f:
+                data_content = json.load(f)
+            image_paths_in_data = _get_all_image_paths_from_data(data_content)
+            
+            for img_repo_path in image_paths_in_data:
+                local_img_full_path = os.path.join(app.root_path, img_repo_path)
+                os.makedirs(os.path.dirname(local_img_full_path), exist_ok=True)
+                img_success = False
+                for attempt in range(retries + 1):
+                    try:
+                        logging.info(f"Downloading image {img_repo_path} (Attempt {attempt+1})")
+                        hf_hub_download(
+                            repo_id=REPO_ID, filename=img_repo_path, repo_type="dataset",
+                            token=token_to_use, local_dir=".", local_dir_use_symlinks=False, # local_dir="." means files go into UPLOADS_DIR_NAME/
+                            force_download=True, resume_download=False
+                        )
+                        logging.info(f"Successfully downloaded image {img_repo_path}.")
+                        img_success = True
+                        break
+                    except (HfHubHTTPError, EntryNotFoundError) as e_img:
+                        is_404_img = isinstance(e_img, EntryNotFoundError) or (isinstance(e_img, HfHubHTTPError) and e_img.response.status_code == 404)
+                        if is_404_img:
+                            logging.warning(f"Image {img_repo_path} not found on HF (404). Skipping.")
                             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.")
+                        else:
+                             logging.error(f"HTTP error downloading image {img_repo_path}: {e_img}. Retrying...")
+                    except Exception as e_img:
+                        logging.error(f"Unexpected error downloading image {img_repo_path}: {e_img}. Retrying...", exc_info=True)
+                    if attempt < retries: time.sleep(delay)
+                if not img_success:
+                    logging.error(f"Failed to download image {img_repo_path} after multiple attempts.")
+                    all_successful = False # Mark overall sync as potentially incomplete
         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}")
+            logging.error(f"Error processing or downloading images: {e}", exc_info=True)
+            all_successful = False
+            
+    logging.info(f"Download process finished. Overall success: {all_successful}")
     return all_successful
 
 
-def upload_db_to_hf(specific_file=None):
+def upload_db_to_hf(specific_file_local_path=None, specific_file_repo_path=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.create_repo(repo_id=REPO_ID, repo_type="dataset", exist_ok=True, token=HF_TOKEN_WRITE)
-    except Exception as e:
-        logging.error(f"Error ensuring Hugging Face repo exists: {e}", exc_info=True)
-        return
+        api = HfApi()
+        
+        files_to_upload_map = {} # {local_path: repo_path}
+
+        if specific_file_local_path and specific_file_repo_path:
+            if os.path.exists(specific_file_local_path):
+                 files_to_upload_map[specific_file_local_path] = specific_file_repo_path
+            else:
+                logging.warning(f"Specific file {specific_file_local_path} not found locally for upload.")
+        else: # Full sync
+            for file_name in SYNC_FILES: # DATA_FILE
+                if os.path.exists(file_name):
+                    files_to_upload_map[file_name] = file_name 
+            
+            # Add images referenced in DATA_FILE for full sync
+            if os.path.exists(DATA_FILE):
+                try:
+                    with open(DATA_FILE, 'r', encoding='utf-8') as f:
+                        data_content = json.load(f)
+                    image_paths_in_data = _get_all_image_paths_from_data(data_content)
+                    for img_repo_path in image_paths_in_data: # img_repo_path is like 'uploads/file.jpg'
+                        local_img_path = os.path.join(app.root_path, img_repo_path)
+                        if os.path.exists(local_img_path):
+                            files_to_upload_map[local_img_path] = img_repo_path
+                        else:
+                            logging.warning(f"Image {local_img_path} (referenced in data) not found locally, skipping upload.")
+                except Exception as e:
+                    logging.error(f"Error reading DATA_FILE for image paths during upload: {e}")
+
+        if not files_to_upload_map:
+            logging.info("No files to upload.")
+            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):
+        logging.info(f"Starting upload of {len(files_to_upload_map)} file(s) to HF repo {REPO_ID}...")
+        for local_path, repo_path_in_repo in files_to_upload_map.items():
             try:
+                logging.info(f"Uploading {local_path} to {repo_path_in_repo}...")
                 api.upload_file(
-                    path_or_fileobj=file_name, path_in_repo=file_name, repo_id=REPO_ID,
+                    path_or_fileobj=local_path, path_in_repo=repo_path_in_repo, 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 
+                    commit_message=f"Sync {os.path.basename(local_path)} {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
                 )
-                logging.info(f"Successfully initiated upload of '{UPLOAD_DIR}' directory to Hugging Face.")
+                logging.info(f"File {local_path} successfully uploaded to {repo_path_in_repo}.")
             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.error(f"Error uploading file {local_path} to Hugging Face: {e}")
+        logging.info("Finished uploading files to HF.")
 
+    except Exception as e:
+        logging.error(f"General error during Hugging Face upload initialization or process: {e}", exc_info=True)
 
-    logging.info("Finished uploading files to HF.")
+
+def delete_files_from_hf(file_paths_in_repo):
+    if not HF_TOKEN_WRITE:
+        logging.warning("HF_TOKEN_WRITE not set. Skipping deletion from Hugging Face.")
+        return False
+    if not file_paths_in_repo:
+        return True
+    
+    api = HfApi()
+    try:
+        logging.info(f"Attempting to delete files from HF: {file_paths_in_repo}")
+        # HfApi().delete_files expects list of strings, not string
+        paths_to_delete = file_paths_in_repo if isinstance(file_paths_in_repo, list) else [file_paths_in_repo]
+        api.delete_files(
+            repo_id=REPO_ID,
+            paths_in_repo=paths_to_delete,
+            repo_type="dataset",
+            token=HF_TOKEN_WRITE,
+            commit_message=f"Deleted files: {', '.join(paths_to_delete)}"
+        )
+        logging.info(f"Successfully deleted files from HF: {paths_to_delete}")
+        return True
+    except EntryNotFoundError:
+        logging.warning(f"Some files not found on HF during deletion: {paths_to_delete}. Considered as success.")
+        return True # If not found, it's effectively deleted or was never there.
+    except Exception as e:
+        logging.error(f"Error deleting files from Hugging Face: {e}", exc_info=True)
+        return False
+
+def delete_local_files(local_file_paths):
+    for local_path in local_file_paths:
+        try:
+            if os.path.exists(local_path):
+                os.remove(local_path)
+                logging.info(f"Locally deleted {local_path}")
+        except Exception as e:
+            logging.error(f"Error deleting local file {local_path}: {e}")
 
 
 def periodic_backup():
@@ -190,7 +249,7 @@ def periodic_backup():
     while True:
         time.sleep(backup_interval)
         logging.info("Starting periodic backup...")
-        upload_db_to_hf()
+        upload_db_to_hf() 
         logging.info("Periodic backup finished.")
 
 def load_data():
@@ -208,7 +267,7 @@ def load_data():
     except (FileNotFoundError, json.JSONDecodeError) as e:
         logging.warning(f"Error loading local data ({e}). Attempting download from HF.")
 
-    if download_db_from_hf(specific_file=DATA_FILE):
+    if download_db_from_hf(specific_file=DATA_FILE): # This will also attempt to download images referenced in DATA_FILE
         try:
             with open(DATA_FILE, 'r', encoding='utf-8') as file:
                 data = json.load(file)
@@ -244,7 +303,14 @@ 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() 
+        upload_db_to_hf(specific_file_local_path=DATA_FILE, specific_file_repo_path=DATA_FILE) # Upload DATA_FILE first
+        # Then upload all images referenced in it.
+        # The general upload_db_to_hf() without args will handle both DATA_FILE and its referenced images.
+        # For fine-grained control, could call: upload_db_to_hf() here without args
+        # to ensure images are also synced after DATA_FILE is updated.
+        # Current `upload_db_to_hf` will try to upload all referenced images if no specific_file args are given.
+        # So for just saving data, it's enough to upload DATA_FILE.
+        # The periodic backup or admin force upload will do a more thorough sync.
     except Exception as e:
         logging.error(f"Error saving data to {DATA_FILE}: {e}", exc_info=True)
 
@@ -252,7 +318,12 @@ def verify_telegram_auth_data(auth_data_str, bot_token):
     if not auth_data_str:
         return False, None
     
-    params = dict(urllib.parse.parse_qsl(auth_data_str))
+    params = {}
+    try:
+        params = dict(urllib.parse.parse_qsl(auth_data_str))
+    except Exception: # Broad exception for parsing issues
+        return False, None
+
     if 'hash' not in params:
         return False, None
 
@@ -276,6 +347,7 @@ def verify_telegram_auth_data(auth_data_str, bot_token):
             return False, None
     return False, None
 
+
 MAIN_APP_TEMPLATE = '''
 <!DOCTYPE html>
 <html lang="en">
@@ -286,132 +358,44 @@ MAIN_APP_TEMPLATE = '''
     <script src="https://telegram.org/js/telegram-web-app.js"></script>
     <style>
         :root {
-            --tg-theme-bg-color: #ffffff;
-            --tg-theme-text-color: #000000;
-            --tg-theme-hint-color: #999999;
-            --tg-theme-link-color: #007aff;
-            --tg-theme-button-color: #007aff;
-            --tg-theme-button-text-color: #ffffff;
-            --tg-theme-secondary-bg-color: #f0f0f0;
-            --tg-theme-header-bg-color: #efeff4;
-            --tg-theme-section-bg-color: #ffffff;
-            --tg-theme-section-header-text-color: #8e8e93;
-            --tg-theme-destructive-text-color: #ff3b30;
-            --tg-theme-accent-text-color: #007aff;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: var(--tg-theme-bg-color);
-            color: var(--tg-theme-text-color);
-            overscroll-behavior-y: none;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
+            --tg-theme-bg-color: #ffffff; --tg-theme-text-color: #000000; --tg-theme-hint-color: #999999;
+            --tg-theme-link-color: #007aff; --tg-theme-button-color: #007aff; --tg-theme-button-text-color: #ffffff;
+            --tg-theme-secondary-bg-color: #f0f0f0; --tg-theme-header-bg-color: #efeff4;
+            --tg-theme-section-bg-color: #ffffff; --tg-theme-section-header-text-color: #8e8e93;
+            --tg-theme-destructive-text-color: #ff3b30; --tg-theme-accent-text-color: #007aff;
         }
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; margin: 0; padding: 0; background-color: var(--tg-theme-bg-color); color: var(--tg-theme-text-color); overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
         .app-container { display: flex; flex-direction: column; min-height: 100vh; }
-        .header {
-            background-color: var(--tg-theme-header-bg-color);
-            padding: 10px 15px;
-            text-align: center;
-            font-weight: 600;
-            font-size: 17px;
-            border-bottom: 1px solid var(--tg-theme-secondary-bg-color);
-            position: sticky;
-            top: 0;
-            z-index: 100;
-        }
+        .header { background-color: var(--tg-theme-header-bg-color); padding: 10px 15px; text-align: center; font-weight: 600; font-size: 17px; border-bottom: 1px solid var(--tg-theme-secondary-bg-color); position: sticky; top: 0; z-index: 100; }
         .tabs { display: flex; background-color: var(--tg-theme-secondary-bg-color); padding: 5px; }
-        .tab-button {
-            flex: 1;
-            padding: 10px;
-            text-align: center;
-            cursor: pointer;
-            background: none;
-            border: none;
-            color: var(--tg-theme-hint-color);
-            font-size: 15px;
-            font-weight: 500;
-            border-bottom: 2px solid transparent;
-            transition: color 0.2s, border-bottom-color 0.2s;
-        }
+        .tab-button { flex: 1; padding: 10px; text-align: center; cursor: pointer; background: none; border: none; color: var(--tg-theme-hint-color); font-size: 15px; font-weight: 500; border-bottom: 2px solid transparent; 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; }
-        .list-item {
-            background-color: var(--tg-theme-section-bg-color);
-            border-radius: 8px;
-            padding: 12px 15px;
-            margin-bottom: 10px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-            cursor: pointer;
-            transition: background-color 0.2s;
-            display: flex;
-            align-items: flex-start;
-        }
+        .content { flex-grow: 1; padding: 15px; overflow-x: hidden; } /* overflow-x hidden for swipe */
+        .list-item { background-color: var(--tg-theme-section-bg-color); border-radius: 8px; padding: 12px 15px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); cursor: pointer; transition: background-color 0.2s; }
         .list-item:active { background-color: var(--tg-theme-secondary-bg-color); }
-        .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); }
+        .item-images-preview { display: flex; align-items: center; margin-top: 8px; }
+        .item-images-preview img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; margin-right: 8px; border: 1px solid var(--tg-theme-secondary-bg-color); }
+        .item-images-preview .image-count { font-size: 12px; color: var(--tg-theme-hint-color); background-color: var(--tg-theme-secondary-bg-color); padding: 2px 6px; border-radius: 4px; }
         .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 {
-            width: 100%;
-            padding: 10px;
-            border: 1px solid var(--tg-theme-secondary-bg-color);
-            border-radius: 6px;
-            font-size: 16px;
-            background-color: var(--tg-theme-bg-color);
-            color: var(--tg-theme-text-color);
-            box-sizing: border-box;
-        }
+        .form-group input, .form-group textarea, .form-group input[type="file"] { width: 100%; padding: 10px; border: 1px solid var(--tg-theme-secondary-bg-color); border-radius: 6px; font-size: 16px; background-color: var(--tg-theme-bg-color); 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-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;
-            right: 20px;
-            width: 56px;
-            height: 56px;
-            background-color: var(--tg-theme-button-color);
-            color: var(--tg-theme-button-text-color);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 24px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-            cursor: pointer;
-            z-index: 1000;
-            border: none;
-        }
+        .image-preview-item { position: relative; }
+        .image-preview-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; border: 1px solid var(--tg-theme-secondary-bg-color); }
+        .image-preview-item .delete-img-btn { position: absolute; top: -5px; right: -5px; background: var(--tg-theme-destructive-text-color); color: white; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+        .fab { position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; background-color: var(--tg-theme-button-color); color: var(--tg-theme-button-text-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); cursor: pointer; z-index: 1000; border: none; }
         .detail-view { padding: 15px; background-color: var(--tg-theme-section-bg-color); }
         .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); }
-        .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; } }
+        .image-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
+        .image-gallery img { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid var(--tg-theme-secondary-bg-color); }
         .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; }
@@ -437,41 +421,39 @@ MAIN_APP_TEMPLATE = '''
         let currentUser = null;
         let currentView = 'resumes';
         let currentItem = null;
-        let selectedFilesStore = [];
+        let currentItemImages = []; // For managing images in form
 
         function applyThemeParams() {
-            document.documentElement.style.setProperty('--tg-theme-bg-color', tg.themeParams.bg_color || '#ffffff');
-            document.documentElement.style.setProperty('--tg-theme-text-color', tg.themeParams.text_color || '#000000');
-            document.documentElement.style.setProperty('--tg-theme-hint-color', tg.themeParams.hint_color || '#999999');
-            document.documentElement.style.setProperty('--tg-theme-link-color', tg.themeParams.link_color || '#007aff');
-            document.documentElement.style.setProperty('--tg-theme-button-color', tg.themeParams.button_color || '#007aff');
-            document.documentElement.style.setProperty('--tg-theme-button-text-color', tg.themeParams.button_text_color || '#ffffff');
-            document.documentElement.style.setProperty('--tg-theme-secondary-bg-color', tg.themeParams.secondary_bg_color || '#f0f0f0');
-            document.documentElement.style.setProperty('--tg-theme-header-bg-color', tg.themeParams.header_bg_color || tg.themeParams.secondary_bg_color || '#efeff4');
-            document.documentElement.style.setProperty('--tg-theme-section-bg-color', tg.themeParams.section_bg_color || tg.themeParams.bg_color || '#ffffff');
-            document.documentElement.style.setProperty('--tg-theme-section-header-text-color', tg.themeParams.section_header_text_color || tg.themeParams.hint_color || '#8e8e93');
-            document.documentElement.style.setProperty('--tg-theme-destructive-text-color', tg.themeParams.destructive_text_color || '#ff3b30');
-            document.documentElement.style.setProperty('--tg-theme-accent-text-color', tg.themeParams.accent_text_color || tg.themeParams.link_color || '#007aff');
+            const theme = tg.themeParams;
+            document.documentElement.style.setProperty('--tg-theme-bg-color', theme.bg_color || '#ffffff');
+            document.documentElement.style.setProperty('--tg-theme-text-color', theme.text_color || '#000000');
+            document.documentElement.style.setProperty('--tg-theme-hint-color', theme.hint_color || '#999999');
+            document.documentElement.style.setProperty('--tg-theme-link-color', theme.link_color || '#007aff');
+            document.documentElement.style.setProperty('--tg-theme-button-color', theme.button_color || '#007aff');
+            document.documentElement.style.setProperty('--tg-theme-button-text-color', theme.button_text_color || '#ffffff');
+            document.documentElement.style.setProperty('--tg-theme-secondary-bg-color', theme.secondary_bg_color || '#f0f0f0');
+            document.documentElement.style.setProperty('--tg-theme-header-bg-color', theme.header_bg_color || theme.secondary_bg_color || '#efeff4');
+            document.documentElement.style.setProperty('--tg-theme-section-bg-color', theme.section_bg_color || theme.bg_color || '#ffffff');
+            document.documentElement.style.setProperty('--tg-theme-section-header-text-color', theme.section_header_text_color || theme.hint_color || '#8e8e93');
+            document.documentElement.style.setProperty('--tg-theme-destructive-text-color', theme.destructive_text_color || '#ff3b30');
+            document.documentElement.style.setProperty('--tg-theme-accent-text-color', theme.accent_text_color || theme.link_color || '#007aff');
         }
         
-        async function apiCall(endpoint, method = 'GET', body = null) {
+        async function apiCall(endpoint, method = 'GET', body = null, isFormData = false) {
             const headers = {};
-            if (tg.initData) {
-                headers['X-Telegram-Auth'] = tg.initData;
-            }
+            if (!isFormData) headers['Content-Type'] = 'application/json';
+            if (tg.initData) headers['X-Telegram-Auth'] = tg.initData;
+            
             const options = { method, headers };
-            if (body instanceof FormData) {
-                options.body = body;
-            } else if (body) {
-                headers['Content-Type'] = 'application/json';
-                options.body = JSON.stringify(body);
+            if (body) {
+                if (isFormData) options.body = body;
+                else 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}\`);
+                    const errorData = await response.json().catch(() => ({ error: 'Request failed, server returned non-JSON error.' }));
+                    throw new Error(errorData.error || `HTTP error ${response.status}`);
                 }
                 return response.json();
             } catch (error) {
@@ -484,111 +466,98 @@ 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 => \`
-                <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 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>
+            contentDiv.innerHTML = items.map(item => `
+                <div class="list-item" onclick="showDetailViewWrapper('${type}', '${item.id}')">
+                    <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>` : ''}
+                    <div class="item-images-preview">
+                        ${item.images && item.images.length > 0 ? `<img src="/${item.images[0]}" alt="Preview">` : ''}
+                        ${item.images && item.images.length > 1 ? `<span class="image-count">+${item.images.length - 1}</span>` : ''}
+                         ${item.images && item.images.length === 1 && !item.images[0] ? '' : ''} 
                     </div>
+                    <p class="meta">Posted by: @${item.user_telegram_username || 'anonymous'} on ${new Date(item.timestamp).toLocaleDateString()}</p>
                 </div>
-            \`).join('');
+            `).join('');
+        }
+        
+        function showDetailViewWrapper(type, id) {
+            tg.HapticFeedback.impactOccurred('light');
+            showDetailView(type, id);
+        }
+        
+        function showFormWrapper(type, itemToEdit = null) {
+            tg.HapticFeedback.impactOccurred('light');
+            showForm(type, itemToEdit);
         }
 
         function showDetailView(type, id) {
-            tg.HapticFeedback.impactOccurred('light');
             tg.BackButton.show();
             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 detailsHtml = \`<div class="detail-view"><h2>\${item.title || item.name}</h2>\`;
+                    let detailsHtml = `<div class="detail-view"><h2>${item.title || item.name}</h2>`;
                     
                     if (item.images && item.images.length > 0) {
-                        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>\`;
+                        detailsHtml += '<div class="image-gallery">';
+                        item.images.forEach(imgPath => {
+                            detailsHtml += `<img src="/${imgPath}" alt="Image for ${item.title || item.name}">`;
+                        });
+                        detailsHtml += '</div>';
                     }
 
                     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">\${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" style="color: var(--tg-theme-link-color);">${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.HapticFeedback.impactOccurred('light'); });
+                        tg.MainButton.onClick(() => showFormWrapper(type, item));
                         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;
-            selectedFilesStore = []; 
+            currentItemImages = itemToEdit && itemToEdit.images ? [...itemToEdit.images] : [];
+
             tg.BackButton.show();
             tg.BackButton.onClick(() => {
                 tg.HapticFeedback.impactOccurred('light');
@@ -598,120 +567,98 @@ MAIN_APP_TEMPLATE = '''
             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 (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>
-                \`;
+                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>
+                `;
             } 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 (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>
-                \`;
+                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>
+                `;
             } 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 (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 += `
+                    <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 += \`
+            formHtml += `
                 <div class="form-group">
-                    <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>
+                    <label for="item_images">Images (up to 10)</label>
+                    <input type="file" id="item_images" multiple accept="image/*" onchange="previewImages(event)">
+                    <div id="image_previews_container" class="image-preview-container"></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>\`;
+            `;
+            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 previewImages(event) {
+            const files = event.target.files;
+            const remainingSlots = 10 - currentItemImages.length;
+            
+            for (let i = 0; i < Math.min(files.length, remainingSlots); i++) {
+                const file = files[i];
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    // Store as object to differentiate new files (File object) from existing (string path)
+                    currentItemImages.push({ file: file, previewUrl: e.target.result }); 
+                    renderImagePreviews();
+                }
+                reader.readAsDataURL(file);
+            }
+            if (currentItemImages.length >= 10) {
+                tg.showAlert('Maximum 10 images allowed.');
+            }
+            // Clear the input value so the same file can be re-added if removed.
+            event.target.value = null; 
+        }
+
+        function renderImagePreviews() {
+            const container = document.getElementById('image_previews_container');
+            if (!container) return;
+            container.innerHTML = '';
+            currentItemImages.forEach((img, index) => {
+                const imgSrc = typeof img === 'string' ? '/' + img : img.previewUrl;
+                const previewItem = document.createElement('div');
+                previewItem.classList.add('image-preview-item');
+                previewItem.innerHTML = \`
+                    <img src="\${imgSrc}" alt="Preview">
+                    <button class="delete-img-btn" onclick="removeImage(\${index})">×</button>
+                \`;
+                container.appendChild(previewItem);
+            });
+        }
+
+        function removeImage(index) {
+            currentItemImages.splice(index, 1);
+            renderImagePreviews();
+            tg.HapticFeedback.impactOccurred('light');
+        }
+
 
         function handleSubmit(type, itemId = null) {
             const payload = {};
@@ -755,18 +702,21 @@ MAIN_APP_TEMPLATE = '''
             tg.MainButton.showProgress();
 
             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));
-            }
-
+            // Existing images (paths)
+            payload.images = currentItemImages.filter(img => typeof img === 'string');
+            formData.append('payload', JSON.stringify(payload));
+            
+            // New images (File objects)
+            currentItemImages.forEach(img => {
+                if (typeof img !== 'string' && img.file) { // It's a new file object
+                    formData.append('images', img.file);
+                }
+            });
 
             const method = itemId ? 'PUT' : 'POST';
-            const endpoint = itemId ? \`/api/\${type}/\${itemId}\` : \`/api/\${type}\`;
+            const endpoint = itemId ? `/api/${type}/${itemId}` : `/api/${type}`;
 
-            apiCall(endpoint, method, formData)
+            apiCall(endpoint, method, formData, true)
                 .then(response => {
                     tg.HapticFeedback.notificationOccurred('success');
                     tg.MainButton.hideProgress();
@@ -782,14 +732,15 @@ 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');
+            const activeTabButton = document.querySelector(\`.tab-button[data-tab="\${tabName}"]\`);
+            if (activeTabButton) activeTabButton.classList.add('active');
             
             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>\`;
@@ -800,25 +751,37 @@ MAIN_APP_TEMPLATE = '''
         let touchendX = 0;
         const swipeThreshold = 75; 
 
+        function handleTouchStart(event) {
+            touchstartX = event.changedTouches[0].screenX;
+        }
+
+        function handleTouchEnd(event) {
+            touchendX = event.changedTouches[0].screenX;
+            handleSwipeGesture();
+        }
+
         function handleSwipeGesture() {
-            const swipeDiff = touchendX - touchstartX;
-            if (Math.abs(swipeDiff) < swipeThreshold) return;
+            const deltaX = touchendX - touchstartX;
+            if (Math.abs(deltaX) < swipeThreshold) return; 
 
             const tabs = ['resumes', 'vacancies', 'freelance_offers'];
             let currentIndex = tabs.indexOf(currentView);
 
-            if (swipeDiff < 0) { 
+            if (deltaX < 0) { 
                 currentIndex = (currentIndex + 1) % tabs.length;
             } else { 
                 currentIndex = (currentIndex - 1 + tabs.length) % tabs.length;
             }
-            tg.HapticFeedback.impactOccurred('medium');
-            loadView(tabs[currentIndex]);
+            if (tabs[currentIndex] !== currentView) {
+                loadView(tabs[currentIndex]);
+                tg.HapticFeedback.selectionChanged();
+            }
         }
 
         async function init() {
             tg.ready();
             applyThemeParams();
+            tg.onEvent('themeChanged', applyThemeParams);
             tg.expand();
             tg.enableClosingConfirmation();
 
@@ -833,24 +796,19 @@ MAIN_APP_TEMPLATE = '''
             } catch (error) {
                 console.error("Auth error:", error);
                 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.impactOccurred('light');
                     loadView(button.dataset.tab);
+                    tg.HapticFeedback.impactOccurred('light');
                 });
             });
-            document.getElementById('fabButton').addEventListener('click', () => {
-                tg.HapticFeedback.impactOccurred('heavy');
-                showForm(currentView);
-            });
+            document.getElementById('fabButton').addEventListener('click', () => showFormWrapper(currentView));
             
             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});
+            mainContentEl.addEventListener('touchstart', handleTouchStart, { passive: true });
+            mainContentEl.addEventListener('touchend', handleTouchEnd, { passive: true });
 
             loadView('resumes');
         }
@@ -903,14 +861,14 @@ ADMIN_TEMPLATE = '''
         <div class="section">
             <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 & Uploads to HF</button>
+                <form method="POST" action="{{ url_for('force_upload_admin') }}" onsubmit="return confirm('Upload local data (including images) to Hugging Face? This will overwrite server data.');">
+                    <button type="submit" class="button button-primary">Upload All 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 & Uploads from HF</button>
+                <form method="POST" action="{{ url_for('force_download_admin') }}" onsubmit="return confirm('Download data (including images) from Hugging Face? This will overwrite local data.');">
+                    <button type="submit" class="button button-secondary">Download All 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;">Automatic backup runs every 30 minutes if HF_TOKEN_WRITE is set (uploads DB file and referenced images).</p>
         </div>
 
         <div class="section">
@@ -919,9 +877,9 @@ 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>
-                <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this resume?');">
+                <p>Posted: {{ resume.timestamp|truncate(19, True, '') }}</p>
+                <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this resume and its images?');">
                     <input type="hidden" name="item_type" value="resumes">
                     <input type="hidden" name="item_id" value="{{ resume.id }}">
                     <button type="submit" class="button button-danger">Delete</button>
@@ -938,9 +896,9 @@ 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>
-                <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this vacancy?');">
+                 <p>Images: {{ vacancy.images|length if vacancy.images else 0 }}</p>
+                <p>Posted: {{ vacancy.timestamp|truncate(19, True, '') }}</p>
+                <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this vacancy and its images?');">
                     <input type="hidden" name="item_type" value="vacancies">
                     <input type="hidden" name="item_id" value="{{ vacancy.id }}">
                     <button type="submit" class="button button-danger">Delete</button>
@@ -958,9 +916,9 @@ 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>
-                <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this freelance offer?');">
+                <p>Posted: {{ offer.timestamp|truncate(19, True, '') }}</p>
+                <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this freelance offer and its images?');">
                     <input type="hidden" name="item_type" value="freelance_offers">
                     <input type="hidden" name="item_id" value="{{ offer.id }}">
                     <button type="submit" class="button button-danger">Delete</button>
@@ -980,8 +938,9 @@ def main_app_view():
     return render_template_string(MAIN_APP_TEMPLATE)
 
 @app.route('/uploads/<path:filename>')
-def serve_upload(filename):
-    return send_from_directory(UPLOAD_DIR, filename)
+def uploaded_file(filename):
+    return send_from_directory(os.path.join(app.root_path, app.config['UPLOAD_FOLDER']), filename)
+
 
 @app.route('/api/auth_user', methods=['POST'])
 def auth_user():
@@ -993,41 +952,40 @@ def auth_user():
         else:
             return jsonify({"error": "Authentication data not provided"}), 401
 
-    is_valid, user_data_dict = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
+    is_valid, user_data_tg = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
 
-    if not is_valid or not user_data_dict:
+    if not is_valid or not user_data_tg:
         return jsonify({"error": "Invalid authentication data"}), 403
 
     data = load_data()
     users = data.get('users', {})
-    user_id_str = str(user_data_dict.get('id'))
+    user_id_str = str(user_data_tg.get('id'))
 
     if user_id_str not in users:
         users[user_id_str] = {
-            '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'),
+            'id': user_data_tg.get('id'),
+            'first_name': user_data_tg.get('first_name'),
+            'last_name': user_data_tg.get('last_name'),
+            'username': user_data_tg.get('username'),
+            'language_code': user_data_tg.get('language_code'),
+            'photo_url': user_data_tg.get('photo_url'),
             'first_seen': datetime.now().isoformat()
         }
     users[user_id_str]['last_seen'] = datetime.now().isoformat()
     data['users'] = users
-    save_data(data)
+    save_data(data) # Only saves DATA_FILE, image sync happens elsewhere or periodically
     
     return jsonify({"message": "User authenticated", "user": users[user_id_str]}), 200
 
-def get_authenticated_user(request_obj):
-    auth_data_str = request_obj.headers.get('X-Telegram-Auth')
+def get_authenticated_user(request_headers):
+    auth_data_str = request_headers.get('X-Telegram-Auth')
     if not auth_data_str:
         return 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
+    is_valid, user_data = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
+    if is_valid and user_data:
+        return user_data
     return None
 
-
 @app.route('/api/<item_type>', methods=['GET'])
 def get_items(item_type):
     if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
@@ -1036,7 +994,6 @@ 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']:
@@ -1047,19 +1004,21 @@ 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)
-    if not user:
-        return jsonify({"error": "Authentication required"}), 401
+    user = get_authenticated_user(request.headers)
+    if not user: return jsonify({"error": "Authentication required"}), 401
 
     if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
         return jsonify({"error": "Invalid item type"}), 400
     
-    req_data = request.form 
-    if not req_data:
-        return jsonify({"error": "No data provided"}), 400
+    if 'payload' not in request.form:
+        return jsonify({"error": "Missing payload in form data"}), 400
+    
+    try:
+        req_data = json.loads(request.form.get('payload'))
+    except json.JSONDecodeError:
+        return jsonify({"error": "Invalid JSON payload"}), 400
 
     new_item = {
         "id": str(uuid.uuid4()),
@@ -1069,189 +1028,170 @@ def create_item(item_type):
         "images": []
     }
 
-    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}"
+    uploaded_image_paths = []
+    uploaded_files = request.files.getlist('images')
+    if len(uploaded_files) > MAX_IMAGE_FILES:
+        return jsonify({"error": f"Maximum {MAX_IMAGE_FILES} images allowed."}), 400
+
+    for file in uploaded_files:
+        if file and allowed_file(file.filename):
+            filename = secure_filename(file.filename)
+            unique_filename = str(uuid.uuid4()) + os.path.splitext(filename)[1]
+            local_save_path = os.path.join(app.config['UPLOAD_FOLDER'], unique_filename)
+            
             try:
-                file_storage.save(os.path.join(UPLOAD_DIR, unique_filename))
-                new_item["images"].append(unique_filename)
+                file.save(local_save_path)
+                # Relative path for storage in JSON and for HF repo
+                repo_image_path = os.path.join(UPLOADS_DIR_NAME, unique_filename).replace("\\", "/")
+                uploaded_image_paths.append(repo_image_path)
+                # Upload this single image to HF immediately
+                upload_db_to_hf(specific_file_local_path=local_save_path, specific_file_repo_path=repo_image_path)
             except Exception as e:
-                logging.error(f"Failed to save uploaded file {unique_filename}: {e}")
-                return jsonify({"error": "Failed to save image"}), 500
+                logging.error(f"Failed to save or upload image {unique_filename}: {e}")
+                # Potentially cleanup already saved file if upload fails, or handle later
+                # For now, if save fails, it won't be added to new_item['images']
+        elif file: # File present but not allowed type
+            logging.warning(f"Skipped file with disallowed extension: {file.filename}")
 
 
+    new_item['images'] = uploaded_image_paths
+
     if item_type == 'resumes':
-        required_fields = ['name', 'title']
-        for field in required_fields:
-            if not req_data.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
-        new_item.update({
-            "name": req_data.get('name'), "title": req_data.get('title'),
-            "skills": req_data.get('skills', ''), "experience": req_data.get('experience', ''),
-            "education": req_data.get('education', ''), "contact": req_data.get('contact', ''),
-            "portfolio_link": req_data.get('portfolio_link', '')
-        })
+        new_item.update({k: req_data.get(k, '') for k in ['name', 'title', 'skills', 'experience', 'education', 'contact', 'portfolio_link']})
+        if not new_item['name'] or not new_item['title']: return jsonify({"error": "Missing name or title"}), 400
     elif item_type == 'vacancies':
-        required_fields = ['company_name', 'title']
-        for field in required_fields:
-            if not req_data.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
-        new_item.update({
-            "company_name": req_data.get('company_name'), "title": req_data.get('title'),
-            "description": req_data.get('description', ''), "requirements": req_data.get('requirements', ''),
-            "salary": req_data.get('salary', ''), "location": req_data.get('location', ''),
-            "contact": req_data.get('contact', '')
-        })
+        new_item.update({k: req_data.get(k, '') for k in ['company_name', 'title', 'description', 'requirements', 'salary', 'location', 'contact']})
+        if not new_item['company_name'] or not new_item['title']: return jsonify({"error": "Missing company name or title"}), 400
     elif item_type == 'freelance_offers':
-        required_fields = ['title']
-        for field in required_fields:
-            if not req_data.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
-        new_item.update({
-            "title": req_data.get('title'), "description": req_data.get('description', ''),
-            "budget": req_data.get('budget', ''), "deadline": req_data.get('deadline', ''),
-            "skills_needed": req_data.get('skills_needed', ''), "contact": req_data.get('contact', '')
-        })
+        new_item.update({k: req_data.get(k, '') for k in ['title', 'description', 'budget', 'deadline', 'skills_needed', 'contact']})
+        if not new_item['title']: return jsonify({"error": "Missing title"}), 400
     
     data = load_data()
     data[item_type].append(new_item)
-    save_data(data)
+    save_data(data) # This saves DATA_FILE and uploads it. Images already uploaded one by one.
     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)
+    user = get_authenticated_user(request.headers)
     if not user: return jsonify({"error": "Authentication required"}), 401
 
     if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
         return jsonify({"error": "Invalid item type"}), 400
     
-    req_data = request.form
-    if not req_data: return jsonify({"error": "No data provided"}), 400
+    if 'payload' not in request.form: return jsonify({"error": "Missing payload"}), 400
+    try:
+        req_data = json.loads(request.form.get('payload'))
+    except json.JSONDecodeError: return jsonify({"error": "Invalid JSON payload"}), 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
+    item_index = next((idx for idx, i in enumerate(items_list) if i['id'] == item_id), -1)
     
-    if item_index == -1 or original_item is None: return jsonify({"error": "Item not found"}), 404
+    if item_index == -1: 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()
 
-    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', [])
+    # Image handling:
+    # `req_data['images']` contains paths of existing images to keep.
+    # `request.files.getlist('images')` contains newly uploaded files.
+    
+    existing_images_to_keep = set(req_data.get('images', []))
+    current_images_in_item = set(original_item.get('images', []))
+    
+    images_to_delete_paths = list(current_images_in_item - existing_images_to_keep)
+    
+    # Delete images from HF and local that are no longer needed
+    if images_to_delete_paths:
+        delete_files_from_hf(images_to_delete_paths)
+        local_paths_to_delete = [os.path.join(app.root_path, p) for p in images_to_delete_paths]
+        delete_local_files(local_paths_to_delete)
 
+    final_image_list = list(existing_images_to_keep)
+    
+    newly_uploaded_files = request.files.getlist('images')
+    if len(final_image_list) + len(newly_uploaded_files) > MAX_IMAGE_FILES:
+        return jsonify({"error": f"Total images cannot exceed {MAX_IMAGE_FILES}"}), 400
+
+    for file in newly_uploaded_files:
+        if file and allowed_file(file.filename):
+            filename = secure_filename(file.filename)
+            unique_filename = str(uuid.uuid4()) + os.path.splitext(filename)[1]
+            local_save_path = os.path.join(app.config['UPLOAD_FOLDER'], unique_filename)
+            try:
+                file.save(local_save_path)
+                repo_image_path = os.path.join(UPLOADS_DIR_NAME, unique_filename).replace("\\", "/")
+                final_image_list.append(repo_image_path)
+                upload_db_to_hf(specific_file_local_path=local_save_path, specific_file_repo_path=repo_image_path)
+            except Exception as e:
+                logging.error(f"Failed to save or upload new image during update {unique_filename}: {e}")
+        elif file:
+            logging.warning(f"Skipped file with disallowed extension during update: {file.filename}")
+            
+    updated_item['images'] = final_image_list
 
+    # Update text fields
     if item_type == 'resumes':
-        updated_item.update({
-            "name": req_data.get('name', original_item.get('name')), 
-            "title": req_data.get('title', original_item.get('title')),
-            "skills": req_data.get('skills', original_item.get('skills')), 
-            "experience": req_data.get('experience', original_item.get('experience')),
-            "education": req_data.get('education', original_item.get('education')), 
-            "contact": req_data.get('contact', original_item.get('contact')),
-            "portfolio_link": req_data.get('portfolio_link', original_item.get('portfolio_link'))
-        })
+        for k in ['name', 'title', 'skills', 'experience', 'education', 'contact', 'portfolio_link']:
+            if k in req_data: updated_item[k] = req_data[k]
     elif item_type == 'vacancies':
-        updated_item.update({
-            "company_name": req_data.get('company_name', original_item.get('company_name')), 
-            "title": req_data.get('title', original_item.get('title')),
-            "description": req_data.get('description', original_item.get('description')), 
-            "requirements": req_data.get('requirements', original_item.get('requirements')),
-            "salary": req_data.get('salary', original_item.get('salary')), 
-            "location": req_data.get('location', original_item.get('location')),
-            "contact": req_data.get('contact', original_item.get('contact'))
-        })
+        for k in ['company_name', 'title', 'description', 'requirements', 'salary', 'location', 'contact']:
+            if k in req_data: updated_item[k] = req_data[k]
     elif item_type == 'freelance_offers':
-         updated_item.update({
-            "title": req_data.get('title', original_item.get('title')), 
-            "description": req_data.get('description', original_item.get('description')),
-            "budget": req_data.get('budget', original_item.get('budget')), 
-            "deadline": req_data.get('deadline', original_item.get('deadline')),
-            "skills_needed": req_data.get('skills_needed', original_item.get('skills_needed')), 
-            "contact": req_data.get('contact', original_item.get('contact'))
-        })
+        for k in ['title', 'description', 'budget', 'deadline', 'skills_needed', 'contact']:
+            if k in req_data: updated_item[k] = req_data[k]
 
     data[item_type][item_index] = updated_item
     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)
-    if not user: return jsonify({"error": "Authentication required"}), 401
-
-    if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
-        return jsonify({"error": "Invalid item type"}), 400
-
+def _delete_item_logic(item_type, item_id, user_id_check=None):
     data = load_data()
     items_list = data.get(item_type, [])
     
     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 not item_to_delete:
+        return False, "Item not found"
 
-    if str(item_to_delete.get('user_id')) != str(user.get('id')):
-        return jsonify({"error": "Forbidden: You can only delete your own items"}), 403
+    if user_id_check and str(item_to_delete.get('user_id')) != str(user_id_check):
+        return False, "Forbidden: You can only delete your own items"
 
-    images_to_remove = item_to_delete.get("images", [])
+    images_to_delete_paths = item_to_delete.get('images', [])
     
     data[item_type] = [i for i in items_list if i['id'] != item_id]
     
-    save_data(data) 
+    save_data(data) # Save updated DATA_FILE and upload it to HF
 
-    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
+    if images_to_delete_paths:
+        delete_files_from_hf(images_to_delete_paths)
+        local_paths_to_delete = [os.path.join(app.root_path, p) for p in images_to_delete_paths]
+        delete_local_files(local_paths_to_delete)
+        
+    return True, "Item deleted successfully"
+
+@app.route('/api/<item_type>/<item_id>', methods=['DELETE'])
+def delete_item(item_type, item_id):
+    user = get_authenticated_user(request.headers)
+    if not user: return jsonify({"error": "Authentication required"}), 401
+
+    if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
+        return jsonify({"error": "Invalid item type"}), 400
+
+    success, message = _delete_item_logic(item_type, item_id, user_id_check=str(user.get('id')))
+    
+    if success:
+        return jsonify({"message": message}), 200
+    else:
+        if "Forbidden" in message:
+            return jsonify({"error": message}), 403
+        return jsonify({"error": message}), 404
 
 
 @app.route('/admin', methods=['GET'])
@@ -1271,34 +1211,20 @@ def admin_delete_item():
         flash('Invalid item type or ID for deletion.', 'error')
         return redirect(url_for('admin_panel'))
 
-    data = load_data()
-    items_list = data.get(item_type, [])
-    
-    item_to_delete = next((i for i in items_list if i['id'] == item_id), None)
+    success, message = _delete_item_logic(item_type, item_id) # No user_id_check for admin
 
-    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)
-        
-        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')
+    if success:
+        flash(f'{item_type.capitalize()[:-1]} and associated images deleted successfully.', 'success')
     else:
-        flash('Item not found or already deleted.', 'warning')
+        flash(f'Error deleting item: {message}', 'error')
     return redirect(url_for('admin_panel'))
 
 @app.route('/admin/force_upload', methods=['POST'])
 def force_upload_admin():
-    logging.info("Admin forcing upload to Hugging Face...")
+    logging.info("Admin forcing full upload to Hugging Face...")
     try:
-        upload_db_to_hf()
-        flash("Data and uploads successfully uploaded to Hugging Face.", 'success')
+        upload_db_to_hf() # This will upload DATA_FILE and all images referenced in it
+        flash("Data and referenced images 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')
@@ -1306,13 +1232,13 @@ def force_upload_admin():
 
 @app.route('/admin/force_download', methods=['POST'])
 def force_download_admin():
-    logging.info("Admin forcing download from Hugging Face...")
+    logging.info("Admin forcing full download from Hugging Face...")
     try:
-        if download_db_from_hf():
-            flash("Data and uploads successfully downloaded from Hugging Face. Local files updated.", 'success')
+        if download_db_from_hf(): # This will download DATA_FILE and all images referenced in it
+            flash("Data and referenced images successfully downloaded from Hugging Face. Local files updated.", 'success')
             load_data() 
         else:
-            flash("Failed to download data/uploads from Hugging Face. Check logs.", 'error')
+            flash("Failed to download data/images 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')