<!-- VERSIONE: 00.00.29 -->
<!--
MODIFICHE E IMPLEMENTAZIONI EFFETTUATE (CHANGELOG):
PERCORSO ORIGINE FILE: P:\tripstricks\templates\index.html
CARTELLA BACKUP VERSIONATI DEL PROGETTO: H:\BackupSoftware\Backup_Progetti_Attivi\tripstricks
27/08/2026 07:35:47 - Versione 00.00.29 - Descrizioni: riscritti definitivamente su righe separate i blocchi JavaScript Tx solo testo dopo verifica del file reale.
27/08/2026 07:32:46 - Versione 00.00.28 - Descrizioni: normalizzata la formattazione dei blocchi JavaScript Tx su righe reali per mantenere il diff leggibile e verificabile.
27/08/2026 07:30:03 - Versione 00.00.27 - Descrizioni: riscritti in forma multilinea i blocchi JavaScript del comando Tx solo testo, senza cambiare la logica applicata.
27/08/2026 07:26:49 - Versione 00.00.26 - Descrizioni: il comando Tx converte la descrizione in solo testo e il salvataggio mantiene il marker grafico solo quando resta formattazione reale.
27/08/2026 07:09:52 - Versione 00.00.25 - Testata home: separato il logo su una prima riga dedicata e spostati titolo, badge/IP/Patreon a sinistra della seconda riga con tema, Backup e accesso a destra.
27/08/2026 06:38:28 - Versione 00.00.24 - Descrizioni: ridotta l'interlinea nella vista grafica e nell'editor, riportando righe e paragrafi a una spaziatura piu compatta.
27/08/2026 06:36:58 - Versione 00.00.23 - Risultati: all'apertura dettaglio la vista grafica viene mostrata solo per descrizioni ricche; per testo normale resta visibile la vista testo/codice.
27/08/2026 06:35:13 - Versione 00.00.22 - Toolbar descrizione: resa persistente la selezione del testo dopo i comandi di formattazione, evitando che venga sostituita da una selezione vuota sui controlli.
27/08/2026 06:33:09 - Versione 00.00.21 - Toolbar descrizione: forzata una sola riga per tutti i comandi di formattazione, con controlli compatti e scorrimento orizzontale quando serve; il menu carattere mantiene la scelta selezionata.
26/08/2026 23:43:09 - Versione 00.00.20 - Toolbar descrizione: mantenuta la selezione quando si usano colore/font/dimensione e reso operativo il reset colore automatico.
26/08/2026 23:22:58 - Versione 00.00.19 - Sostituiti i bottoni limitati colore/font/dimensione con controlli tipo editor: font a menu, dimensione numerica in punti, selettore colore e reset colore automatico.
26/08/2026 22:55:28 - Versione 00.00.18 - Aggiunta tavolozza colori testo e scelta tipo carattere nella toolbar grafica del nuovo inserimento descrizione.
26/08/2026 22:32:55 - Versione 00.00.17 - Rimosse righe vuote con spazi finali dal blocco Contatti per superare il controllo tecnico git diff --check prima del commit.
26/08/2026 19:22:46 - Versione 00.00.16 - Sostituiti i menu Stile/Dimensione con pulsanti tipografici, corretta la dimensione testo senza comando fontSize e preservati selezione e spazi iniziali in vista grafica.
26/08/2026 19:17:45 - Versione 00.00.15 - Impostata la vista grafica come visualizzazione iniziale delle descrizioni nei risultati, lasciando la vista testo selezionabile dal pulsante.
26/08/2026 19:16:22 - Versione 00.00.14 - Ripristinato il doppio clic di copia sulle descrizioni, anche in vista grafica, usando il punto reale del mouse prima della selection del browser.
26/08/2026 18:37:31 - Versione 00.00.13 - Riorganizzata la riga dei risultati: badge Categoria, Link, File e Privato sulla prima riga; titolo subito sotto.
26/08/2026 17:35:15 - Versione 00.00.12 - Aggiunto editor grafico per nuovo post, resa HTML sicura delle descrizioni ricche e Ctrl+A limitato ai blocchi descrizione.
03/08/2026 00:42:00 - Versione 00.00.11 - Copiato in fondo alla pagina il blocco Contatti Diretti dal sito personale, adattato ai temi Bootstrap chiaro/scuro.
03/08/2026 00:22:00 - Versione 00.00.10 - Sostituito il selettore tema con pulsante toggle Chiaro/Scuro; tema iniziale predefinito Scuro.
03/08/2026 00:16:00 - Versione 00.00.09 - Aggiunto riepilogo post nella testata risultati: totale personale per user e conteggi per autore per admin.
02/08/2026 23:53:00 - Versione 00.00.08 - Gli utenti role user possono inserire post e modificare/cancellare soltanto i propri; admin mantiene accesso completo.
02/08/2026 23:20:55 - Versione 00.00.07 - Rimossa spaziatura finale nel nuovo helper copia appunti.
02/08/2026 23:18:47 - Versione 00.00.07 - Corretto helper copia appunti e completato l'uso dell'offset globale per blocchi multilinea e righe normali.
02/08/2026 23:17:18 - Versione 00.00.07 - Aggiunta copia multilinea su doppio clic per blocchi delimitati da :>> e <<:.
20/07/2026 23:55:46 - Versione 00.00.06 - Aggiunta vista grafica opzionale per le descrizioni, mantenendo disponibile la vista testo/codice originale.
20/07/2026 10:33:48 - Versione 00.00.05 - Corretto il doppio clic sulla descrizione: quando una riga contiene piu simboli > o :>, viene copiato solo il blocco relativo al punto cliccato.
20/07/2026 10:18:08 - Versione 00.00.04 - Aggiunta richiesta password per il download degli allegati agli utenti non loggati.
14/07/2026 04:25:30 - Versione 00.00.03 - Aggiunto click sulla riga del post per aprire e chiudere il dettaglio con lo stesso comportamento del pulsante Visualizza.
14/07/2026 03:58:04 - Versione 00.00.02 - Dopo una ricerca testuale con Invio, il campo di ricerca globale mantiene il focus e il cursore resta alla fine del testo filtrato.
12/07/2026 08:12:49 - Versione 00.00.01 - Corretto il posizionamento del form Inserisci Nuovo Post: all'apertura va all'inizio del form e sul campo Titolo, non sul pulsante Salva Post.
-->

