Update app.py

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, render_template_string, request, jsonify, redirect, url_for
+from flask import Flask, render_template_string, request, redirect, url_for, jsonify, session, flash
 import json
 import os
 import logging
@@ -13,29 +13,26 @@ import requests
 import uuid
 import hmac
 import hashlib
-from urllib.parse import unquote, parse_qs
 
 load_dotenv()
 
 app = Flask(__name__)
-app.secret_key = os.getenv("FLASK_SECRET_KEY", 'tontalent_secret_key_telegram_mini_app_12345')
-DATA_FILE = 'tontalent_data.json'
-SYNC_FILES = [DATA_FILE]
+app.secret_key = os.getenv("FLASK_SECRET_KEY", 'tontalent_secret_key_telegram_app_12345')
+TONTALENT_DATA_FILE = 'tontalent_data.json'
 
-REPO_ID = os.getenv("HF_REPO_ID", "Kgshop/tontalent_data_store") # Example, user should set this
-HF_TOKEN_WRITE = os.getenv("HF_TOKEN_WRITE") # Renamed from HF_TOKEN for clarity
-HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
+SYNC_FILES = [TONTALENT_DATA_FILE]
 
-# Telegram Bot Token for initData verification
-TELEGRAM_BOT_TOKEN = "7549355625:AAGhdbf6x1JEzpH0mUtuxTF83Soi7MFVNZ8"
+REPO_ID = "Kgshop/tontalent2"
+HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
+HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
+BOT_TOKEN = "7549355625:AAGhdbf6x1JEzpH0mUtuxTF83Soi7MFVNZ8"
 
 DOWNLOAD_RETRIES = 3
 DOWNLOAD_DELAY = 5
 
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
 
-# --- Hugging Face Sync Functions (largely unchanged, adapted for single data file) ---
-
+# --- Hugging Face Sync Functions (largely unchanged, adapted for TONTALENT_DATA_FILE) ---
 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.")
@@ -62,15 +59,15 @@ def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWN
             except HfHubHTTPError as e:
                 if e.response.status_code == 404:
                     logging.warning(f"File {file_name} not found in repo {REPO_ID} (404). Skipping this file.")
-                    if attempt == 0 and not os.path.exists(file_name) and file_name == DATA_FILE:
+                    if attempt == 0 and not os.path.exists(file_name) and file_name == TONTALENT_DATA_FILE:
                         try:
                             with open(file_name, 'w', encoding='utf-8') as f:
-                                json.dump({'resumes': [], 'vacancies': [], 'freelance_offers': []}, f)
-                            logging.info(f"Created empty local file {file_name} as it was not on HF.")
+                                json.dump({'resumes': {}, 'vacancies': {}, 'freelance_offers': {}}, f)
+                            logging.info(f"Created empty local file {file_name} because it was not found on HF.")
                         except Exception as create_e:
                             logging.error(f"Failed to create empty local file {file_name}: {create_e}")
-                    success = False # File not found is not a success for the file itself
-                    break 
+                    success = False # Should be false if file not found unless it's the initial creation
+                    break # Don't retry 404
                 else:
                     logging.error(f"HTTP error downloading {file_name} (Attempt {attempt + 1}): {e}. Retrying in {delay}s...")
             except requests.exceptions.RequestException as e:
@@ -81,12 +78,12 @@ def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWN
         if not success:
             logging.error(f"Failed to download {file_name} after {retries + 1} attempts.")
             all_successful = False
-    logging.info(f"Download process finished. Overall success for requested files: {all_successful}")
+    logging.info(f"Download process finished. Overall success: {all_successful}")
     return all_successful
 
 def upload_db_to_hf(specific_file=None):
     if not HF_TOKEN_WRITE:
-        logging.warning("HF_TOKEN_WRITE not set. Skipping upload to Hugging Face.")
+        logging.warning("HF_TOKEN (for writing) not set. Skipping upload to Hugging Face.")
         return
     try:
         api = HfApi()
@@ -118,53 +115,43 @@ def periodic_backup():
         logging.info("Periodic backup finished.")
 
 # --- Data Loading and Saving Functions ---
-
 def load_data():
-    default_data = {'resumes': [], 'vacancies': [], 'freelance_offers': []}
+    default_data = {'resumes': {}, 'vacancies': {}, 'freelance_offers': {}}
     try:
-        with open(DATA_FILE, 'r', encoding='utf-8') as file:
+        with open(TONTALENT_DATA_FILE, 'r', encoding='utf-8') as file:
             data = json.load(file)
-        logging.info(f"Local data loaded successfully from {DATA_FILE}")
-        if not isinstance(data, dict):
-             logging.warning(f"Local {DATA_FILE} is not a dictionary. Attempting download.")
-             raise FileNotFoundError # Trigger download
+        if not isinstance(data, dict): raise FileNotFoundError
         for key in default_data:
-            if key not in data: data[key] = []
+            if key not in data: data[key] = default_data[key]
+            if not isinstance(data[key], dict): data[key] = default_data[key] # Ensure correct type
+        logging.info(f"Local data loaded successfully from {TONTALENT_DATA_FILE}")
         return data
-    except FileNotFoundError:
-        logging.warning(f"Local file {DATA_FILE} not found. Attempting download from HF.")
-    except json.JSONDecodeError:
-        logging.error(f"Error decoding JSON in local {DATA_FILE}. File might be corrupt. Attempting download.")
+    except (FileNotFoundError, json.JSONDecodeError) as e:
+        logging.warning(f"Error loading local file {TONTALENT_DATA_FILE} ({e}). Attempting download from HF.")
 
-    if download_db_from_hf(specific_file=DATA_FILE):
+    if download_db_from_hf(specific_file=TONTALENT_DATA_FILE):
         try:
-            with open(DATA_FILE, 'r', encoding='utf-8') as file:
+            with open(TONTALENT_DATA_FILE, 'r', encoding='utf-8') as file:
                 data = json.load(file)
-            logging.info(f"Data loaded successfully from {DATA_FILE} after download.")
             if not isinstance(data, dict):
-                 logging.error(f"Downloaded {DATA_FILE} is not a dictionary. Using default.")
+                 logging.error(f"Downloaded {TONTALENT_DATA_FILE} is not a dictionary. Using default.")
                  return default_data
             for key in default_data:
-                if key not in data: data[key] = []
+                if key not in data: data[key] = default_data[key]
+                if not isinstance(data[key], dict): data[key] = default_data[key]
+            logging.info(f"Data loaded successfully from {TONTALENT_DATA_FILE} after download.")
             return data
-        except FileNotFoundError:
-             logging.error(f"File {DATA_FILE} still not found even after download reported success. Using default.")
-             return default_data
-        except json.JSONDecodeError:
-            logging.error(f"Error decoding JSON in downloaded {DATA_FILE}. Using default.")
-            return default_data
-        except Exception as e:
-            logging.error(f"Unknown error loading downloaded {DATA_FILE}: {e}. Using default.", exc_info=True)
+        except Exception as ex:
+            logging.error(f"Error loading downloaded {TONTALENT_DATA_FILE}: {ex}. Using default.", exc_info=True)
             return default_data
     else:
-        logging.error(f"Failed to download {DATA_FILE} from HF after retries. Using empty default data structure.")
-        if not os.path.exists(DATA_FILE):
+        logging.error(f"Failed to download {TONTALENT_DATA_FILE} from HF. Using default data structure.")
+        if not os.path.exists(TONTALENT_DATA_FILE):
             try:
-                with open(DATA_FILE, 'w', encoding='utf-8') as f:
-                    json.dump(default_data, f)
-                logging.info(f"Created empty local file {DATA_FILE} after failed download.")
+                with open(TONTALENT_DATA_FILE, 'w', encoding='utf-8') as f: json.dump(default_data, f)
+                logging.info(f"Created empty local file {TONTALENT_DATA_FILE} after failed download.")
             except Exception as create_e:
-                logging.error(f"Failed to create empty local file {DATA_FILE}: {create_e}")
+                logging.error(f"Failed to create empty local file {TONTALENT_DATA_FILE}: {create_e}")
         return default_data
 
 def save_data(data):
@@ -172,64 +159,41 @@ def save_data(data):
         if not isinstance(data, dict):
             logging.error("Attempted to save invalid data structure (not a dict). Aborting save.")
             return
-        default_keys = ['resumes', 'vacancies', 'freelance_offers']
-        for key in default_keys:
-            if key not in data: data[key] = []
-
-        with open(DATA_FILE, 'w', encoding='utf-8') as file:
+        for key in ['resumes', 'vacancies', 'freelance_offers']: # Ensure keys exist
+            if key not in data: data[key] = {}
+        
+        with open(TONTALENT_DATA_FILE, 'w', encoding='utf-8') as file:
             json.dump(data, file, ensure_ascii=False, indent=4)
-        logging.info(f"Data successfully saved to {DATA_FILE}")
-        upload_db_to_hf(specific_file=DATA_FILE)
+        logging.info(f"Data successfully saved to {TONTALENT_DATA_FILE}")
+        upload_db_to_hf(specific_file=TONTALENT_DATA_FILE)
     except Exception as e:
-        logging.error(f"Error saving data to {DATA_FILE}: {e}", exc_info=True)
-
-# --- Telegram InitData Verification ---
-def verify_telegram_init_data(init_data_str):
-    if not init_data_str:
-        logging.warning("Verification_failed: init_data_str is empty")
-        return None
-
-    parsed_data = parse_qs(init_data_str)
-    
-    received_hash = parsed_data.pop('hash', [None])[0]
-    if not received_hash:
-        logging.warning("Verification_failed: hash is missing from init_data")
-        return None
-
-    data_check_string_parts = []
-    for key in sorted(parsed_data.keys()):
-        # Ensure values are strings, especially 'user' which can be JSON
-        value = parsed_data[key][0]
-        data_check_string_parts.append(f"{key}={value}")
-    
-    data_check_string = "\n".join(data_check_string_parts)
+        logging.error(f"Error saving data to {TONTALENT_DATA_FILE}: {e}", exc_info=True)
 
+# --- Telegram Authentication ---
+def validate_telegram_data(init_data_str):
     try:
-        secret_key = hmac.new("WebAppData".encode(), TELEGRAM_BOT_TOKEN.encode(), hashlib.sha256).digest()
+        params = dict(kv.split('=', 1) for kv in init_data_str.split('&'))
+        hash_received = params.pop('hash', None)
+        if not hash_received: return None
+
+        data_check_string = "\n".join(sorted([f"{k}={v}" for k, v in params.items()]))
+        
+        secret_key = hmac.new("WebAppData".encode(), BOT_TOKEN.encode(), hashlib.sha256).digest()
         calculated_hash = hmac.new(secret_key, data_check_string.encode(), hashlib.sha256).hexdigest()
+
+        if calculated_hash == hash_received:
+            user_data_json = params.get('user')
+            if user_data_json:
+                return json.loads(requests.utils.unquote(user_data_json)) # Telegram user data needs unquoting
+            return {}
+        return None
     except Exception as e:
-        logging.error(f"Error during HMAC calculation: {e}")
+        logging.error(f"Error validating Telegram data: {e}", exc_info=True)
         return None
 
-    if calculated_hash == received_hash:
-        user_data_str = parsed_data.get('user', [None])[0]
-        if user_data_str:
-            try:
-                user_obj = json.loads(unquote(user_data_str))
-                logging.info(f"Telegram user verified: ID {user_obj.get('id')}")
-                return user_obj
-            except json.JSONDecodeError as e:
-                logging.error(f"Failed to decode user data JSON: {e} - Data: {user_data_str}")
-                return None # Invalid user JSON
-        logging.warning("Verification_failed: user data is missing though hash is valid")
-        return {} # Valid hash, but no user data (should not happen with standard initData)
-    
-    logging.warning(f"Verification_failed: Hashes do not match. Calculated: {calculated_hash}, Received: {received_hash}")
-    logging.debug(f"Data check string for failed hash: {data_check_string}")
-    return None
-
 # --- Templates ---
-MAIN_APP_TEMPLATE = """
+# Base template including Telegram WebApp JS and basic styling
+BASE_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -237,705 +201,1020 @@ MAIN_APP_TEMPLATE = """
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <title>TonTalent</title>
     <script src="https://telegram.org/js/telegram-web-app.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <style>
-        :root {
-            --tg-theme-bg-color: var(--tg-theme-bg-color, #ffffff);
-            --tg-theme-text-color: var(--tg-theme-text-color, #000000);
-            --tg-theme-hint-color: var(--tg-theme-hint-color, #999999);
-            --tg-theme-link-color: var(--tg-theme-link-color, #2481cc);
-            --tg-theme-button-color: var(--tg-theme-button-color, #2481cc);
-            --tg-theme-button-text-color: var(--tg-theme-button-text-color, #ffffff);
-            --tg-theme-secondary-bg-color: var(--tg-theme-secondary-bg-color, #f2f2f2);
-            --tg-theme-header-bg-color: var(--tg-theme-header-bg-color, #ffffff); /* Added for header */
-            --tg-theme-accent-text-color: var(--tg-theme-accent-text-color, #2481cc); /* Added for accents */
-
-
-            --border-color: rgba(0, 0, 0, 0.1);
-            --border-radius-s: 8px;
-            --border-radius-m: 12px;
-            --padding-s: 8px;
-            --padding-m: 16px;
-            --padding-l: 24px;
-            --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-        }
-        body.dark {
-             --border-color: rgba(255, 255, 255, 0.15);
-        }
-
-        * { box-sizing: border-box; margin: 0; padding: 0; }
-        body {
-            font-family: var(--font-family);
-            background-color: var(--tg-theme-bg-color);
-            color: var(--tg-theme-text-color);
-            overscroll-behavior-y: none;
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
+        :root {{
+            --tg-theme-bg-color: {{ '{background_color}' if '{background_color}' != 'None' else '#ffffff' }};
+            --tg-theme-text-color: {{ '{text_color}' if '{text_color}' != 'None' else '#000000' }};
+            --tg-theme-hint-color: {{ '{hint_color}' if '{hint_color}' != 'None' else '#999999' }};
+            --tg-theme-link-color: {{ '{link_color}' if '{link_color}' != 'None' else '#2481cc' }};
+            --tg-theme-button-color: {{ '{button_color}' if '{button_color}' != 'None' else '#2481cc' }};
+            --tg-theme-button-text-color: {{ '{button_text_color}' if '{button_text_color}' != 'None' else '#ffffff' }};
+            --tg-theme-secondary-bg-color: {{ '{secondary_bg_color}' if '{secondary_bg_color}' != 'None' else '#f0f0f0' }};
+            --tg-header-color: {{ '{header_color}' if '{header_color}' != 'None' else '#ffffff' }};
+            --tg-accent-text-color: {{ '{accent_text_color}' if '{accent_text_color}' != 'None' else '#2481cc' }};
+            --tg-section-bg-color: {{ '{section_bg_color}' if '{section_bg_color}' != 'None' else '#ffffff' }};
+            --tg-section-header-text-color: {{ '{section_header_text_color}' if '{section_header_text_color}' != 'None' else '#000000'}};
+            --tg-destructive-text-color: {{ '{destructive_text_color}' if '{destructive_text_color}' != 'None' else '#ff3b30' }};
+
+            --border-color: #e0e0e0;
+            --card-shadow: 0 1px 3px rgba(0,0,0,0.05);
+            --border-radius: 12px;
+        }}
+        body {{
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
             margin: 0;
-            padding: 0;
-        }
-        .app-container {
-            display: flex;
-            flex-direction: column;
-            flex-grow: 1;
-            overflow: hidden;
-        }
-        .main-header {
-            background-color: var(--tg-theme-header-bg-color);
-            padding: 10px var(--padding-m);
-            border-bottom: 1px solid var(--border-color);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            position: sticky;
-            top: 0;
-            z-index: 100;
-        }
-        .main-header h1 {
-            font-size: 1.5em;
-            font-weight: 600;
+            padding: 15px;
+            background-color: var(--tg-theme-bg-color);
             color: var(--tg-theme-text-color);
-        }
-        .add-button {
-            background-color: var(--tg-theme-button-color);
-            color: var(--tg-theme-button-text-color);
-            border: none;
-            padding: 8px 12px;
-            border-radius: var(--border-radius-s);
-            font-size: 1.2em;
-            cursor: pointer;
-        }
-        .tab-navigation {
-            display: flex;
-            justify-content: space-around;
-            background-color: var(--tg-theme-secondary-bg-color);
-            border-top: 1px solid var(--border-color);
-            padding: var(--padding-s) 0;
-            position: sticky;
-            bottom: 0;
-            z-index: 100;
-        }
-        .tab-button {
-            flex: 1;
-            padding: 12px 0;
-            background: none;
-            border: none;
-            color: var(--tg-theme-hint-color);
-            font-size: 0.9em;
-            font-weight: 500;
-            cursor: pointer;
-            transition: color 0.2s ease;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 4px;
-        }
-        .tab-button i { font-size: 1.3em; }
-        .tab-button.active {
-            color: var(--tg-theme-button-color); /* Use button color for active tab */
-        }
-        .content-area {
-            flex-grow: 1;
-            padding: var(--padding-m);
-            overflow-y: auto;
-            -webkit-overflow-scrolling: touch;
-        }
-        .item-card {
+            line-height: 1.5;
+            font-size: 16px;
+            overscroll-behavior-y: none; /* Prevents pull-to-refresh */
+        }}
+        .dark {{
+            --border-color: #3a3a3c;
+             /* Add more dark mode specific overrides if needed */
+        }}
+        .container {{ max-width: 600px; margin: 0 auto; }}
+        .header {{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }}
+        .header h1 {{ font-size: 24px; font-weight: 600; margin: 0; color: var(--tg-theme-text-color); }}
+        .card {{
             background-color: var(--tg-theme-secondary-bg-color);
-            border-radius: var(--border-radius-m);
-            padding: var(--padding-m);
-            margin-bottom: var(--padding-m);
-            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+            border-radius: var(--border-radius);
+            padding: 15px;
+            margin-bottom: 15px;
+            box-shadow: var(--card-shadow);
             border: 1px solid var(--border-color);
-        }
-        body.dark .item-card {
-            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
-        }
-        .item-card h3 {
-            font-size: 1.2em;
-            font-weight: 600;
-            color: var(--tg-theme-text-color);
-            margin-bottom: var(--padding-s);
-        }
-        .item-card p {
-            font-size: 0.95em;
-            color: var(--tg-theme-text-color);
-            margin-bottom: 6px;
-            line-height: 1.5;
-            white-space: pre-wrap;
-            word-break: break-word;
-        }
-        .item-card .meta-info {
-            font-size: 0.8em;
-            color: var(--tg-theme-hint-color);
-            margin-top: var(--padding-s);
-        }
-        .item-card .meta-info span { margin-right: 10px; }
-        .item-card strong { font-weight: 500; }
-
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1000;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            overflow: auto;
-            background-color: rgba(0,0,0,0.5);
-            backdrop-filter: blur(5px);
-        }
-        .modal-content {
-            background-color: var(--tg-theme-bg-color);
-            margin: 10% auto;
-            padding: var(--padding-l);
-            border-radius: var(--border-radius-m);
-            width: 90%;
-            max-width: 500px;
-            position: relative;
-        }
-        .modal-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: var(--padding-m);
-            padding-bottom: var(--padding-s);
-            border-bottom: 1px solid var(--border-color);
-        }
-        .modal-header h2 {
-            font-size: 1.3em;
-            font-weight: 600;
-        }
-        .close-button {
-            font-size: 1.8em;
-            font-weight: 300;
-            color: var(--tg-theme-hint-color);
-            background: none;
+        }}
+        .card h2 {{ margin-top: 0; font-size: 18px; font-weight: 600; color: var(--tg-theme-text-color); }}
+        .card p {{ margin-bottom: 8px; font-size: 15px; color: var(--tg-theme-hint-color); }}
+        .card p strong {{ color: var(--tg-theme-text-color); }}
+        .card .meta {{ font-size: 13px; color: var(--tg-theme-hint-color); margin-bottom: 10px; }}
+        .card .actions {{ margin-top: 15px; display: flex; gap: 10px; }}
+        .button, button {{
+            display: inline-block;
+            padding: 10px 20px;
+            font-size: 16px;
+            font-weight: 500;
+            color: var(--tg-theme-button-text-color);
+            background-color: var(--tg-theme-button-color);
             border: none;
+            border-radius: 8px;
+            text-decoration: none;
             cursor: pointer;
-            line-height: 1;
-        }
-        .form-group {
-            margin-bottom: var(--padding-m);
-        }
-        .form-group label {
-            display: block;
-            font-size: 0.9em;
-            font-weight: 500;
-            margin-bottom: var(--padding-s);
-            color: var(--tg-theme-text-color);
-        }
-        .form-group input[type="text"],
-        .form-group input[type="email"],
-        .form-group input[type="tel"],
-        .form-group textarea,
-        .form-group select {
+            text-align: center;
+            transition: opacity 0.2s;
+        }}
+        button:disabled {{ opacity: 0.6; cursor: not-allowed; }}
+        .button-secondary {{ background-color: var(--tg-theme-secondary-bg-color); color: var(--tg-theme-link-color); border: 1px solid var(--tg-theme-link-color); }}
+        .button-destructive {{ background-color: var(--tg-destructive-text-color); color: #fff; }}
+        a {{ color: var(--tg-theme-link-color); text-decoration: none; }}
+        .form-group {{ margin-bottom: 15px; }}
+        .form-group label {{ display: block; font-weight: 500; margin-bottom: 5px; font-size: 15px; color: var(--tg-theme-text-color); }}
+        .form-group input[type="text"], .form-group input[type="number"], .form-group input[type="email"], .form-group input[type="tel"], .form-group textarea, .form-group select {{
             width: 100%;
             padding: 12px;
+            font-size: 16px;
             border: 1px solid var(--border-color);
-            border-radius: var(--border-radius-s);
-            font-size: 1em;
-            font-family: var(--font-family);
+            border-radius: 8px;
+            box-sizing: border-box;
             background-color: var(--tg-theme-secondary-bg-color);
             color: var(--tg-theme-text-color);
-        }
-        .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
-            border-color: var(--tg-theme-button-color);
-            outline: none;
-            box-shadow: 0 0 0 2px var(--tg-theme-button-color-alpha, rgba(36, 129, 204, 0.2));
-        }
-        .form-group textarea {
-            min-height: 100px;
-            resize: vertical;
-        }
-        .submit-button {
-            background-color: var(--tg-theme-button-color);
-            color: var(--tg-theme-button-text-color);
-            border: none;
-            padding: 12px 20px;
-            border-radius: var(--border-radius-s);
-            font-size: 1em;
-            font-weight: 500;
+        }}
+        .form-group input:focus, .form-group textarea:focus {{ border-color: var(--tg-theme-link-color); outline: none; }}
+        .form-group textarea {{ min-height: 100px; resize: vertical; }}
+        .tabs {{ display: flex; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); }}
+        .tab-button {{
+            padding: 10px 15px;
             cursor: pointer;
-            width: 100%;
-            transition: background-color 0.2s ease;
-        }
-        .submit-button:hover {
-             opacity: 0.9;
-        }
-        .delete-button {
-            background-color: var(--tg-theme-destructive-text-color, #ff4d4d);
-            color: var(--tg-theme-button-text-color);
             border: none;
-            padding: 6px 10px;
-            border-radius: var(--border-radius-s);
-            font-size: 0.8em;
-            cursor: pointer;
-            margin-top: 8px;
-            float: right;
-        }
-        .empty-state {
-            text-align: center;
-            padding: 40px 20px;
-            color: var(--tg-theme-hint-color);
-        }
-        .empty-state p { font-size: 1.1em; margin-bottom: 10px; }
-        .loading-spinner {
-            border: 4px solid var(--tg-theme-secondary-bg-color);
-            border-top: 4px solid var(--tg-theme-button-color);
-            border-radius: 50%;
-            width: 30px;
-            height: 30px;
-            animation: spin 1s linear infinite;
-            margin: 20px auto;
-        }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-        .user-info {
-            font-size: 0.8em;
+            background-color: transparent;
             color: var(--tg-theme-hint-color);
-            padding: 0 var(--padding-m) 5px;
-            text-align: right;
-        }
-         /* FontAwesome for icons */
-        @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css");
+            font-size: 16px;
+            font-weight: 500;
+            border-bottom: 2px solid transparent;
+        }}
+        .tab-button.active {{ color: var(--tg-theme-link-color); border-bottom-color: var(--tg-theme-link-color); }}
+        .tab-content {{ display: none; }}
+        .tab-content.active {{ display: block; }}
+        .publish-buttons {{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }}
+        .publish-buttons .button {{ width: 100%; box-sizing: border-box; }}
+        .user-info {{ font-size: 13px; color: var(--tg-theme-hint-color); text-align: right; margin-bottom: 10px; }}
+        .item-photo {{ max-width: 80px; max-height: 80px; border-radius: 8px; object-fit: cover; margin-right: 15px; float: left; }}
+        .flash-messages {{ list-style: none; padding: 0; margin-bottom: 15px; }}
+        .flash-messages li {{ padding: 10px; border-radius: 8px; margin-bottom: 10px; }}
+        .flash-messages .success {{ background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }}
+        .flash-messages .error {{ background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }}
+        .no-items {{ text-align: center; color: var(--tg-theme-hint-color); padding: 20px 0; }}
+        .item-actions { display: flex; gap: 8px; margin-top: 10px; }
+        .item-actions a, .item-actions button { font-size: 14px; padding: 6px 12px; }
     </style>
 </head>
 <body>
-    <div class="app-container">
-        <header class="main-header">
-            <h1>TonTalent</h1>
-            <button class="add-button" id="openModalBtn"><i class="fas fa-plus"></i></button>
-        </header>
-
-        <div id="userInfoDisplay" class="user-info"></div>
-        
-        <main class="content-area" id="contentArea">
-            <div class="loading-spinner"></div>
-        </main>
-
-        <nav class="tab-navigation">
-            <button class="tab-button active" data-tab="resumes"><i class="fas fa-address-card"></i> Resumes</button>
-            <button class="tab-button" data-tab="vacancies"><i class="fas fa-briefcase"></i> Vacancies</button>
-            <button class="tab-button" data-tab="freelance_offers"><i class="fas fa-handshake"></i> Offers</button>
-        </nav>
-    </div>
-
-    <div id="formModal" class="modal">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h2 id="modalTitle">Create New</h2>
-                <button class="close-button" id="closeModalBtn">×</button>
-            </div>
-            <form id="itemForm">
-                <input type="hidden" id="formItemType" name="itemType">
-                <input type="hidden" id="formItemId" name="itemId"> <!-- For editing -->
-                
-                <div id="commonFields">
-                     <!-- Fields will be dynamically added here -->
-                </div>
-                <button type="submit" class="submit-button">Submit</button>
-            </form>
+    <div class="container">
+        <div class="user-info">
+            {{% if 'user' in session and session['user'] %}}
+                Logged in as: {{ session['user'].get('first_name', '') }} {{ session['user'].get('last_name', '') }} ({{ session['user'].get('username', 'N/A') }})
+            {{% else %}}
+                Authenticating...
+            {{% endif %}}
         </div>
+        
+        {{% with messages = get_flashed_messages(with_categories=true) %}}
+            {{% if messages %}}
+            <ul class="flash-messages">
+                {{% for category, message in messages %}}
+                <li class="{{ category }}">{{ message }}</li>
+                {{% endfor %}}
+            </ul>
+            {{% endif %}}
+        {{% endwith %}}
+
+        {{% block content %}}{{% endblock %}}
     </div>
 
     <script>
         const tg = window.Telegram.WebApp;
-        let currentUser = null;
-        let currentTab = 'resumes';
-        let allData = { resumes: [], vacancies: [], freelance_offers: [] };
-
-        const formFieldsConfig = {
-            resumes: [
-                { name: 'title', label: 'Resume Title (e.g., Software Engineer)', type: 'text', required: true },
-                { name: 'name', label: 'Your Name', type: 'text', required: true },
-                { name: 'contact', label: 'Contact Info (e.g., Telegram @username, email)', type: 'text', required: true },
-                { name: 'skills', label: 'Skills (comma-separated)', type: 'text', required: true },
-                { name: 'experience_summary', label: 'Experience Summary', type: 'textarea', required: true },
-                { name: 'looking_for', label: 'Looking For (e.g., Full-time, Remote)', type: 'text', required: false }
-            ],
-            vacancies: [
-                { name: 'job_title', label: 'Job Title', type: 'text', required: true },
-                { name: 'company_name', label: 'Company Name', type: 'text', required: true },
-                { name: 'location', label: 'Location (e.g., Remote, City)', type: 'text', required: true },
-                { name: 'description', label: 'Job Description', type: 'textarea', required: true },
-                { name: 'requirements', label: 'Requirements (comma-separated)', type: 'text', required: true },
-                { name: 'employment_type', label: 'Employment Type (e.g., Full-time)', type: 'text', required: false },
-                { name: 'salary_range', label: 'Salary Range (optional)', type: 'text', required: false }
-            ],
-            freelance_offers: [
-                { name: 'offer_title', label: 'Offer Title', type: 'text', required: true },
-                { name: 'description', label: 'Offer Description', type: 'textarea', required: true },
-                { name: 'required_skills', label: 'Required Skills (comma-separated)', type: 'text', required: true },
-                { name: 'budget', label: 'Budget (e.g., $500, Negotiable)', type: 'text', required: true },
-                { name: 'timeline', label: 'Timeline (optional)', type: 'text', required: false }
-            ]
-        };
-
-        function applyTheme() {
-            tg.ready();
-            tg.expand(); // Make the app full height
-            document.body.style.backgroundColor = tg.themeParams.bg_color || '#ffffff';
-            document.body.style.color = tg.themeParams.text_color || '#000000';
-            if (tg.colorScheme === 'dark') {
+        tg.ready();
+        tg.expand();
+
+        function applyTheme(themeParams) {{
+            const root = document.documentElement;
+            root.style.setProperty('--tg-theme-bg-color', themeParams.bg_color || '#ffffff');
+            root.style.setProperty('--tg-theme-text-color', themeParams.text_color || '#000000');
+            root.style.setProperty('--tg-theme-hint-color', themeParams.hint_color || '#999999');
+            root.style.setProperty('--tg-theme-link-color', themeParams.link_color || '#2481cc');
+            root.style.setProperty('--tg-theme-button-color', themeParams.button_color || '#2481cc');
+            root.style.setProperty('--tg-theme-button-text-color', themeParams.button_text_color || '#ffffff');
+            root.style.setProperty('--tg-theme-secondary-bg-color', themeParams.secondary_bg_color || '#f0f0f0');
+            // Additional properties for more iOS-like theming if available
+            if (themeParams.header_bg_color) {{ // Renamed for consistency
+                 root.style.setProperty('--tg-header-color', themeParams.header_bg_color);
+            }}
+             if (themeParams.accent_text_color) {{
+                 root.style.setProperty('--tg-accent-text-color', themeParams.accent_text_color);
+            }}
+             if (themeParams.section_bg_color) {{
+                 root.style.setProperty('--tg-section-bg-color', themeParams.section_bg_color);
+            }}
+             if (themeParams.section_header_text_color) {{
+                 root.style.setProperty('--tg-section-header-text-color', themeParams.section_header_text_color);
+            }}
+             if (themeParams.destructive_text_color) {{
+                 root.style.setProperty('--tg-destructive-text-color', themeParams.destructive_text_color);
+            }}
+
+            if (tg.colorScheme === 'dark') {{
                 document.body.classList.add('dark');
-            } else {
+                 // More specific dark overrides if themeParams aren't enough
+                 if (!themeParams.bg_color || themeParams.bg_color === '#ffffff') root.style.setProperty('--tg-theme-bg-color', '#1c1c1e');
+                 if (!themeParams.text_color || themeParams.text_color === '#000000') root.style.setProperty('--tg-theme-text-color', '#ffffff');
+                 if (!themeParams.secondary_bg_color || themeParams.secondary_bg_color === '#f0f0f0') root.style.setProperty('--tg-theme-secondary-bg-color', '#2c2c2e');
+                 if (!themeParams.border_color) root.style.setProperty('--border-color', '#3a3a3c');
+            }} else {{
                 document.body.classList.remove('dark');
-            }
-            // Update CSS variables
-            const root = document.documentElement;
-            for (const key in tg.themeParams) {
-                root.style.setProperty('--tg-theme-' + key.replace(/_/g, '-'), tg.themeParams[key]);
-            }
-             // For button focus shadow
-            if (tg.themeParams.button_color) {
-                const buttonColor = tg.themeParams.button_color;
-                // Simple way to make it semi-transparent for shadow, might need a proper RGBA conversion
-                const alphaColor = buttonColor.startsWith('#') ? buttonColor + '33' : 'rgba(36, 129, 204, 0.2)';
-                 root.style.setProperty('--tg-theme-button-color-alpha', alphaColor);
-            }
-        }
-        
-        async function fetchAndRenderData(tab) {
-            const contentArea = document.getElementById('contentArea');
-            contentArea.innerHTML = '<div class="loading-spinner"></div>';
-            try {
-                const response = await fetch(`/api/get_data/${tab}?initData=${encodeURIComponent(tg.initData)}`);
-                if (!response.ok) {
-                    const errorData = await response.json().catch(() => ({ detail: "Failed to fetch data" }));
-                    throw new Error(errorData.detail || `HTTP error! status: ${response.status}`);
-                }
-                const data = await response.json();
-                allData[tab] = data;
-                renderItems(tab);
-            } catch (error) {
-                console.error('Error fetching data:', error);
-                contentArea.innerHTML = `<p class="empty-state">Error loading data: ${error.message}. Please try again.</p>`;
-                tg.showAlert(`Error loading data: ${error.message}`);
-            }
-        }
+            }}
+        }}
+
+        applyTheme(tg.themeParams);
+        tg.onEvent('themeChanged', function() {{
+            applyTheme(tg.themeParams);
+        }});
+
+        document.addEventListener('DOMContentLoaded', function() {{
+            if (typeof tg.initDataUnsafe !== 'undefined' && tg.initDataUnsafe.hash) {{
+                fetch('{{ url_for("auth_telegram") }}', {{
+                    method: 'POST',
+                    headers: {{ 'Content-Type': 'application/json' }},
+                    body: JSON.stringify({{ init_data: tg.initData }})
+                }})
+                .then(response => response.json())
+                .then(data => {{
+                    if (data.status === 'success') {{
+                        console.log('Telegram user authenticated:', data.user);
+                        if (document.querySelector('.user-info')) {{
+                             document.querySelector('.user-info').textContent = `Logged in as: ${{data.user.first_name || ''}} ${{data.user.last_name || ''}} (${{data.user.username || 'N/A'}})`;
+                        }}
+                        // Optionally reload or update content that depends on auth
+                        if (window.location.pathname === '{{ url_for("index") }}' && !sessionStorage.getItem('authReloaded')) {{
+                             sessionStorage.setItem('authReloaded', 'true');
+                             // window.location.reload(); // Can cause loop if not careful
+                        }}
+                    }} else {{
+                        console.error('Telegram authentication failed:', data.message);
+                        tg.showAlert(data.message || 'Authentication failed.');
+                    }}
+                }})
+                .catch(error => {{
+                    console.error('Error during Telegram auth request:', error);
+                    tg.showAlert('Error communicating with server for authentication.');
+                }});
+            }} else {{
+                console.warn("Telegram WebApp.initDataUnsafe is not available. Are you in Telegram?");
+                // Potentially redirect or show a message if not in Telegram environment and auth is required
+            }}
+        }});
+
+        function confirmDelete(event) {{
+            if (!confirm('Are you sure you want to delete this item? This action cannot be undone.')) {{
+                event.preventDefault();
+            }}
+        }}
+        {{% block extra_js %}}{{% endblock %}}
+    </script>
+</body>
+</html>
+""".format(
+    background_color=None, text_color=None, hint_color=None, link_color=None,
+    button_color=None, button_text_color=None, secondary_bg_color=None,
+    header_color=None, accent_text_color=None, section_bg_color=None,
+    section_header_text_color=None, destructive_text_color=None
+) # Placeholders for JS to fill
+
+INDEX_TEMPLATE = """
+{{% extends "base_template" %}}
+{{% block content %}}
+    <div class="header">
+        <h1>TonTalent</h1>
+        <a href="{{ url_for('admin_sync') }}" class="button button-secondary" style="font-size:14px; padding: 8px 12px;">Sync Panel</a>
+    </div>
+    
+    {{% if 'user' in session and session['user'] %}}
+        <div class="publish-buttons">
+            <a href="{{ url_for('publish_item', item_type='resume') }}" class="button"><i class="fas fa-id-card"></i> Publish Resume</a>
+            <a href="{{ url_for('publish_item', item_type='vacancy') }}" class="button"><i class="fas fa-briefcase"></i> Publish Vacancy</a>
+            <a href="{{ url_for('publish_item', item_type='freelance_offer') }}" class="button"><i class="fas fa-handshake"></i> Publish Freelance Offer</a>
+            <a href="{{ url_for('my_postings') }}" class="button button-secondary"><i class="fas fa-list-alt"></i> My Postings</a>
+        </div>
+    {{% else %}}
+        <p class="no-items">Please wait for authentication to complete to publish or view your items.</p>
+    {{% endif %}}
+
+    <div class="tabs">
+        <button class="tab-button active" onclick="openTab(event, 'resumes')">Resumes</button>
+        <button class="tab-button" onclick="openTab(event, 'vacancies')">Vacancies</button>
+        <button class="tab-button" onclick="openTab(event, 'freelance_offers')">Freelance Offers</button>
+    </div>
 
-        function renderItems(type) {
-            const contentArea = document.getElementById('contentArea');
-            const items = allData[type] || [];
-            
-            if (items.length === 0) {
-                contentArea.innerHTML = `<div class="empty-state"><p>No ${type} found.</p><p>Click the '+' button to add one!</p></div>`;
-                return;
-            }
-
-            let html = '';
-            items.slice().reverse().forEach(item => { // Show newest first
-                html += '<div class="item-card">';
-                html += `<h3>${escapeHtml(item.title || item.job_title || item.offer_title || 'Untitled')}</h3>`;
-                
-                const fields = formFieldsConfig[type];
-                fields.forEach(field => {
-                    if (item[field.name] && field.name !== 'title' && field.name !== 'job_title' && field.name !== 'offer_title') {
-                         if (field.name === 'name' && type === 'resumes') return; // Handled by user_display_name
-                         html += `<p><strong>${escapeHtml(field.label.replace('(optional)','').replace('(comma-separated)','').replace(' (e.g., Telegram @username, email)',''))}:</strong> ${escapeHtml(String(item[field.name]))}</p>`;
-                    }
-                });
-
-                html += `<div class="meta-info">`;
-                html += `<span>Posted by: ${escapeHtml(item.user_display_name || 'Unknown User')}</span>`;
-                html += `<span>On: ${new Date(item.timestamp).toLocaleDateString()}</span>`;
-                if (currentUser && item.user_id === currentUser.id) {
-                    html += `<button class="delete-button" onclick="deleteItem('${type}', '${item.id}')">Delete</button>`;
-                }
-                html += `</div></div>`;
-            });
-            contentArea.innerHTML = html;
-        }
+    <div id="resumes" class="tab-content active">
+        <h3>Latest Resumes</h3>
+        {{% if resumes %}}
+            {{% for resume_id, resume in resumes.items()|sort(attribute='1.published_at', reverse=True) %}}
+            <div class="card">
+                {{% if resume.photo_filename %}}
+                <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ resume.photo_filename }}" alt="{{ resume.full_name }}" class="item-photo">
+                {{% endif %}}
+                <h2>{{ resume.full_name }} - {{ resume.title }}</h2>
+                <p class="meta">Published: {{ resume.published_at[:10] }}</p>
+                <p><strong>Skills:</strong> {{ resume.skills|join(', ') }}</p>
+                <a href="{{ url_for('view_item', item_type='resume', item_id=resume_id) }}" class="button button-secondary">View Details</a>
+            </div>
+            {{% endfor %}}
+        {{% else %}}
+            <p class="no-items">No resumes published yet.</p>
+        {{% endif %}}
+    </div>
 
-        function setupTabs() {
-            const tabButtons = document.querySelectorAll('.tab-button');
-            tabButtons.forEach(button => {
-                button.addEventListener('click', () => {
-                    currentTab = button.dataset.tab;
-                    tabButtons.forEach(btn => btn.classList.remove('active'));
-                    button.classList.add('active');
-                    fetchAndRenderData(currentTab);
-                });
-            });
-        }
+    <div id="vacancies" class="tab-content">
+        <h3>Latest Vacancies</h3>
+        {{% if vacancies %}}
+            {{% for vacancy_id, vacancy in vacancies.items()|sort(attribute='1.published_at', reverse=True) %}}
+            <div class="card">
+                 {{% if vacancy.company_logo_filename %}}
+                <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ vacancy.company_logo_filename }}" alt="{{ vacancy.company_name }}" class="item-photo">
+                {{% endif %}}
+                <h2>{{ vacancy.job_title }} at {{ vacancy.company_name }}</h2>
+                <p class="meta">Published: {{ vacancy.published_at[:10] }}</p>
+                <p><strong>Location:</strong> {{ vacancy.location }}</p>
+                <a href="{{ url_for('view_item', item_type='vacancy', item_id=vacancy_id) }}" class="button button-secondary">View Details</a>
+            </div>
+            {{% endfor %}}
+        {{% else %}}
+            <p class="no-items">No vacancies published yet.</p>
+        {{% endif %}}
+    </div>
 
-        function setupModal() {
-            const modal = document.getElementById('formModal');
-            const openBtn = document.getElementById('openModalBtn');
-            const closeBtn = document.getElementById('closeModalBtn');
-            const form = document.getElementById('itemForm');
-            const commonFieldsContainer = document.getElementById('commonFields');
-            const modalTitle = document.getElementById('modalTitle');
-
-            openBtn.addEventListener('click', () => {
-                modalTitle.textContent = `Create New ${capitalizeFirstLetter(currentTab.slice(0, -1))}`;
-                document.getElementById('formItemType').value = currentTab;
-                document.getElementById('formItemId').value = ''; // Clear for new item
-                
-                commonFieldsContainer.innerHTML = '';
-                const fields = formFieldsConfig[currentTab];
-                fields.forEach(field => {
-                    let fieldHtml = `<div class="form-group">
-                                       <label for="form_${field.name}">${field.label}${field.required ? ' *' : ''}</label>`;
-                    if (field.type === 'textarea') {
-                        fieldHtml += `<textarea id="form_${field.name}" name="${field.name}" ${field.required ? 'required' : ''}></textarea>`;
-                    } else {
-                        fieldHtml += `<input type="${field.type}" id="form_${field.name}" name="${field.name}" ${field.required ? 'required' : ''}>`;
-                    }
-                    fieldHtml += `</div>`;
-                    commonFieldsContainer.innerHTML += fieldHtml;
-                });
-                // Auto-fill name for resumes if user data available
-                if (currentTab === 'resumes' && currentUser && document.getElementById('form_name')) {
-                    document.getElementById('form_name').value = `${currentUser.first_name || ''} ${currentUser.last_name || ''}`.trim() || currentUser.username || '';
-                }
-
-
-                modal.style.display = 'block';
-                tg.BackButton.show();
-                tg.BackButton.onClick(closeModal);
-            });
-
-            function closeModal() {
-                modal.style.display = 'none';
-                tg.BackButton.hide();
-            }
-            closeBtn.addEventListener('click', closeModal);
-            
-            window.addEventListener('click', (event) => {
-                if (event.target == modal) closeModal();
-            });
+    <div id="freelance_offers" class="tab-content">
+        <h3>Latest Freelance Offers</h3>
+        {{% if freelance_offers %}}
+            {{% for offer_id, offer in freelance_offers.items()|sort(attribute='1.published_at', reverse=True) %}}
+            <div class="card">
+                <h2>{{ offer.title }}</h2>
+                <p class="meta">Published: {{ offer.published_at[:10] }}</p>
+                <p><strong>Budget:</strong> {{ offer.budget }}</p>
+                <a href="{{ url_for('view_item', item_type='freelance_offer', item_id=offer_id) }}" class="button button-secondary">View Details</a>
+            </div>
+            {{% endfor %}}
+        {{% else %}}
+            <p class="no-items">No freelance offers published yet.</p>
+        {{% endif %}}
+    </div>
+{{% endblock %}}
+
+{{% block extra_js %}}
+<script>
+    function openTab(evt, tabName) {{
+        var i, tabcontent, tablinks;
+        tabcontent = document.getElementsByClassName("tab-content");
+        for (i = 0; i < tabcontent.length; i++) {{
+            tabcontent[i].style.display = "none";
+            tabcontent[i].classList.remove("active");
+        }}
+        tablinks = document.getElementsByClassName("tab-button");
+        for (i = 0; i < tablinks.length; i++) {{
+            tablinks[i].classList.remove("active");
+        }}
+        document.getElementById(tabName).style.display = "block";
+        document.getElementById(tabName).classList.add("active");
+        evt.currentTarget.classList.add("active");
+    }}
+    document.addEventListener('DOMContentLoaded', function() {{
+        tg.MainButton.hide();
+        const firstTab = document.querySelector('.tab-button');
+        if(firstTab) {{
+             // firstTab.click(); // Already active by default
+        }}
+    }});
+</script>
+{{% endblock %}}
+"""
 
-            form.addEventListener('submit', async (event) => {
-                event.preventDefault();
-                const formData = new FormData(form);
-                const itemData = {};
-                formData.forEach((value, key) => itemData[key] = value);
-                
-                itemData.user_id = currentUser ? currentUser.id : 'anonymous';
-                itemData.user_display_name = currentUser ? `${currentUser.first_name || ''} ${currentUser.last_name || ''}`.trim() || currentUser.username : 'Anonymous';
-                
-                tg.MainButton.showProgress();
-                try {
-                    const response = await fetch(`/api/create_item/${itemData.itemType}?initData=${encodeURIComponent(tg.initData)}`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify(itemData)
-                    });
-                    if (!response.ok) {
-                        const errorText = await response.text();
-                        throw new Error(JSON.parse(errorText).detail || `Server error: ${response.status}`);
-                    }
-                    const newItem = await response.json();
-                    tg.showAlert(`${capitalizeFirstLetter(itemData.itemType.slice(0,-1))} created successfully!`);
-                    closeModal();
-                    fetchAndRenderData(currentTab); // Refresh list
-                } catch (error) {
-                    console.error('Error submitting form:', error);
-                    tg.showAlert(`Error: ${error.message}`);
-                } finally {
-                     tg.MainButton.hideProgress();
-                }
-            });
-        }
+PUBLISH_ITEM_TEMPLATE = """
+{{% extends "base_template" %}}
+{{% block content %}}
+    <h2>{{ "Edit" if item_data else "Publish" }} {{ item_type_display_name }}</h2>
+    <form method="POST" enctype="multipart/form-data">
+        {{% if item_type == 'resume' %}}
+        <div class="form-group">
+            <label for="full_name">Full Name *</label>
+            <input type="text" id="full_name" name="full_name" value="{{ item_data.full_name if item_data else '' }}" required>
+        </div>
+        <div class="form-group">
+            <label for="title">Job Title / Headline *</label>
+            <input type="text" id="title" name="title" value="{{ item_data.title if item_data else '' }}" required>
+        </div>
+        <div class="form-group">
+            <label for="skills">Skills (comma-separated) *</label>
+            <input type="text" id="skills" name="skills" value="{{ (item_data.skills|join(', ')) if item_data and item_data.skills else '' }}" required>
+        </div>
+        <div class="form-group">
+            <label for="experience">Experience (one entry per line: Company;Role;Duration;Description)</label>
+            <textarea id="experience" name="experience" rows="5" placeholder="e.g., Acme Corp;Software Engineer;2020-2023;Developed cool stuff.">{{ (item_data.experience_str if item_data else '') }}</textarea>
+        </div>
+        <div class="form-group">
+            <label for="education">Education (one entry per line: Institution;Degree;Duration)</label>
+            <textarea id="education" name="education" rows="3" placeholder="e.g., State University;B.S. Computer Science;2016-2020">{{ (item_data.education_str if item_data else '') }}</textarea>
+        </div>
+        <div class="form-group">
+            <label for="contact_info">Contact (e.g., Telegram @username, email) *</label>
+            <input type="text" id="contact_info" name="contact_info" value="{{ item_data.contact_info if item_data else (session['user'].username if session.get('user') else '') }}" required>
+        </div>
+        <div class="form-group">
+            <label for="portfolio_links">Portfolio Links (comma-separated)</label>
+            <input type="text" id="portfolio_links" name="portfolio_links" value="{{ (item_data.portfolio_links|join(', ')) if item_data and item_data.portfolio_links else '' }}">
+        </div>
+         <div class="form-group">
+            <label for="photo">Profile Photo (Optional, replaces existing if editing)</label>
+            <input type="file" id="photo" name="photo" accept="image/*">
+            {{% if item_data and item_data.photo_filename %}}
+            <p>Current photo: <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ item_data.photo_filename }}" alt="Current Photo" style="max-width:50px; max-height:50px; vertical-align:middle; margin-left:10px;"></p>
+            {{% endif %}}
+        </div>
+        {{% elif item_type == 'vacancy' %}}
+        <div class="form-group">
+            <label for="company_name">Company Name *</label>
+            <input type="text" id="company_name" name="company_name" value="{{ item_data.company_name if item_data else '' }}" required>
+        </div>
+        <div class="form-group">
+            <label for="job_title">Job Title *</label>
+            <input type="text" id="job_title" name="job_title" value="{{ item_data.job_title if item_data else '' }}" required>
+        </div>
+        <div class="form-group">
+            <label for="description">Job Description *</label>
+            <textarea id="description" name="description" required>{{ item_data.description if item_data else '' }}</textarea>
+        </div>
+        <div class="form-group">
+            <label for="requirements">Requirements (comma-separated)</label>
+            <input type="text" id="requirements" name="requirements" value="{{ (item_data.requirements|join(', ')) if item_data and item_data.requirements else '' }}">
+        </div>
+        <div class="form-group">
+            <label for="location">Location *</label>
+            <input type="text" id="location" name="location" value="{{ item_data.location if item_data else '' }}" required>
+        </div>
+        <div class="form-group">
+            <label for="salary_range">Salary Range (e.g., $50k-$70k, Negotiable)</label>
+            <input type="text" id="salary_range" name="salary_range" value="{{ item_data.salary_range if item_data else '' }}">
+        </div>
+        <div class="form-group">
+            <label for="employment_type">Employment Type</label>
+            <select id="employment_type" name="employment_type">
+                <option value="Full-time" {{ "selected" if item_data and item_data.employment_type == "Full-time" }}>Full-time</option>
+                <option value="Part-time" {{ "selected" if item_data and item_data.employment_type == "Part-time" }}>Part-time</option>
+                <option value="Contract" {{ "selected" if item_data and item_data.employment_type == "Contract" }}>Contract</option>
+                <option value="Internship" {{ "selected" if item_data and item_data.employment_type == "Internship" }}>Internship</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="contact_info">Contact Info (for applications) *</label>
+            <input type="text" id="contact_info" name="contact_info" value="{{ item_data.contact_info if item_data else '' }}" required>
+        </div>
+        <div class="form-group">
+            <label for="photo">Company Logo (Optional)</label>
+            <input type="file" id="photo" name="photo" accept="image/*">
+             {{% if item_data and item_data.company_logo_filename %}}
+            <p>Current logo: <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ item_data.company_logo_filename }}" alt="Current Logo" style="max-width:50px; max-height:50px; vertical-align:middle; margin-left:10px;"></p>
+            {{% endif %}}
+        </div>
+        {{% elif item_type == 'freelance_offer' %}}
+        <div class="form-group">
+            <label for="title">Offer Title *</label>
+            <input type="text" id="title" name="title" value="{{ item_data.title if item_data else '' }}" required>
+        </div>
+        <div class="form-group">
+            <label for="description">Offer Description *</label>
+            <textarea id="description" name="description" required>{{ item_data.description if item_data else '' }}</textarea>
+        </div>
+        <div class="form-group">
+            <label for="skills_required">Skills Required (comma-separated) *</label>
+            <input type="text" id="skills_required" name="skills_required" value="{{ (item_data.skills_required|join(', ')) if item_data and item_data.skills_required else '' }}" required>
+        </div>
+        <div class="form-group">
+            <label for="budget">Budget (e.g., $500, Negotiable) *</label>
+            <input type="text" id="budget" name="budget" value="{{ item_data.budget if item_data else '' }}" required>
+        </div>
+        <div class="form-group">
+            <label for="deadline">Deadline (e.g., 2 weeks, YYYY-MM-DD)</label>
+            <input type="text" id="deadline" name="deadline" value="{{ item_data.deadline if item_data else '' }}">
+        </div>
+        <div class="form-group">
+            <label for="contact_info">Contact Info *</label>
+            <input type="text" id="contact_info" name="contact_info" value="{{ item_data.contact_info if item_data else '' }}" required>
+        </div>
+        {{% endif %}}
+        <button type="submit" id="main-submit-button">{{ "Save Changes" if item_data else "Publish" }}</button>
+    </form>
+{{% endblock %}}
+{{% block extra_js %}}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {{
+        tg.MainButton.setText('{{ "Save Changes" if item_data else "Publish" }}');
+        tg.MainButton.show();
+        tg.MainButton.onClick(function() {{
+            document.getElementById('main-submit-button').click();
+        }});
+        tg.BackButton.show();
+        tg.onEvent('backButtonClicked', function() {{
+            window.history.back();
+        }});
+    }});
+    // Cleanup MainButton when navigating away from this page
+    window.addEventListener('beforeunload', function() {{
+        tg.MainButton.hide();
+        tg.MainButton.offClick(); // Remove previous handler
+        tg.BackButton.hide();
+        tg.offEvent('backButtonClicked');
+    }});
+</script>
+{{% endblock %}}
+"""
 
-        async function deleteItem(type, itemId) {
-            if (!tg.showConfirm(`Are you sure you want to delete this ${type.slice(0,-1)}?`)) return;
-            
-            tg.MainButton.showProgress();
-            try {
-                const response = await fetch(`/api/delete_item/${type}/${itemId}?initData=${encodeURIComponent(tg.initData)}`, {
-                    method: 'POST' // Using POST for deletion as it needs initData in body/query
-                });
-                 if (!response.ok) {
-                    const errorText = await response.text();
-                    throw new Error(JSON.parse(errorText).detail || `Server error: ${response.status}`);
-                }
-                await response.json();
-                tg.showAlert('Item deleted successfully.');
-                fetchAndRenderData(currentTab); // Refresh list
-            } catch (error) {
-                console.error('Error deleting item:', error);
-                tg.showAlert(`Error: ${error.message}`);
-            } finally {
-                tg.MainButton.hideProgress();
-            }
-        }
-        
-        function escapeHtml(unsafe) {
-            if (unsafe === null || typeof unsafe === 'undefined') return '';
-            return String(unsafe)
-                 .replace(/&/g, "&")
-                 .replace(/</g, "<")
-                 .replace(/>/g, ">")
-                 .replace(/"/g, """)
-                 .replace(/'/g, "'");
-        }
+VIEW_ITEM_TEMPLATE = """
+{{% extends "base_template" %}}
+{{% block content %}}
+    <div class="card">
+        {{% if item_type == 'resume' %}}
+            {{% if item.photo_filename %}}
+            <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ item.photo_filename }}" alt="{{ item.full_name }}" class="item-photo" style="max-width:100px; max-height:100px; margin-bottom:15px;">
+            {{% endif %}}
+            <h2>{{ item.full_name }}</h2>
+            <h3>{{ item.title }}</h3>
+            <p class="meta">Published: {{ item.published_at[:10] }} by {{ item.user_display_name }}</p>
+            <p><strong>Skills:</strong> {{ item.skills|join(', ') }}</p>
+            <h4>Experience:</h4>
+            {{% if item.experience %}}
+                <ul>{{% for exp in item.experience %}}<li><strong>{{ exp.role }}</strong> at {{ exp.company }} ({{ exp.duration }})<br>{{ exp.description }}</li>{{% endfor %}}</ul>
+            {{% else %}}<p>N/A</p>{{% endif %}}
+            <h4>Education:</h4>
+            {{% if item.education %}}
+                <ul>{{% for edu in item.education %}}<li><strong>{{ edu.degree }}</strong>, {{ edu.institution }} ({{ edu.duration }})</li>{{% endfor %}}</ul>
+            {{% else %}}<p>N/A</p>{{% endif %}}
+            <p><strong>Contact:</strong> {{ item.contact_info }}</p>
+            {{% if item.portfolio_links %}}<p><strong>Portfolio:</strong> {{ item.portfolio_links|map('urlize')|join(', ')|safe }}</p>{{% endif %}}
+
+        {{% elif item_type == 'vacancy' %}}
+            {{% if item.company_logo_filename %}}
+            <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ item.company_logo_filename }}" alt="{{ item.company_name }}" class="item-photo" style="max-width:100px; max-height:100px; margin-bottom:15px;">
+            {{% endif %}}
+            <h2>{{ item.job_title }}</h2>
+            <h3>at {{ item.company_name }}</h3>
+            <p class="meta">Published: {{ item.published_at[:10] }} by {{ item.user_display_name }}</p>
+            <p><strong>Location:</strong> {{ item.location }}</p>
+            <p><strong>Description:</strong><br>{{ item.description|replace('\\n', '<br>')|safe }}</p>
+            {{% if item.requirements %}}<p><strong>Requirements:</strong> {{ item.requirements|join(', ') }}</p>{{% endif %}}
+            {{% if item.salary_range %}}<p><strong>Salary:</strong> {{ item.salary_range }}</p>{{% endif %}}
+            <p><strong>Type:</strong> {{ item.employment_type }}</p>
+            <p><strong>Contact for Applications:</strong> {{ item.contact_info }}</p>
+
+        {{% elif item_type == 'freelance_offer' %}}
+            <h2>{{ item.title }}</h2>
+            <p class="meta">Published: {{ item.published_at[:10] }} by {{ item.user_display_name }}</p>
+            <p><strong>Description:</strong><br>{{ item.description|replace('\\n', '<br>')|safe }}</p>
+            <p><strong>Skills Required:</strong> {{ item.skills_required|join(', ') }}</p>
+            <p><strong>Budget:</strong> {{ item.budget }}</p>
+            {{% if item.deadline %}}<p><strong>Deadline:</strong> {{ item.deadline }}</p>{{% endif %}}
+            <p><strong>Contact:</strong> {{ item.contact_info }}</p>
+        {{% endif %}}
+
+        {{% if 'user' in session and session['user'] and item.user_id == session['user'].id %}}
+        <div class="item-actions">
+            <a href="{{ url_for('edit_item', item_type=item_type, item_id=item_id) }}" class="button">Edit</a>
+            <form method="POST" action="{{ url_for('delete_item', item_type=item_type, item_id=item_id) }}" onsubmit="confirmDelete(event);" style="display:inline;">
+                <button type="submit" class="button button-destructive">Delete</button>
+            </form>
+        </div>
+        {{% endif %}}
+    </div>
+    <a href="{{ url_for('index') }}" class="button button-secondary" style="margin-top:20px;">Back to Listings</a>
+{{% endblock %}}
+{{% block extra_js %}}
+<script>
+document.addEventListener('DOMContentLoaded', function() {{
+    tg.BackButton.show();
+    tg.onEvent('backButtonClicked', function() {{
+        window.location.href = '{{ url_for("index") }}';
+    }});
+}});
+window.addEventListener('beforeunload', function() {{
+    tg.BackButton.hide();
+    tg.offEvent('backButtonClicked');
+}});
+</script>
+{{% endblock %}}
+"""
 