<!doctype html>
<html lang="it"> 
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Archivio Tips&Tricks</title>
        <link rel="shortcut icon" href="/tips/static/fare-sito-web.png" type="image/x-icon">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        <script>
            const updateTheme = () => {
                const savedTheme = localStorage.getItem('theme') || 'dark';
                document.documentElement.setAttribute('data-bs-theme', savedTheme);

                const themeToggle = document.getElementById('themeToggle');
                if (themeToggle) {
                    themeToggle.textContent = savedTheme === 'dark' ? '☀️ Chiaro' : '🌙 Scuro';
                    themeToggle.setAttribute(
                        'title',
                        savedTheme === 'dark'
                            ? 'Passa al tema chiaro'
                            : 'Passa al tema scuro'
                    );
                }
            };

            const toggleTheme = () => {
                const currentTheme =
                    document.documentElement.getAttribute('data-bs-theme') || 'dark';
                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                localStorage.setItem('theme', newTheme);
                updateTheme();
            };

            updateTheme();
        </script>
        <style>
            .break-word { word-break: break-all; }
            .post-row-clickable { cursor: pointer; }
            .description-rendered {
                font-family: inherit;
                font-size: 0.98rem;
                line-height: 1.3;
                white-space: pre-wrap;
                overflow-x: hidden;
                cursor: default;
            }
            .description-rendered p { margin: 0 0 0.25rem; }
            .description-rendered p:last-child { margin-bottom: 0; }
            .description-rendered h3,
            .description-rendered h4,
            .description-rendered h5,
            .description-rendered h6 {
                margin: 0.9rem 0 0.45rem;
                font-weight: 700;
            }
            .description-rendered h3:first-child,
            .description-rendered h4:first-child,
            .description-rendered h5:first-child,
            .description-rendered h6:first-child { margin-top: 0; }
            .description-rendered ul,
            .description-rendered ol {
                margin: 0 0 0.75rem 1.35rem;
                padding: 0;
            }
            .description-rendered li { margin-bottom: 0.25rem; }
            .description-rendered code {
                padding: 0.1rem 0.3rem;
                border-radius: 0.25rem;
                background: var(--bs-secondary-bg);
                color: var(--bs-body-color);
            }
            .description-rendered .desc-code-block {
                margin: 0 0 0.75rem;
                padding: 0.85rem;
                border: 1px solid var(--bs-border-color);
                border-radius: 0.375rem;
                background: var(--bs-body-bg);
                overflow-x: auto;
            }
            .description-rendered blockquote {
                margin: 0 0 0.75rem;
                padding: 0.5rem 0.75rem;
                border-left: 0.25rem solid var(--bs-primary);
                background: var(--bs-body-bg);
                color: var(--bs-body-color);
            }
            .description-rendered .desc-tag-block {
                margin: 0 0 0.75rem;
                padding: 0.65rem 0.75rem;
                border: 1px solid var(--bs-border-color);
                border-left: 0.25rem solid var(--bs-info);
                border-radius: 0.375rem;
                background: var(--bs-body-bg);
            }
            .description-rendered .desc-tag-name {
                display: inline-block;
                margin-bottom: 0.35rem;
                font-size: 0.75rem;
                font-weight: 700;
                text-transform: uppercase;
                color: var(--bs-info-text-emphasis);
            }
            .description-rendered .desc-empty-line { height: 0.4rem; }
            .description-rendered a { word-break: break-all; }
            .description-rendered:focus,
            .rich-description-editor:focus {
                outline: 0;
                box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
            }
            .rich-description-toolbar {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                gap: 0.25rem;
                padding: 0.35rem 0.4rem;
                border: 1px solid var(--bs-border-color);
                border-bottom: 0;
                border-radius: 0.375rem 0.375rem 0 0;
                background: var(--bs-body-bg);
                overflow-x: auto;
                overflow-y: hidden;
                white-space: nowrap;
            }
            .rich-description-toolbar > * { flex: 0 0 auto; }
            .rich-description-toolbar .btn {
                min-width: 2rem;
                padding: 0.25rem 0.45rem;
                white-space: nowrap;
            }
            .rich-description-toolbar .form-select,
            .rich-description-toolbar .form-control,
            .rich-description-toolbar .input-group-text {
                height: 1.85rem;
                font-size: 0.8rem;
            }
            .rich-description-block-select { width: 6.1rem; }
            .rich-description-font-select { width: 9.2rem; }
            .rich-description-size-control { width: 5.4rem; }
            .rich-description-size-control .form-control { padding-right: 0.2rem; }
            .rich-description-color-control { width: 7.8rem; }
            .rich-description-color-picker {
                width: 2.35rem;
                min-width: 2.35rem;
                padding: 0.12rem 0.2rem;
            }
            .rich-description-color-reset { min-width: 2.6rem; }
            .rich-description-editor {
                min-height: 14rem;
                padding: 0.85rem;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                line-height: 1.3;
                overflow-x: auto;
                white-space: pre-wrap;
            }
            .rich-description-editor:empty::before {
                content: attr(data-placeholder);
                color: var(--bs-secondary-color);
                pointer-events: none;
            }
            .rich-description-editor p,
            .rich-description-editor div { margin: 0 0 0.25rem; }
            .rich-description-editor h3,
            .rich-description-editor h4,
            .rich-description-editor h5,
            .rich-description-editor h6 { margin: 0.85rem 0 0.45rem; font-weight: 700; }
            .rich-description-editor ul,
            .rich-description-editor ol { margin: 0 0 0.75rem 1.35rem; padding: 0; }
            .rich-description-editor blockquote {
                margin: 0 0 0.75rem;
                padding: 0.5rem 0.75rem;
                border-left: 0.25rem solid var(--bs-primary);
                background: var(--bs-body-tertiary);
            }
            .rich-description-editor pre {
                margin: 0 0 0.75rem;
                padding: 0.85rem;
                border: 1px solid var(--bs-border-color);
                border-radius: 0.375rem;
                background: var(--bs-body-bg);
                overflow-x: auto;
            }
            .rich-description-wrapper .invalid-feedback { display: none; }
            .rich-description-wrapper.is-invalid .invalid-feedback { display: block; }
            .rich-description-wrapper.is-invalid .rich-description-editor { border-color: var(--bs-danger); }
        </style>
    </head>
    
    <body>
        
        <div class="container-fluid py-4">
            <div class="px-md-5 px-4">
                <div class="sticky-top bg-body pb-1" style="z-index: 1030; margin-top: -1.5rem; padding-top: 1.5rem;">
                    <div class="mb-2">
                        <img src="/tips/static/stefano_salvi_software_logo_blu_rifilato.png" alt="Logo" style="width: 180px; height: 50px; vertical-align: middle;">
                    </div>

                    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 border-bottom pb-3 gap-3">
                        <div class="d-flex align-items-center flex-wrap gap-2">
                            <h1 class="m-0 d-inline-block me-2">Tips & Tricks</h1>

                            
                                <span class="badge bg-secondary align-middle">👤 Navigazione Libera (Ospite)</span>
                                <span class="badge bg-dark text-white align-middle" style="font-family: monospace;">
                                    Il tuo IP: 216.73.217.172
                                </span>
                                <a href="https://www.patreon.com/home" title="Patreon Home" target="_blank" class="align-middle">
                                    <img src="/tips/static/patreon.png" alt="Patreon" style="width: 24px; height: 24px;">
                                </a>
                                <span class="align-middle">(Patreon)</span>

                            
                        </div>

                        <div class="d-flex align-items-center justify-content-start justify-content-md-end flex-wrap gap-2 ms-md-auto">
                            <button
                                type="button"
                                id="themeToggle"
                                class="btn btn-sm btn-outline-secondary align-middle"
                                onclick="toggleTheme()"
                                title="Passa al tema chiaro">
                                🌙 Scuro
                            </button>

                            
                                <a href="/tips/login" class="btn btn-primary">Accedi</a>
                            
                        </div>
                    </div>

                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4 p-3 bg-body-tertiary rounded shadow-sm">
                        <form method="GET" action="/tips/" class="d-flex flex-wrap gap-2 flex-grow-1 m-0">
                            <input type="text" id="campo-ricerca-globale" name="search_titolo" class="form-control" style="min-width: 200px; flex: 1;" placeholder="Cerca in tutti i campi..." value="">
                            <button type="submit" class="btn btn-primary">Cerca</button>
                            
                                <a href="/tips/?reset=1" class="btn btn-outline-secondary">Resetta</a>
                            
                        </form>
                        <div class="text-md-end">
                            
                                <span title="Effettua l'accesso per abilitare l'inserimento" class="d-inline-block">
                                    <button type="button" class="btn btn-success fw-bold text-nowrap" disabled style="pointer-events: none;">➕ Inserisci Nuovo Post</button>
                                </span>
                            
                        </div>
                    </div>
                </div>

                
                    
                
                
                <form id="form-nuovo-post" action="/tips/add" method="POST" enctype="multipart/form-data" style="display: none;">
                    <div class="card shadow-sm mb-5 border-primary">
                        <div class="card-header bg-primary text-white fw-bold">
                        Nuovo Post
                    </div>

                    <div class="card-body">
                        <div class="row gx-2">
                            <div class="col-md-9">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Titolo</label>
                                    <input type="text" name="titolo" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Categoria</label>
                                    <input type="text" name="categoria" list="lista-categorie" class="form-control" placeholder="Seleziona o scrivi..." value="Acrobat" autocomplete="off">
                                    <datalist id="lista-categorie">
                                        
                                            <option value="Acrobat"></option>
                                        
                                            <option value="Altro"></option>
                                        
                                            <option value="Hardware"></option>
                                        
                                            <option value="IA"></option>
                                        
                                            <option value="Installazioni"></option>
                                        
                                            <option value="Linux"></option>
                                        
                                            <option value="Motivazione"></option>
                                        
                                            <option value="Posta elettronica"></option>
                                        
                                            <option value="Powershell"></option>
                                        
                                            <option value="Rete"></option>
                                        
                                            <option value="Salute"></option>
                                        
                                            <option value="Server"></option>
                                        
                                            <option value="Server NAS"></option>
                                        
                                            <option value="Sistemi operativi"></option>
                                        
                                            <option value="Siti Web"></option>
                                        
                                            <option value="Stampanti"></option>
                                        
                                            <option value="VS CODE"></option>
                                        
                                            <option value="Windows"></option>
                                        
                                            <option value="Word"></option>
                                        
                                    </datalist>
                                </div>
                            </div>

                        </div>

                        <div class="mb-3 rich-description-wrapper" data-rich-description-wrapper>
                            <label class="form-label fw-bold">Descrizione / Codice</label>
                            <textarea id="nuovo-descrizione" name="descrizione" class="d-none" data-rich-description-source></textarea>
                            <div class="rich-description-toolbar" role="toolbar" aria-label="Comandi descrizione">
                                <div class="btn-group btn-group-sm" role="group">
                                    <button type="button" class="btn btn-outline-secondary" data-rich-command="bold" title="Grassetto"><strong>B</strong></button>
                                    <button type="button" class="btn btn-outline-secondary" data-rich-command="italic" title="Italico"><em>I</em></button>
                                    <button type="button" class="btn btn-outline-secondary" data-rich-command="underline" title="Sottolineato"><u>U</u></button>
                                    <button type="button" class="btn btn-outline-secondary" data-rich-command="strikeThrough" title="Barrato"><s>S</s></button>
                                </div>
                                <select class="form-select form-select-sm rich-description-block-select" data-rich-block-select title="Stile paragrafo">
                                    <option value="">Stile</option>
                                    <option value="p">Normale</option>
                                    <option value="h3">Titolo 1</option>
                                    <option value="h4">Titolo 2</option>
                                    <option value="blockquote">Citazione</option>
                                    <option value="pre">Codice</option>
                                </select>
                                <select class="form-select form-select-sm rich-description-font-select" data-rich-font-select title="Tipo carattere">
                                    <option value="">Carattere</option>
                                    <option value='"Aptos", "Segoe UI", sans-serif'>Aptos</option>
                                    <option value="Arial, sans-serif">Arial</option>
                                    <option value="Calibri, sans-serif">Calibri</option>
                                    <option value="Georgia, serif">Serif</option>
                                    <option value="'Times New Roman', serif">Times New Roman</option>
                                    <option value="Verdana, sans-serif">Verdana</option>
                                    <option value="Consolas, monospace">Consolas</option>
                                    <option value="'Courier New', monospace">Courier New</option>
                                </select>
                                <div class="input-group input-group-sm rich-description-size-control" title="Dimensione testo">
                                    <input type="number" class="form-control" min="8" max="72" step="1" value="12" data-rich-size-input aria-label="Dimensione testo">
                                    <span class="input-group-text">pt</span>
                                </div>
                                <div class="input-group input-group-sm rich-description-color-control" title="Colore testo">
                                    <span class="input-group-text">A</span>
                                    <input type="color" class="form-control form-control-color rich-description-color-picker" value="#212529" data-rich-color-input aria-label="Colore testo">
                                    <button type="button" class="btn btn-outline-secondary rich-description-color-reset" data-rich-color-reset title="Nessun colore / colore automatico">Auto</button>
                                </div>
                                <div class="btn-group btn-group-sm" role="group">
                                    <button type="button" class="btn btn-outline-secondary" data-rich-command="insertUnorderedList" title="Elenco puntato">UL</button>
                                    <button type="button" class="btn btn-outline-secondary" data-rich-command="insertOrderedList" title="Elenco numerato">OL</button>
                                    <button type="button" class="btn btn-outline-secondary" data-rich-command="createLink" title="Collegamento">Link</button>
                                    <button type="button" class="btn btn-outline-secondary" data-rich-command="removeFormat" title="Rimuovi tutta la formattazione e salva come testo">Tx</button>
                                </div>
                            </div>
                            <div id="nuovo-descrizione-editor" class="form-control rich-description-editor" contenteditable="true" data-rich-description-editor data-rich-required="1" data-rich-original-mode="plain" data-source-id="nuovo-descrizione" data-placeholder="Scrivi qui il codice o la descrizione dell'appunto..."></div>
                            <div class="invalid-feedback rich-description-feedback">La descrizione e obbligatoria.</div>
                        </div>

                        <div class="col-12">
                            <div class="p-3 bg-body rounded border shadow-sm">
                                <div class="fw-bold text-secondary mb-3" style="font-size: 0.85rem; letter-spacing: 0.5px;">🔗 LINK UTILI:</div>
                                <div id="links-container" class="mb-2">
                                    <div class="input-group mb-2">
                                        <input type="text" name="links" class="form-control" placeholder="URL (es. https://...)">
                                        <input type="text" name="link_notes" class="form-control" placeholder="Nota descrittiva facoltativa">
                                    </div>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-primary fw-medium" onclick="addLinkField('links-container')">➕ Aggiungi Nuovo Link</button>
                            </div>
                        </div>
                            
                        <div class="col-12">
                            <div class="p-3 bg-body rounded border shadow-sm">
                                <div class="fw-bold text-secondary mb-3" style="font-size: 0.85rem; letter-spacing: 0.5px;">📁 ALLEGATI (IMMAGINI/VIDEO/FILE):</div>
                                    <div id="file-container" class="mb-2">
                                        <div class="input-group mb-2">
                                            <input type="file" name="files" class="form-control">
                                            <button class="btn btn-outline-secondary" type="button" onclick="addFileField('file-container')">➕</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-end mt-3">
                            <button type="submit" class="btn btn-success px-4 fw-bold shadow-sm">Salva Post</button>
                        </div>
                    </div>
                </form>

                <div class="mb-4 p-3 bg-body-tertiary rounded shadow-sm d-flex flex-wrap align-items-center gap-2">
                    <span class="fw-bold me-1">Filtra per Categoria:</span>
                    <a href="/tips/?categoria=" class="btn btn-sm btn-outline-secondary">Tutte</a>
                    
                        
                            <a href="/tips/?categoria=Acrobat" class="btn btn-sm btn-primary fw-bold">Acrobat</a>
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                </div>

                <div class="p-3 bg-body-tertiary rounded shadow-sm mb-4">
                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                        <div class="d-flex flex-wrap align-items-center gap-2">
                            <h3 class="m-0">Risultati</h3>

                            
                        </div>

                        <span class="badge bg-info text-dark fs-6">Trovati: 0</span>
                    </div>
                    <div class="row g-0">
                        
                        <div class="col-12">
                            <div class="alert alert-info text-center">Nessun post trovato con i filtri selezionati.</div>
                        </div>
                        
                    </div>
                </div>

    <div class="contact-card mt-4 mb-4" style="background: linear-gradient(145deg, var(--bs-body-bg), var(--bs-secondary-bg)); border: 1px solid var(--bs-border-color); padding: 35px; border-radius: 12px; text-align: left; box-shadow: 0 15px 35px rgba(0,0,0,0.08);">
        <h3 style="margin-bottom: 25px; color: var(--bs-body-color); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px;">
            <span style="color: var(--bs-primary);">⚡</span> Contatti Diretti
        </h3>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px;">

            <div style="display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(0,0,0,0.02); border: 1px solid var(--bs-border-color); border-radius: 8px;">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <div style="font-size: 1.1rem; width: 28px; height: 28px; background: rgba(0, 82, 255, 0.08); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">📞</div>
                    <div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); font-weight: 600;">Telefono</div>
                </div>
                <div>
                    <a href="Voce.:+393351508511" style="color: var(--bs-primary); text-decoration: none; font-weight: 600; font-size: 0.85rem;">Cell.: +39 335 1508511</a>
                </div>
            </div>

            <div style="display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(0,0,0,0.02); border: 1px solid var(--bs-border-color); border-radius: 8px;">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <div style="width: 28px; height: 28px; background: rgba(37, 211, 102, 0.1); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                        <svg style="width: 16px; height: 16px; fill: #25D366;" viewBox="0 0 24 24">
                            <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.713-1.455L0 24zm6.79-4.141c1.559.926 3.109 1.411 4.743 1.412 5.536 0 10.04-4.432 10.044-9.879.002-2.638-1.025-5.117-2.892-6.988-1.867-1.871-4.35-2.901-6.992-2.902-5.543 0-10.046 4.434-10.05 9.882-.001 1.727.461 3.415 1.339 4.904l-.995 3.636 3.757-.965zm11.599-5.115c-.326-.162-1.926-.938-2.222-1.045-.297-.108-.512-.162-.726.162-.215.324-.833 1.046-1.02 1.262-.188.216-.376.243-.702.082-.326-.162-1.375-.501-2.62-1.601-.968-.853-1.621-1.908-1.812-2.23-.191-.324-.02-.5-.182-.661-.147-.146-.326-.379-.489-.569-.163-.189-.217-.324-.326-.54-.109-.217-.055-.405-.027-.568.028-.162.215-.513.326-.676.11-.163.147-.27.221-.432.074-.162.037-.306.018-.468-.018-.163-.215-.938-.297-1.13-.08-.192-.163-.166-.222-.169l-.19-.004c-.215 0-.563.081-.857.399-.294.319-1.124 1.081-1.124 2.637 0 1.555 1.153 3.059 1.314 3.275.162.217 2.27 3.42 5.498 4.793.768.327 1.368.521 1.832.667.772.243 1.474.208 2.028.127.618-.091 1.926-.777 2.197-1.492.271-.715.271-1.326.19-1.454-.08-.127-.296-.209-.622-.372z"/>
                        </svg>
                    </div>
                    <div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); font-weight: 600;">WhatsApp</div>
                </div>
                <div>
                    <a href="https://wa.me/393242509985" target="_blank" style="color: var(--bs-primary); text-decoration: none; font-weight: 600; font-size: 0.85rem;">Inviami messaggio</a>
                </div>
            </div>

            <div style="display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(0,0,0,0.02); border: 1px solid var(--bs-border-color); border-radius: 8px;">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <div style="width: 28px; height: 28px; background: rgba(234, 67, 53, 0.1); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                        <svg style="width: 16px; height: 16px; fill: #EA4335;" viewBox="0 0 24 24">
                            <path d="M24 5.457v13.086c0 .804-.652 1.457-1.457 1.457h-3.828V9.172L12 14.162 3.285 9.172v10.828H1.457C.652 20 0 19.348 0 18.543V5.457c0-.796.643-1.442 1.437-1.455L3.37 4l8.63 4.931L20.63 4l1.933.002c.794.013 1.437.659 1.437 1.455z"/>
                        </svg>
                    </div>
                    <div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); font-weight: 600;">Email</div>
                </div>
                <div style="min-width: 0;">
                    <a href="mailto:stefano@stefano-salvi.it" style="color: var(--bs-primary); text-decoration: none; font-weight: 600; font-size: 0.85rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">stefano@stefano-salvi.it</a>
                </div>
            </div>

            <div style="display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(0,0,0,0.02); border: 1px solid var(--bs-border-color); border-radius: 8px;">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <div style="width: 28px; height: 28px; background: rgba(24, 119, 242, 0.1); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                        <svg style="width: 16px; height: 16px; fill: #1877F2;" viewBox="0 0 24 24">
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                        </svg>
                    </div>
                    <div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); font-weight: 600;">Facebook</div>
                </div>
                <div>
                    <a href="https://www.facebook.com/share/1DENUMH9JF/" target="_blank" style="color: var(--bs-primary); text-decoration: none; font-weight: 600; font-size: 0.85rem;">Visita il mio profilo fb</a>
                </div>
            </div>

        </div>
    </div>
            </div>
        </div>

        
        <div class="modal fade" id="downloadPasswordModal" tabindex="-1" aria-labelledby="downloadPasswordModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form id="downloadPasswordForm" method="POST" target="_blank">
                        <div class="modal-header">
                            <h5 class="modal-title" id="downloadPasswordModalLabel">Password download</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-2 fw-semibold text-truncate" id="downloadPasswordFilename"></div>
                            <div class="form-floating">
                                <input type="password" name="download_password" class="form-control" id="downloadPasswordInput" placeholder="Password" required autocomplete="off">
                                <label for="downloadPasswordInput">Password</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annulla</button>
                            <button type="submit" class="btn btn-primary">Scarica</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        

        <div class="modal fade" id="backupModal" tabindex="-1" aria-labelledby="backupModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="backupModalLabel">Gestione Backup Database</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h6>Esporta i dati</h6>
                    <p class="text-muted small">Scarica l'intero contenuto attuale dell'archivio in un file JSON.</p>
                    <a href="/tips/export" class="btn btn-primary btn-sm mb-4">📥 Scarica Backup JSON</a>
                    <hr>
                    <h6>Importa i dati</h6>
                    <p class="text-muted small">Carica un file JSON precedentemente scaricato. I dati verranno aggiunti a quelli esistenti.</p>
                    <form action="/tips/import" method="POST" enctype="multipart/form-data">
                        <div class="mb-3">
                            <input class="form-control form-control-sm" type="file" name="backup_file" accept=".json" required>
                        </div>
                        <button type="submit" class="btn btn-success btn-sm">📤 Carica e Importa dati</button>
                    </form>
                </div>
                </div>
            </div>
        </div>

        <button onclick="window.scrollTo({top: 0, behavior: 'smooth'});" class="btn btn-primary rounded-circle shadow-lg d-flex align-items-center justify-content-center" style="position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; z-index: 9999; font-size: 1.25rem; border: none !important;" title="Torna ad inizio pagina">
            ▲
        </button>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

        <script>
            const RICH_DESCRIPTION_MARKER = '<!--TRIPSTRICKS_RICH_TEXT-->';

            document.addEventListener("DOMContentLoaded", () => {
                updateTheme();

                const campoRicercaGlobale = document.getElementById('campo-ricerca-globale');
                const ricercaGlobaleAttiva = false;
                if (ricercaGlobaleAttiva && campoRicercaGlobale) {
                    campoRicercaGlobale.focus();
                    const posizioneFinale = campoRicercaGlobale.value.length;
                    campoRicercaGlobale.setSelectionRange(posizioneFinale, posizioneFinale);
                }

                document.querySelectorAll('[data-post-collapse-target]').forEach((rigaPost) => {
                    rigaPost.addEventListener('click', (event) => {
                        if (event.target.closest('a, button, form, input, select, textarea, label')) {
                            return;
                        }

                        const selezioneTesto = window.getSelection();
                        if (selezioneTesto && selezioneTesto.toString().trim() !== '') {
                            return;
                        }

                        const targetCollapse = document.querySelector(rigaPost.dataset.postCollapseTarget);
                        if (!targetCollapse) {
                            return;
                        }

                        bootstrap.Collapse.getOrCreateInstance(targetCollapse, { toggle: false }).toggle();
                    });
                });

                const downloadPasswordModal = document.getElementById('downloadPasswordModal');
                if (downloadPasswordModal) {
                    const downloadPasswordForm = document.getElementById('downloadPasswordForm');
                    const downloadPasswordFilename = document.getElementById('downloadPasswordFilename');
                    const downloadPasswordInput = document.getElementById('downloadPasswordInput');

                    downloadPasswordModal.addEventListener('show.bs.modal', (event) => {
                        const trigger = event.relatedTarget;
                        if (!trigger || !downloadPasswordForm) {
                            return;
                        }

                        downloadPasswordForm.action = trigger.getAttribute('data-download-url') || '';
                        if (downloadPasswordFilename) {
                            downloadPasswordFilename.textContent = trigger.getAttribute('data-download-filename') || '';
                        }
                        if (downloadPasswordInput) {
                            downloadPasswordInput.value = '';
                        }
                    });

                    downloadPasswordModal.addEventListener('shown.bs.modal', () => {
                        if (downloadPasswordInput) {
                            downloadPasswordInput.focus();
                        }
                    });

                    if (downloadPasswordForm) {
                        downloadPasswordForm.addEventListener('submit', () => {
                            const modalInstance = bootstrap.Modal.getInstance(downloadPasswordModal);
                            if (modalInstance) {
                                modalInstance.hide();
                            }
                        });
                    }
                }

                initRichDescriptionEditors();
                initDescriptionSelectScopes();

                document.querySelectorAll('[id^="desc-text-"]').forEach((descrizioneTesto) => {
                    const id = descrizioneTesto.id.replace('desc-text-', '');
                    const descrizioneGrafica = document.getElementById('desc-graphic-' + id);
                    if (descrizioneGrafica && descrizioneGrafica.dataset.descriptionRich !== '1') {
                        descrizioneGrafica.innerHTML = renderDescriptionAsGraphic(descrizioneTesto.textContent);
                    }
                });
            });

            function toggleNuovoPost() {
                const form = document.getElementById('form-nuovo-post');
                if (form.style.display === 'none') {
                    form.style.display = 'block';
                    const campoTitolo = form.querySelector('input[name="titolo"]');
                    const intestazioneSticky = document.querySelector('.sticky-top');

                    function posizionaNuovoPostAllInizio() {
                        const margineAlto = intestazioneSticky ? intestazioneSticky.offsetHeight + 12 : 0;
                        const posizioneForm = form.getBoundingClientRect().top + window.pageYOffset;
                        window.scrollTo({
                            top: Math.max(0, posizioneForm - margineAlto),
                            left: 0,
                            behavior: 'auto'
                        });
                        if (campoTitolo) {
                            try {
                                campoTitolo.focus({ preventScroll: true });
                            } catch (_) {
                                campoTitolo.focus();
                            }
                        }
                    }
 
                    posizionaNuovoPostAllInizio();
                    requestAnimationFrame(posizionaNuovoPostAllInizio);
                    setTimeout(posizionaNuovoPostAllInizio, 120);
                } else {
                    form.style.display = 'none';
                }
            }

            function selectDescriptionElementContent(element) {
                const range = document.createRange();
                range.selectNodeContents(element);
                const selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
            }

            function saveRichDescriptionSelection(editor, options = {}) {
                const selection = window.getSelection();
                if (!selection || !selection.rangeCount) {
                    return;
                }
                const range = selection.getRangeAt(0);
                const allowCollapsed = options.allowCollapsed !== false;
                if (editor.contains(range.commonAncestorContainer) && (allowCollapsed || !range.collapsed)) {
                    editor._richDescriptionRange = range.cloneRange();
                }
            }

            function restoreRichDescriptionSelection(editor) {
                const selection = window.getSelection();
                if (!selection) {
                    return;
                }
                editor.focus();
                selection.removeAllRanges();
                if (editor._richDescriptionRange) {
                    try {
                        selection.addRange(editor._richDescriptionRange);
                        return;
                    } catch (_) {
                        editor._richDescriptionRange = null;
                    }
                }
                const range = document.createRange();
                range.selectNodeContents(editor);
                range.collapse(false);
                selection.addRange(range);
            }

            function restoreRichDescriptionSelectionAfterCommand(editor) {
                restoreRichDescriptionSelection(editor);
                requestAnimationFrame(() => restoreRichDescriptionSelection(editor));
                setTimeout(() => restoreRichDescriptionSelection(editor), 0);
            }

            function keepRichDescriptionSelection(editor, range) {
                const selection = window.getSelection();
                if (!selection || !range) {
                    return;
                }
                editor.focus();
                selection.removeAllRanges();
                selection.addRange(range);
                editor._richDescriptionRange = range.cloneRange();
            }

            function normalizeRichDescriptionEditor(editor) {
                editor.querySelectorAll('font[size="7"]').forEach((fontNode) => {
                    const span = document.createElement('span');
                    span.style.fontSize = fontNode.dataset.richFontSize || '1rem';
                    while (fontNode.firstChild) {
                        span.appendChild(fontNode.firstChild);
                    }
                    fontNode.replaceWith(span);
                });
                editor.querySelectorAll('a[href]').forEach((link) => {
                    let href = (link.getAttribute('href') || '').trim();
                    if (href && !/^[a-z][a-z0-9+.-]*:/i.test(href)) {
                        href = 'https://' + href;
                    }
                    link.setAttribute('href', href);
                    link.setAttribute('target', '_blank');
                    link.setAttribute('rel', 'noopener noreferrer');
                });
            }

            function richDescriptionText(editor) {
                return (editor.textContent || '').replace(/\u00a0/g, ' ').trim();
            }

            function richDescriptionPlainText(editor) {
                return (editor.innerText || editor.textContent || '')
                    .replace(/\u00a0/g, ' ')
                    .replace(/\r\n/g, '\n')
                    .replace(/\r/g, '\n');
            }

            function richDescriptionHasGraphicFormatting(editor) {
                return Boolean(editor.querySelector('strong, b, em, i, u, s, ul, ol, li, blockquote, pre, code, h3, h4, h5, h6, a, span[style]'));
            }

            function resetRichDescriptionToPlainText(editor) {
                const plainText = richDescriptionPlainText(editor);
                editor.innerHTML = '';
                editor.textContent = plainText;
                editor.dataset.richOriginalMode = 'plain';
                markRichDescriptionDirty(editor);
                syncRichDescriptionSource(editor);
                selectDescriptionElementContent(editor);
                saveRichDescriptionSelection(editor, { allowCollapsed: false });
                restoreRichDescriptionSelectionAfterCommand(editor);
            }

            function markRichDescriptionDirty(editor) {
                editor.dataset.richDirty = '1';
            }
            function syncRichDescriptionSource(editor) {
                const source = document.getElementById(editor.dataset.sourceId);
                if (!source) {
                    return;
                }
                if (editor.dataset.richOriginalMode === 'plain' && editor.dataset.richDirty !== '1') {
                    return;
                }
                normalizeRichDescriptionEditor(editor);
                const plainText = richDescriptionPlainText(editor);
                if (!plainText.trim()) {
                    source.value = '';
                    return;
                }
                source.value = richDescriptionHasGraphicFormatting(editor)
                    ? RICH_DESCRIPTION_MARKER + editor.innerHTML
                    : plainText;
            }

            function runRichDescriptionCommand(button) {
                const wrapper = button.closest('[data-rich-description-wrapper]');
                const editor = wrapper ? wrapper.querySelector('[data-rich-description-editor]') : null;
                if (!editor) {
                    return;
                }
                restoreRichDescriptionSelection(editor);
                const command = button.dataset.richCommand;
                if (command === 'removeFormat') {
                    resetRichDescriptionToPlainText(editor);
                    return;
                }
                if (command === 'createLink') {
                    let href = prompt('Inserisci URL del collegamento:');
                    if (!href) {
                        return;
                    }
                    href = href.trim();
                    if (href && !/^[a-z][a-z0-9+.-]*:/i.test(href)) {
                        href = 'https://' + href;
                    }
                    document.execCommand('createLink', false, href);
                } else {
                    document.execCommand(command, false, null);
                }
                markRichDescriptionDirty(editor);
                normalizeRichDescriptionEditor(editor);
                saveRichDescriptionSelection(editor);
                syncRichDescriptionSource(editor);
                restoreRichDescriptionSelectionAfterCommand(editor);
            }

            function richDescriptionEditorForControl(control) {
                const wrapper = control.closest('[data-rich-description-wrapper]');
                return wrapper ? wrapper.querySelector('[data-rich-description-editor]') : null;
            }

            function applyRichDescriptionBlock(select) {
                const blockValue = select.value;
                if (!blockValue) {
                    return;
                }
                const editor = richDescriptionEditorForControl(select);
                if (!editor) {
                    return;
                }
                restoreRichDescriptionSelection(editor);
                document.execCommand('formatBlock', false, blockValue);
                markRichDescriptionDirty(editor);
                saveRichDescriptionSelection(editor);
                syncRichDescriptionSource(editor);
                restoreRichDescriptionSelectionAfterCommand(editor);
                select.selectedIndex = 0;
            }

            function normalizeRichDescriptionPointSize(value) {
                const numericValue = Number.parseInt(value, 10);
                if (!Number.isFinite(numericValue)) {
                    return '';
                }
                const clampedValue = Math.max(8, Math.min(72, numericValue));
                return `${clampedValue}pt`;
            }

            function applyRichDescriptionInlineStyle(control, styleProperty, styleValue) {
                if (!styleValue) {
                    return;
                }
                const editor = richDescriptionEditorForControl(control);
                if (!editor) {
                    return;
                }
                restoreRichDescriptionSelection(editor);
                const selection = window.getSelection();
                if (!selection || !selection.rangeCount) {
                    return;
                }
                const range = selection.getRangeAt(0);
                if (!editor.contains(range.commonAncestorContainer) || range.collapsed) {
                    return;
                }
                const span = document.createElement('span');
                span.style[styleProperty] = styleValue;
                try {
                    range.surroundContents(span);
                } catch (_) {
                    const fragment = range.extractContents();
                    span.appendChild(fragment);
                    range.insertNode(span);
                }
                const selectedRange = document.createRange();
                selectedRange.selectNodeContents(span);
                keepRichDescriptionSelection(editor, selectedRange);
                markRichDescriptionDirty(editor);
                normalizeRichDescriptionEditor(editor);
                syncRichDescriptionSource(editor);
                restoreRichDescriptionSelectionAfterCommand(editor);
            }

            function applyRichDescriptionSize(input) {
                const sizeValue = normalizeRichDescriptionPointSize(input.value);
                if (!sizeValue) {
                    return;
                }
                input.value = Number.parseInt(sizeValue, 10);
                applyRichDescriptionInlineStyle(input, 'fontSize', sizeValue);
            }

            function applyRichDescriptionColor(input) {
                applyRichDescriptionInlineStyle(input, 'color', input.value);
            }

            function resetRichDescriptionColor(button) {
                applyRichDescriptionInlineStyle(button, 'color', 'var(--bs-body-color)');
            }

            function applyRichDescriptionFont(select) {
                if (!select.value) {
                    return;
                }
                applyRichDescriptionInlineStyle(select, 'fontFamily', select.value);
            }

            function validateRichDescriptionForm(form) {
                let valid = true;
                let firstInvalid = null;
                form.querySelectorAll('[data-rich-description-editor]').forEach((editor) => {
                    syncRichDescriptionSource(editor);
                    const wrapper = editor.closest('[data-rich-description-wrapper]');
                    const invalid = editor.dataset.richRequired === '1' && !richDescriptionText(editor);
                    if (wrapper) {
                        wrapper.classList.toggle('is-invalid', invalid);
                    }
                    if (invalid) {
                        valid = false;
                        firstInvalid = firstInvalid || editor;
                    }
                });
                if (!valid && firstInvalid) {
                    firstInvalid.focus();
                }
                return valid;
            }

            function initRichDescriptionEditors() {
                document.querySelectorAll('[data-rich-description-editor]').forEach((editor) => {
                    if (editor.dataset.richInitialized === '1') {
                        return;
                    }
                    editor.dataset.richInitialized = '1';
                    editor.dataset.richDirty = '0';
                    editor.addEventListener('keyup', () => saveRichDescriptionSelection(editor));
                    editor.addEventListener('mouseup', () => saveRichDescriptionSelection(editor));
                    editor.addEventListener('input', () => {
                        markRichDescriptionDirty(editor);
                        saveRichDescriptionSelection(editor);
                        syncRichDescriptionSource(editor);
                    });
                    editor.addEventListener('blur', () => syncRichDescriptionSource(editor));
                    editor.addEventListener('keydown', (event) => {
                        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
                            event.preventDefault();
                            selectDescriptionElementContent(editor);
                            saveRichDescriptionSelection(editor);
                            return;
                        }
                        if (event.key === 'Tab') {
                            event.preventDefault();
                            restoreRichDescriptionSelection(editor);
                            document.execCommand('insertText', false, '    ');
                            markRichDescriptionDirty(editor);
                            saveRichDescriptionSelection(editor);
                            syncRichDescriptionSource(editor);
                        }
                    });

                    const wrapper = editor.closest('[data-rich-description-wrapper]');
                    if (wrapper) {
                        const toolbar = wrapper.querySelector('.rich-description-toolbar');
                        if (toolbar) {
                            toolbar.addEventListener('pointerdown', () => saveRichDescriptionSelection(editor, { allowCollapsed: false }), true);
                            toolbar.addEventListener('mousedown', () => saveRichDescriptionSelection(editor, { allowCollapsed: false }), true);
                        }
                        wrapper.querySelectorAll('[data-rich-command]').forEach((button) => {
                            button.addEventListener('mousedown', (event) => event.preventDefault());
                            button.addEventListener('click', () => runRichDescriptionCommand(button));
                        });
                        wrapper.querySelectorAll('[data-rich-block-select]').forEach((select) => {
                            select.addEventListener('change', () => applyRichDescriptionBlock(select));
                        });
                        wrapper.querySelectorAll('[data-rich-size-input]').forEach((input) => {
                            input.addEventListener('change', () => applyRichDescriptionSize(input));
                        });
                        wrapper.querySelectorAll('[data-rich-color-input]').forEach((input) => {
                            input.addEventListener('change', () => applyRichDescriptionColor(input));
                        });
                        wrapper.querySelectorAll('[data-rich-color-reset]').forEach((button) => {
                            button.addEventListener('mousedown', (event) => event.preventDefault());
                            button.addEventListener('click', () => resetRichDescriptionColor(button));
                        });
                        wrapper.querySelectorAll('[data-rich-font-select]').forEach((select) => {
                            select.addEventListener('change', () => applyRichDescriptionFont(select));
                        });
                    }

                    const form = editor.closest('form');
                    if (form && form.dataset.richSubmitInitialized !== '1') {
                        form.dataset.richSubmitInitialized = '1';
                        form.addEventListener('submit', (event) => {
                            if (!validateRichDescriptionForm(form)) {
                                event.preventDefault();
                            }
                        });
                    }
                });
            }

            function initDescriptionSelectScopes() {
                document.querySelectorAll('[data-description-select-scope]').forEach((area) => {
                    if (area.dataset.selectScopeInitialized === '1') {
                        return;
                    }
                    area.dataset.selectScopeInitialized = '1';
                    area.addEventListener('click', () => {
                        const selection = window.getSelection();
                        if (!selection || selection.toString() === '') {
                            area.focus({ preventScroll: true });
                        }
                    });
                    area.addEventListener('keydown', (event) => {
                        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
                            event.preventDefault();
                            selectDescriptionElementContent(area);
                        }
                    });
                });
            }

            function copyTextToClipboard(testoDaCopiare) {
                navigator.clipboard.writeText(testoDaCopiare).then(() => {
                    const toast = document.createElement('div');
                    toast.className = 'position-fixed bg-success text-white px-3 py-2 rounded shadow-lg fw-bold';
                    toast.style.bottom = '90px';
                    toast.style.right = '30px';
                    toast.style.zIndex = '10000';
                    toast.style.fontFamily = 'monospace';
                    toast.textContent = 'TESTO COPIATO NEGLI APPUNTI!';
                    document.body.appendChild(toast);

                    setTimeout(() => toast.remove(), 2000);
                }).catch(err => {
                    console.error("Errore di copia:", err);
                });
            }

            function textOffsetFromNode(container, targetNode, targetOffset) {
                const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
                let offsetTotale = 0;
                let nodoCorrente;

                while ((nodoCorrente = walker.nextNode())) {
                    if (nodoCorrente === targetNode) {
                        return offsetTotale + targetOffset;
                    }
                    offsetTotale += nodoCorrente.textContent.length;
                }

                return null;
            }

            function multilineCopyBlockAtOffset(text, offset) {
                const markerStart = ':>>';
                const markerEnd = '<<:';
                const start = text.lastIndexOf(markerStart, offset);
                if (start === -1) {
                    return '';
                }

                const contentStart = start + markerStart.length;
                const end = text.indexOf(markerEnd, contentStart);
                if (end === -1 || offset < contentStart || offset >= end) {
                    return '';
                }

                const nextStart = text.indexOf(markerStart, contentStart);
                if (nextStart !== -1 && nextStart < end) {
                    return '';
                }

                return text
                    .substring(contentStart, end)
                    .replace(/^[\t \u00A0]*\r?\n/, '')
                    .replace(/\r?\n[\t \u00A0]*$/, '')
                    .split(/\r?\n/)
                    .filter(line => !/^[\t \u00A0]*#/.test(line))
                    .join('\n')
                    .replace(/^[\t \u00A0]+/, '')
                    .replace(/[\t \u00A0]+$/, '');
            }

            function copyClickedLine(event) {
                let node = null;
                let offset = 0;

                if (document.caretPositionFromPoint) {
                    const posizioneClick = document.caretPositionFromPoint(event.clientX, event.clientY);
                    if (posizioneClick && event.currentTarget.contains(posizioneClick.offsetNode)) {
                        node = posizioneClick.offsetNode;
                        offset = posizioneClick.offset;
                    }
                } else if (document.caretRangeFromPoint) {
                    const posizioneClick = document.caretRangeFromPoint(event.clientX, event.clientY);
                    if (posizioneClick && event.currentTarget.contains(posizioneClick.startContainer)) {
                        node = posizioneClick.startContainer;
                        offset = posizioneClick.startOffset;
                    }
                }

                if (!node) {
                    const selection = window.getSelection();
                    if (!selection || !selection.rangeCount) return;

                    const range = selection.getRangeAt(0);
                    node = range.startContainer;
                    offset = range.startOffset;
                }

                if (node.nodeType !== Node.TEXT_NODE) return;

                const text = event.currentTarget.textContent;
                const offsetNelTesto = textOffsetFromNode(event.currentTarget, node, offset);
                if (offsetNelTesto === null) return;

                const bloccoMultiriga = multilineCopyBlockAtOffset(text, offsetNelTesto);
                if (bloccoMultiriga) {
                    copyTextToClipboard(bloccoMultiriga);
                    return;
                }

                // Isola la riga intera cliccata
                let startOfLine = text.lastIndexOf('\n', offsetNelTesto - 1) + 1;
                let endOfLine = text.indexOf('\n', offsetNelTesto);
                if (endOfLine === -1) endOfLine = text.length;

                const lineText = text.substring(startOfLine, endOfLine);
                const offsetNellaRiga = Math.max(0, Math.min(offsetNelTesto - startOfLine, lineText.length));
                const simboli = [];
                const regexSimboli = /:>|>/g;
                let matchSimbolo;

                while ((matchSimbolo = regexSimboli.exec(lineText)) !== null) {
                    simboli.push({
                        start: matchSimbolo.index,
                        end: matchSimbolo.index + matchSimbolo[0].length
                    });
                }

                if (!simboli.length) {
                    return;
                }

                let simboloDaCopiare = null;
                for (const simbolo of simboli) {
                    if (offsetNellaRiga >= simbolo.start && offsetNellaRiga <= simbolo.end) {
                        simboloDaCopiare = simbolo;
                        break;
                    }
                    if (simbolo.end <= offsetNellaRiga) {
                        simboloDaCopiare = simbolo;
                    }
                    if (simbolo.start > offsetNellaRiga) {
                        break;
                    }
                }

                if (!simboloDaCopiare) {
                    return;
                }

                const simboloSuccessivo = simboli.find(simbolo => simbolo.start > simboloDaCopiare.start);
                const fineBlocco = simboloSuccessivo ? simboloSuccessivo.start : lineText.length;
                const testoDaCopiare = lineText
                    .substring(simboloDaCopiare.end, fineBlocco)
                    .replace(/^[\s\u00A0\t]+/, "")
                    .replace(/[\s\u00A0\t]+$/, "");

                if (!testoDaCopiare) {
                    return;
                }
 
                copyTextToClipboard(testoDaCopiare);
            }      

            function escapeHtml(value) {
                return String(value)
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            function formatInlineDescription(value) {
                let html = escapeHtml(value);
                html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
                html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
                html = html.replace(/\bhttps?:\/\/[^\s<]+/g, (url) => {
                    return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
                });
                return html;
            }

            function renderDescriptionAsGraphic(text) {
                const lines = String(text || '').replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n');
                const html = [];
                let listType = null;
                let inCodeBlock = false;
                let codeLines = [];

                function closeList() {
                    if (listType) {
                        html.push(`</${listType}>`);
                        listType = null;
                    }
                }

                function flushCodeBlock() {
                    html.push(`<pre class="desc-code-block"><code>${escapeHtml(codeLines.join('\n'))}</code></pre>`);
                    codeLines = [];
                }

                lines.forEach((line) => {
                    const trimmed = line.trim();

                    if (/^\s*```/.test(line)) {
                        closeList();
                        if (inCodeBlock) {
                            flushCodeBlock();
                            inCodeBlock = false;
                        } else {
                            inCodeBlock = true;
                            codeLines = [];
                        }
                        return;
                    }

                    if (inCodeBlock) {
                        codeLines.push(line);
                        return;
                    }

                    if (!trimmed) {
                        closeList();
                        html.push('<div class="desc-empty-line"></div>');
                        return;
                    }

                    if (/^(-{3,}|\*{3,}|_{3,})$/.test(trimmed)) {
                        closeList();
                        html.push('<hr class="my-3">');
                        return;
                    }

                    const tagBlock = trimmed.match(/^<([A-Za-z][\w-]*)>\s*(.*?)\s*<\/\1>$/);
                    if (tagBlock) {
                        closeList();
                        html.push(`<div class="desc-tag-block"><span class="desc-tag-name">${escapeHtml(tagBlock[1])}</span><div>${formatInlineDescription(tagBlock[2])}</div></div>`);
                        return;
                    }

                    const heading = trimmed.match(/^(#{1,3})\s+(.+)$/);
                    if (heading) {
                        closeList();
                        const level = heading[1].length + 3;
                        html.push(`<h${level}>${formatInlineDescription(heading[2])}</h${level}>`);
                        return;
                    }

                    const bullet = trimmed.match(/^[-*]\s+(.+)$/);
                    if (bullet) {
                        if (listType !== 'ul') {
                            closeList();
                            listType = 'ul';
                            html.push('<ul>');
                        }
                        html.push(`<li>${formatInlineDescription(bullet[1])}</li>`);
                        return;
                    }

                    const ordered = trimmed.match(/^\d+[.)]\s+(.+)$/);
                    if (ordered) {
                        if (listType !== 'ol') {
                            closeList();
                            listType = 'ol';
                            html.push('<ol>');
                        }
                        html.push(`<li>${formatInlineDescription(ordered[1])}</li>`);
                        return;
                    }

                    const quote = trimmed.match(/^>\s+(.+)$/);
                    if (quote) {
                        closeList();
                        html.push(`<blockquote>${formatInlineDescription(quote[1])}</blockquote>`);
                        return;
                    }

                    closeList();
                    html.push(`<p>${formatInlineDescription(line)}</p>`);
                });

                closeList();
                if (inCodeBlock) {
                    flushCodeBlock();
                }

                return html.join('');
            }

            function toggleDescriptionView(id, btn) {
                const plain = document.getElementById('desc-text-' + id);
                const graphic = document.getElementById('desc-graphic-' + id);
                const wrapButton = document.querySelector(`[data-desc-wrap-button="${id}"]`);

                if (!plain || !graphic) {
                    return;
                }

                if (graphic.classList.contains('d-none')) {
                    plain.classList.add('d-none');
                    graphic.classList.remove('d-none');
                    btn.textContent = 'Vista: Testo';
                    btn.classList.remove('btn-outline-primary');
                    btn.classList.add('btn-primary');
                    if (wrapButton) {
                        wrapButton.classList.add('d-none');
                    }
                } else {
                    graphic.classList.add('d-none');
                    plain.classList.remove('d-none');
                    btn.textContent = 'Vista: Grafica';
                    btn.classList.remove('btn-primary');
                    btn.classList.add('btn-outline-primary');
                    if (wrapButton) {
                        wrapButton.classList.remove('d-none');
                    }
                }
            }
                  
            function toggleWrap(id, btn) {
                const p = document.getElementById('desc-text-' + id);
                if (p) {
                    if (p.style.whiteSpace === 'pre-wrap') {
                        p.style.whiteSpace = 'pre';
                        btn.textContent = 'A capo: No';
                        btn.classList.remove('btn-outline-success');
                        btn.classList.add('btn-outline-secondary');
                    } else {
                        p.style.whiteSpace === 'pre-wrap';
                        p.style.whiteSpace = 'pre-wrap';
                        btn.textContent = 'A capo: Sì';
                        btn.classList.remove('btn-outline-secondary');
                        btn.classList.add('btn-outline-success');
                    }
                }
            }

            function addLinkField(containerId) {
                const container = document.getElementById(containerId);
                const div = document.createElement('div');
                div.className = 'input-group mb-2';
                div.innerHTML = `
                    <input type="text" name="links" class="form-control" placeholder="Nuovo Link URL...">
                    <input type="text" name="link_notes" class="form-control" placeholder="Nota...">
                    <button class="btn btn-outline-danger" type="button" onclick="this.parentElement.remove()">Elimina</button>
                `;
                container.appendChild(div);
            }

            function addFileField(containerId) {
                const container = document.getElementById(containerId);
                const div = document.createElement('div');
                div.className = 'input-group mb-2';
                div.innerHTML = `
                    <input type="file" name="files" class="form-control">
                    <button class="btn btn-outline-danger" type="button" onclick="this.parentElement.remove()">Elimina</button>
                `;
                container.appendChild(div);
            }
        </script>
    </body>
</html>