-        function capitalizeFirstLetter(string) {
-            return string.charAt(0).toUpperCase() + string.slice(1);
-        }
+MY_POSTINGS_TEMPLATE = """
+{{% extends "base_template" %}}
+{{% block content %}}
+    <h2>My Postings</h2>
+
+    {{% if not (my_resumes or my_vacancies or my_freelance_offers) %}}
+        <p class="no-items">You haven't published anything yet.</p>
+        <a href="{{ url_for('index') }}" class="button">Publish Something</a>
+    {{% endif %}}
+
+    {{% if my_resumes %}}
+    <h3>My Resumes</h3>
+    {{% for resume_id, resume in my_resumes.items() %}}
+    <div class="card">
+        {{% if resume.photo_filename %}}
+        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ resume.photo_filename }}" alt="{{ resume.full_name }}" class="item-photo">
+        {{% endif %}}
+        <h4>{{ resume.full_name }} - {{ resume.title }}</h4>
+        <p class="meta">Published: {{ resume.published_at[:10] }}</p>
+        <div class="item-actions">
+            <a href="{{ url_for('view_item', item_type='resume', item_id=resume_id) }}" class="button button-secondary">View</a>
+            <a href="{{ url_for('edit_item', item_type='resume', item_id=resume_id) }}" class="button">Edit</a>
+            <form method="POST" action="{{ url_for('delete_item', item_type='resume', item_id=resume_id) }}" onsubmit="confirmDelete(event);" style="display:inline;">
+                <button type="submit" class="button button-destructive">Delete</button>
+            </form>
+        </div>
+    </div>
+    {{% endfor %}}
+    {{% endif %}}
+
+    {{% if my_vacancies %}}
+    <h3>My Vacancies</h3>
+    {{% for vacancy_id, vacancy in my_vacancies.items() %}}
+    <div class="card">
+        {{% if vacancy.company_logo_filename %}}
+        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ vacancy.company_logo_filename }}" alt="{{ vacancy.company_name }}" class="item-photo">
+        {{% endif %}}
+        <h4>{{ vacancy.job_title }} at {{ vacancy.company_name }}</h4>
+        <p class="meta">Published: {{ vacancy.published_at[:10] }}</p>
+        <div class="item-actions">
+            <a href="{{ url_for('view_item', item_type='vacancy', item_id=vacancy_id) }}" class="button button-secondary">View</a>
+            <a href="{{ url_for('edit_item', item_type='vacancy', item_id=vacancy_id) }}" class="button">Edit</a>
+            <form method="POST" action="{{ url_for('delete_item', item_type='vacancy', item_id=vacancy_id) }}" onsubmit="confirmDelete(event);" style="display:inline;">
+                <button type="submit" class="button button-destructive">Delete</button>
+            </form>
+        </div>
+    </div>
+    {{% endfor %}}
+    {{% endif %}}
+
+    {{% if my_freelance_offers %}}
+    <h3>My Freelance Offers</h3>
+    {{% for offer_id, offer in my_freelance_offers.items() %}}
+    <div class="card">
+        <h4>{{ offer.title }}</h4>
+        <p class="meta">Published: {{ offer.published_at[:10] }}</p>
+        <div class="item-actions">
+            <a href="{{ url_for('view_item', item_type='freelance_offer', item_id=offer_id) }}" class="button button-secondary">View</a>
+            <a href="{{ url_for('edit_item', item_type='freelance_offer', item_id=offer_id) }}" class="button">Edit</a>
+            <form method="POST" action="{{ url_for('delete_item', item_type='freelance_offer', item_id=offer_id) }}" onsubmit="confirmDelete(event);" style="display:inline;">
+                <button type="submit" class="button button-destructive">Delete</button>
+            </form>
+        </div>
+    </div>
+    {{% endfor %}}
+    {{% endif %}}
+
+    <a href="{{ url_for('index') }}" class="button button-secondary" style="margin-top:20px;">Back to Main Page</a>
+{{% endblock %}}
+{{% block extra_js %}}
+<script>
+document.addEventListener('DOMContentLoaded', function() {{
+    tg.BackButton.show();
+    tg.onEvent('backButtonClicked', function() {{
+        window.location.href = '{{ url_for("index") }}';
+    }});
+}});
+window.addEventListener('beforeunload', function() {{
+    tg.BackButton.hide();
+    tg.offEvent('backButtonClicked');
+}});
+</script>
+{{% endblock %}}
+"""
 
-        function displayUserInfo() {
-            const userInfoDisplay = document.getElementById('userInfoDisplay');
-            if (currentUser && currentUser.username) {
-                userInfoDisplay.textContent = `Logged in as: @${currentUser.username}`;
-            } else if (currentUser && currentUser.first_name) {
-                userInfoDisplay.textContent = `Logged in as: ${currentUser.first_name}`;
-            } else {
-                 userInfoDisplay.textContent = `User not fully identified. Some features might be limited.`;
-            }
-        }
+ADMIN_SYNC_TEMPLATE = """
+{{% extends "base_template" %}}
+{{% block content %}}
+    <div class="header">
+        <h1>Admin Sync Panel</h1>
+    </div>
+    <div class="card">
+        <h2><i class="fas fa-sync-alt"></i> Sync with Data Store</h2>
+        <div style="display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;">
+            <form method="POST" action="{{ url_for('force_upload') }}" style="display: inline;" onsubmit="return confirm('Are you sure you want to force upload local data? This will overwrite server data.');">
+                <button type="submit" class="button"><i class="fas fa-upload"></i> Upload DB</button>
+            </form>
+            <form method="POST" action="{{ url_for('force_download') }}" style="display: inline;" onsubmit="return confirm('Are you sure you want to force download data? This will overwrite local files.');">
+                <button type="submit" class="button button-secondary"><i class="fas fa-download"></i> Download DB</button>
+            </form>
+        </div>
+        <p style="font-size: 14px; color: var(--tg-theme-hint-color);">Backup occurs automatically every 30 minutes and after each save. Use these buttons for immediate sync.</p>
+    </div>
+    <div class="card">
+        <h2>Data Overview</h2>
+        <p>Total Resumes: {{ data_counts.resumes }}</p>
+        <p>Total Vacancies: {{ data_counts.vacancies }}</p>
+        <p>Total Freelance Offers: {{ data_counts.freelance_offers }}</p>
+    </div>
+     <a href="{{ url_for('index') }}" class="button button-secondary" style="margin-top:20px;">Back to Main Page</a>
+{{% endblock %}}
+{{% block extra_js %}}
+<script>
+document.addEventListener('DOMContentLoaded', function() {{
+    tg.BackButton.show();
+    tg.onEvent('backButtonClicked', function() {{
+        window.location.href = '{{ url_for("index") }}';
+    }});
+}});
+window.addEventListener('beforeunload', function() {{
+    tg.BackButton.hide();
+    tg.offEvent('backButtonClicked');
+}});
+</script>
+{{% endblock %}}
+"""
 
-        async function initApp() {
-            applyTheme();
-            tg.onEvent('themeChanged', applyTheme);
-            tg.onEvent('viewportChanged', () => tg.expand()); // Ensure it's always expanded
-
-            if (!tg.initDataUnsafe || !tg.initDataUnsafe.user) {
-                if (tg.initData) { // If initData exists, but user part is missing, try to validate it server-side
-                    try {
-                        const response = await fetch(`/api/validate_user?initData=${encodeURIComponent(tg.initData)}`);
-                        if (response.ok) {
-                            currentUser = await response.json();
-                        } else {
-                            console.warn("Server-side user validation failed or user not found in initData.");
-                        }
-                    } catch (e) {
-                        console.error("Error during server-side user validation:", e);
-                    }
-                }
-                if (!currentUser) {
-                    console.warn('Telegram user data not available or validation failed. Proceeding with limited functionality.');
-                    tg.showAlert('Could not identify user. Some features might be limited.');
-                }
-            } else {
-                 currentUser = tg.initDataUnsafe.user;
-            }
-            
-            if (currentUser) {
-                 console.log("Current User:", currentUser);
-            }
-            displayUserInfo();
-
-            setupTabs();
-            setupModal();
-            fetchAndRenderData(currentTab); // Initial data load
-        }
-        
-        document.addEventListener('DOMContentLoaded', initApp);
+# --- Helper function to get item type display name ---
+def get_item_type_display_name(item_type_slug):
+    names = {
+        'resume': 'Resume',
+        'vacancy': 'Vacancy',
+        'freelance_offer': 'Freelance Offer'
+    }
+    return names.get(item_type_slug, 'Item')
 
-    </script>
-</body>
-</html>
-"""
+def get_item_collection_name(item_type_slug):
+    names = {
+        'resume': 'resumes',
+        'vacancy': 'vacancies',
+        'freelance_offer': 'freelance_offers'
+    }
+    return names.get(item_type_slug)
 
 # --- Flask Routes ---
+@app.before_request
+def check_auth_for_publish():
+    if request.endpoint in ['publish_item', 'edit_item', 'delete_item', 'my_postings']:
+        if 'user' not in session or not session['user']:
+            flash("You need to be authenticated to access this page. Please ensure you are opening this app through Telegram.", "error")
+            return redirect(url_for('index'))
+        if not session['user'].get('id'):
+            flash("Authentication error: User ID missing.", "error")
+            session.pop('user', None)
+            return redirect(url_for('index'))
+
+@app.route('/auth_telegram', methods=['POST'])
+def auth_telegram():
+    data = request.get_json()
+    init_data_str = data.get('init_data')
+    if not init_data_str:
+        return jsonify({"status": "error", "message": "No initData received"}), 400
+
+    user_info = validate_telegram_data(init_data_str)
+    
+    if user_info and user_info.get('id'):
+        session['user'] = user_info
+        logging.info(f"User {user_info.get('id')} authenticated via Telegram.")
+        return jsonify({"status": "success", "user": user_info})
+    else:
+        logging.warning(f"Telegram authentication failed for initData: {init_data_str[:100]}...")
+        session.pop('user', None)
+        return jsonify({"status": "error", "message": "Invalid Telegram data or hash mismatch"}), 403
+
 @app.route('/')
 def index():
-    return render_template_string(MAIN_APP_TEMPLATE)
-
-@app.route('/api/validate_user', methods=['GET'])
-def validate_user_route():
-    init_data_str = request.args.get('initData')
-    user = verify_telegram_init_data(init_data_str)
-    if user:
-        return jsonify(user), 200
-    else:
-        return jsonify({"detail": "Invalid or missing Telegram initData"}), 401
-
-
-@app.route('/api/get_data/<item_type>', methods=['GET'])
-def get_data_api(item_type):
-    init_data_str = request.args.get('initData')
-    # Basic check, though for GET it's less critical than for POST/state-changing operations
-    # For sensitive data, GET might also need strict validation
-    if not verify_telegram_init_data(init_data_str): 
-        logging.warning(f"Unauthorized attempt to get_data for {item_type}")
-        # Depending on sensitivity, you might allow read without strict auth or deny
-        # For now, allowing read but logging it. Stricter apps would return 401.
-        # return jsonify({"detail": "Unauthorized: Invalid Telegram data"}), 401
-    
     data = load_data()
-    if item_type in data:
-        return jsonify(data[item_type])
-    return jsonify({"detail": "Invalid item type"}), 404
+    # Apply theme params from session if available, otherwise use defaults
+    theme_params = session.get('themeParams', {})
+    return render_template_string(
+        BASE_TEMPLATE.format(
+            background_color=theme_params.get('bg_color'),
+            text_color=theme_params.get('text_color'),
+            hint_color=theme_params.get('hint_color'),
+            link_color=theme_params.get('link_color'),
+            button_color=theme_params.get('button_color'),
+            button_text_color=theme_params.get('button_text_color'),
+            secondary_bg_color=theme_params.get('secondary_bg_color'),
+            header_color=theme_params.get('header_bg_color'),
+            accent_text_color=theme_params.get('accent_text_color'),
+            section_bg_color=theme_params.get('section_bg_color'),
+            section_header_text_color=theme_params.get('section_header_text_color'),
+            destructive_text_color=theme_params.get('destructive_text_color')
+        ) + INDEX_TEMPLATE,
+        resumes=data.get('resumes', {}),
+        vacancies=data.get('vacancies', {}),
+        freelance_offers=data.get('freelance_offers', {}),
+        repo_id=REPO_ID
+    )
+
+@app.route('/publish/<item_type>', methods=['GET', 'POST'])
+@app.route('/edit/<item_type>/<item_id>', methods=['GET', 'POST'])
+def publish_item(item_type, item_id=None):
+    data = load_data()
+    collection_name = get_item_collection_name(item_type)
+    if not collection_name:
+        flash("Invalid item type.", "error")
+        return redirect(url_for('index'))
+
+    item_data_to_edit = None
+    if item_id:
+        item_data_to_edit = data.get(collection_name, {}).get(item_id)
+        if not item_data_to_edit or item_data_to_edit.get('user_id') != session['user']['id']:
+            flash("Item not found or you don't have permission to edit it.", "error")
+            return redirect(url_for('index'))
+        # Prepare complex fields for form display
+        if item_type == 'resume':
+            if item_data_to_edit.get('experience'):
+                 item_data_to_edit['experience_str'] = "\n".join([f"{e['company']};{e['role']};{e['duration']};{e['description']}" for e in item_data_to_edit['experience']])
+            if item_data_to_edit.get('education'):
+                 item_data_to_edit['education_str'] = "\n".join([f"{e['institution']};{e['degree']};{e['duration']}" for e in item_data_to_edit['education']])
+
+
+    if request.method == 'POST':
+        new_item_id = item_id or str(uuid.uuid4())
+        timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+        
+        current_photo_filename = None
+        if item_data_to_edit:
+            if item_type == 'resume': current_photo_filename = item_data_to_edit.get('photo_filename')
+            elif item_type == 'vacancy': current_photo_filename = item_data_to_edit.get('company_logo_filename')
+
+        photo_file = request.files.get('photo')
+        uploaded_photo_filename = None
+
+        if photo_file and photo_file.filename:
+            if not HF_TOKEN_WRITE:
+                flash("Cannot upload photo: Hugging Face Write Token is not configured.", "warning")
+            else:
+                try:
+                    uploads_dir = 'uploads_temp'
+                    os.makedirs(uploads_dir, exist_ok=True)
+                    api = HfApi()
+                    
+                    safe_name_prefix = secure_filename(request.form.get('full_name', request.form.get('company_name', request.form.get('title', 'item'))).replace(' ', '_'))[:20]
+                    ext = os.path.splitext(photo_file.filename)[1].lower()
+                    if ext not in ['.jpg', '.jpeg', '.png', '.gif', '.webp']:
+                        flash(f"File {photo_file.filename} is not a supported image format and was skipped.", "warning")
+                    else:
+                        new_photo_filename_base = f"{safe_name_prefix}_{new_item_id[:8]}_{timestamp.replace(':','-').replace(' ','_')}{ext}"
+                        temp_path = os.path.join(uploads_dir, new_photo_filename_base)
+                        photo_file.save(temp_path)
+                        
+                        api.upload_file(
+                            path_or_fileobj=temp_path,
+                            path_in_repo=f"photos/{new_photo_filename_base}",
+                            repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN_WRITE,
+                            commit_message=f"Upload photo for {item_type} {new_item_id}"
+                        )
+                        uploaded_photo_filename = new_photo_filename_base
+                        logging.info(f"Photo {uploaded_photo_filename} uploaded for {item_type} {new_item_id}.")
+                        os.remove(temp_path)
+                        if os.path.exists(uploads_dir) and not os.listdir(uploads_dir): os.rmdir(uploads_dir)
+                        
+                        # Delete old photo if a new one is uploaded and an old one existed
+                        if current_photo_filename and uploaded_photo_filename != current_photo_filename:
+                            try:
+                                api.delete_file(repo_id=REPO_ID, path_in_repo=f"photos/{current_photo_filename}", repo_type="dataset", token=HF_TOKEN_WRITE)
+                                logging.info(f"Old photo {current_photo_filename} deleted from HF.")
+                            except Exception as e_del:
+                                logging.error(f"Failed to delete old photo {current_photo_filename}: {e_del}")
+                except Exception as e:
+                    logging.error(f"Error uploading photo: {e}", exc_info=True)
+                    flash("Error uploading photo.", "error")
 
-@app.route('/api/create_item/<item_type>', methods=['POST'])
-def create_item_api(item_type):
-    init_data_str = request.args.get('initData') # Or from request.json.get('initData') if sent in body
-    user = verify_telegram_init_data(init_data_str)
-    if not user:
-        return jsonify({"detail": "Unauthorized: Invalid Telegram data"}), 401
 
-    req_data = request.get_json()
-    if not req_data:
-        return jsonify({"detail": "No data provided"}), 400
+        item_details = {
+            'id': new_item_id,
+            'user_id': session['user']['id'],
+            'user_display_name': f"{session['user'].get('first_name','')} {session['user'].get('last_name','')} ({session['user'].get('username','N/A')})".strip(),
+            'published_at': item_data_to_edit.get('published_at', timestamp) if item_id else timestamp,
+            'updated_at': timestamp
+        }
 
+        if item_type == 'resume':
+            item_details.update({
+                'full_name': request.form.get('full_name'),
+                'title': request.form.get('title'),
+                'skills': [s.strip() for s in request.form.get('skills', '').split(',') if s.strip()],
+                'contact_info': request.form.get('contact_info'),
+                'portfolio_links': [l.strip() for l in request.form.get('portfolio_links', '').split(',') if l.strip()],
+                'photo_filename': uploaded_photo_filename or current_photo_filename
+            })
+            exp_text = request.form.get('experience', '')
+            item_details['experience'] = []
+            for line in exp_text.splitlines():
+                parts = [p.strip() for p in line.split(';')]
+                if len(parts) == 4: item_details['experience'].append({'company': parts[0], 'role': parts[1], 'duration': parts[2], 'description': parts[3]})
+            
+            edu_text = request.form.get('education', '')
+            item_details['education'] = []
+            for line in edu_text.splitlines():
+                parts = [p.strip() for p in line.split(';')]
+                if len(parts) == 3: item_details['education'].append({'institution': parts[0], 'degree': parts[1], 'duration': parts[2]})
+
+        elif item_type == 'vacancy':
+            item_details.update({
+                'company_name': request.form.get('company_name'),
+                'job_title': request.form.get('job_title'),
+                'description': request.form.get('description'),
+                'requirements': [r.strip() for r in request.form.get('requirements', '').split(',') if r.strip()],
+                'location': request.form.get('location'),
+                'salary_range': request.form.get('salary_range'),
+                'employment_type': request.form.get('employment_type'),
+                'contact_info': request.form.get('contact_info'),
+                'company_logo_filename': uploaded_photo_filename or current_photo_filename
+            })
+        elif item_type == 'freelance_offer':
+            item_details.update({
+                'title': request.form.get('title'),
+                'description': request.form.get('description'),
+                'skills_required': [s.strip() for s in request.form.get('skills_required', '').split(',') if s.strip()],
+                'budget': request.form.get('budget'),
+                'deadline': request.form.get('deadline'),
+                'contact_info': request.form.get('contact_info')
+            })
+        
+        data.setdefault(collection_name, {})[new_item_id] = item_details
+        save_data(data)
+        flash(f"{get_item_type_display_name(item_type)} {'updated' if item_id else 'published'} successfully!", "success")
+        return redirect(url_for('view_item', item_type=item_type, item_id=new_item_id))
+
+    return render_template_string(
+        BASE_TEMPLATE.format(**session.get('themeParams', {})) + PUBLISH_ITEM_TEMPLATE, # Pass empty dict if no themeParams
+        item_type=item_type,
+        item_type_display_name=get_item_type_display_name(item_type),
+        item_data=item_data_to_edit,
+        repo_id=REPO_ID
+    )
+
+@app.route('/view/<item_type>/<item_id>')
+def view_item(item_type, item_id):
     data = load_data()
-    if item_type not in data:
-        return jsonify({"detail": "Invalid item type"}), 404
-
-    new_item = {
-        "id": str(uuid.uuid4()),
-        "user_id": user.get('id'),
-        "user_display_name": f"{user.get('first_name', '')} {user.get('last_name', '')}".strip() or user.get('username', 'Unknown User'),
-        "timestamp": datetime.utcnow().isoformat() + "Z",
-    }
+    collection_name = get_item_collection_name(item_type)
+    if not collection_name:
+        flash("Invalid item type.", "error")
+        return redirect(url_for('index'))
+
+    item = data.get(collection_name, {}).get(item_id)
+    if not item:
+        flash("Item not found.", "error")
+        return redirect(url_for('index'))
+
+    return render_template_string(
+        BASE_TEMPLATE.format(**session.get('themeParams', {})) + VIEW_ITEM_TEMPLATE,
+        item_type=item_type,
+        item_id=item_id,
+        item=item,
+        repo_id=REPO_ID
+    )
+
+@app.route('/delete/<item_type>/<item_id>', methods=['POST'])
+def delete_item(item_type, item_id):
+    data = load_data()
+    collection_name = get_item_collection_name(item_type)
+    if not collection_name:
+        flash("Invalid item type.", "error")
+        return redirect(url_for('index'))
+
+    item_to_delete = data.get(collection_name, {}).get(item_id)
+    if not item_to_delete or item_to_delete.get('user_id') != session['user']['id']:
+        flash("Item not found or you don't have permission to delete it.", "error")
+        return redirect(url_for('index'))
+
+    photo_filename_key = None
+    if item_type == 'resume': photo_filename_key = 'photo_filename'
+    elif item_type == 'vacancy': photo_filename_key = 'company_logo_filename'
     
-    # Dynamically add fields based on item_type from formFieldsConfig (implicitly)
-    # Assuming client sends all relevant fields
-    for key, value in req_data.items():
-        if key not in ['itemType', 'itemId', 'user_id', 'user_display_name', 'timestamp', 'id']: # internal/managed fields
-            new_item[key] = value 
-            
-    # Basic validation (presence of a title-like field)
-    title_field_present = any(k in new_item for k in ['title', 'job_title', 'offer_title'])
-    if not title_field_present or not new_item.get(next(k for k in ['title', 'job_title', 'offer_title'] if k in new_item)): # ensure it's not empty
-        return jsonify({"detail": "A title field is required and cannot be empty."}), 400
-
+    old_photo_to_delete = item_to_delete.get(photo_filename_key) if photo_filename_key else None
 
-    data[item_type].append(new_item)
+    del data[collection_name][item_id]
     save_data(data)
-    logging.info(f"User {user.get('id')} created {item_type}: {new_item.get('id')}")
-    return jsonify(new_item), 201
-
-@app.route('/api/delete_item/<item_type>/<item_id>', methods=['POST'])
-def delete_item_api(item_type, item_id):
-    init_data_str = request.args.get('initData') # Or from request.json.get('initData')
-    user = verify_telegram_init_data(init_data_str)
-    if not user:
-        return jsonify({"detail": "Unauthorized: Invalid Telegram data"}), 401
-
-    data = load_data()
-    if item_type not in data:
-        return jsonify({"detail": "Invalid item type"}), 404
+    
+    if old_photo_to_delete and HF_TOKEN_WRITE:
+        try:
+            api = HfApi()
+            api.delete_file(repo_id=REPO_ID, path_in_repo=f"photos/{old_photo_to_delete}", repo_type="dataset", token=HF_TOKEN_WRITE)
+            logging.info(f"Photo {old_photo_to_delete} deleted from HF for deleted {item_type} {item_id}.")
+        except Exception as e:
+            logging.error(f"Error deleting photo {old_photo_to_delete} from HF: {e}", exc_info=True)
+            flash("Item deleted, but failed to delete associated photo from storage.", "warning")
 
-    items_list = data[item_type]
-    item_to_delete = next((item for item in items_list if item['id'] == item_id), None)
+    flash(f"{get_item_type_display_name(item_type)} deleted successfully.", "success")
+    return redirect(url_for('my_postings'))
 
-    if not item_to_delete:
-        return jsonify({"detail": "Item not found"}), 404
 
-    if item_to_delete['user_id'] != user.get('id'):
-        # Add admin check here if you have admin users
-        # For now, only owners can delete
-        logging.warning(f"User {user.get('id')} attempted to delete item {item_id} owned by {item_to_delete['user_id']}")
-        return jsonify({"detail": "Forbidden: You can only delete your own items"}), 403
+@app.route('/my_postings')
+def my_postings():
+    data = load_data()
+    user_id = session['user']['id']
     
-    data[item_type] = [item for item in items_list if item['id'] != item_id]
-    save_data(data)
-    logging.info(f"User {user.get('id')} deleted {item_type}: {item_id}")
-    return jsonify({"detail": "Item deleted successfully"}), 200
-
+    my_resumes = {k: v for k, v in data.get('resumes', {}).items() if v.get('user_id') == user_id}
+    my_vacancies = {k: v for k, v in data.get('vacancies', {}).items() if v.get('user_id') == user_id}
+    my_freelance_offers = {k: v for k, v in data.get('freelance_offers', {}).items() if v.get('user_id') == user_id}
+
+    return render_template_string(
+        BASE_TEMPLATE.format(**session.get('themeParams', {})) + MY_POSTINGS_TEMPLATE,
+        my_resumes=my_resumes,
+        my_vacancies=my_vacancies,
+        my_freelance_offers=my_freelance_offers,
+        repo_id=REPO_ID
+    )
+
+@app.route('/admin_sync', methods=['GET'])
+def admin_sync():
+    # Basic protection: only allow if user is authenticated (any Telegram user)
+    # For real admin, you'd check against a list of admin user IDs
+    if 'user' not in session or not session['user']:
+        flash("You must be authenticated to access the sync panel.", "error")
+        return redirect(url_for('index'))
+        
+    data = load_data()
+    data_counts = {
+        "resumes": len(data.get('resumes', {})),
+        "vacancies": len(data.get('vacancies', {})),
+        "freelance_offers": len(data.get('freelance_offers', {}))
+    }
+    return render_template_string(
+        BASE_TEMPLATE.format(**session.get('themeParams', {})) + ADMIN_SYNC_TEMPLATE,
+        data_counts=data_counts
+    )
+
+@app.route('/force_upload_sync', methods=['POST']) # Renamed route to avoid conflict if old code is around
+def force_upload():
+    if 'user' not in session or not session['user']: # Basic protection
+        flash("Authentication required.", "error")
+        return redirect(url_for('index'))
+    logging.info("Forcing upload to Hugging Face...")
+    upload_db_to_hf()
+    flash("Data successfully uploaded to Hugging Face.", 'success')
+    return redirect(url_for('admin_sync'))
+
+@app.route('/force_download_sync', methods=['POST']) # Renamed route
+def force_download():
+    if 'user' not in session or not session['user']: # Basic protection
+        flash("Authentication required.", "error")
+        return redirect(url_for('index'))
+    logging.info("Forcing download from Hugging Face...")
+    if download_db_from_hf():
+        flash("Data successfully downloaded. Local files updated.", 'success')
+        load_data() # Reload data in memory
+    else:
+        flash("Failed to download data. Check logs.", 'error')
+    return redirect(url_for('admin_sync'))
 
+# --- App Initialization ---
 if __name__ == '__main__':
-    logging.info("Application starting up. Performing initial data load/download...")
-    if not os.path.exists(DATA_FILE):
-        logging.info(f"{DATA_FILE} not found locally, attempting initial download from HF.")
-        download_db_from_hf(DATA_FILE) # Attempt to fetch if not present
+    logging.info("TonTalent Application starting up...")
+    if not os.path.exists(TONTALENT_DATA_FILE):
+        logging.info(f"{TONTALENT_DATA_FILE} not found locally, attempting initial download/creation.")
+        download_db_from_hf() # This will create an empty file if not on HF and not local
     
-    load_data() # Load whatever is available or default
+    load_data() # Load initial data
     logging.info("Initial data load/check complete.")
 
     if HF_TOKEN_WRITE:
@@ -945,6 +1224,6 @@ if __name__ == '__main__':
     else:
         logging.warning("Periodic backup will NOT run (HF_TOKEN_WRITE not set).")
 
-    port = int(os.environ.get('PORT', 7860))
+    port = int(os.environ.get('PORT', 7861)) # Different port from original app
     logging.info(f"Starting Flask app on host 0.0.0.0 and port {port}")
     app.run(debug=False, host='0.0.0.0', port=port)