<div class="modal fade project-modal projects-guide-modal" id="projectsGuideModal" tabindex="-1" aria-labelledby="projectsGuideTitle" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable"><div class="modal-content">
        <div class="modal-header px-4 py-3"><div><div class="guide-kicker"><i class="bi bi-compass"></i> Projects handbook</div><h5 class="modal-title" id="projectsGuideTitle">From database connection to a safely versioned application</h5></div><button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close Projects Guide"></button></div>
        <div class="guide-searchbar"><i class="bi bi-search"></i><input class="form-control" id="projectsGuideSearch" type="search" placeholder="Search this guide: templates, checkpoints, schema…" aria-label="Search Projects Guide"><kbd>/</kbd></div>
        <div class="modal-body p-0"><div class="guide-layout">
            <nav class="guide-nav" aria-label="Projects Guide topics">
                <button class="active" type="button" data-guide-topic="start"><i class="bi bi-play-circle"></i><span>Start here</span></button>
                <button type="button" data-guide-topic="types"><i class="bi bi-signpost-split"></i><span>Choose a path</span></button>
                <button type="button" data-guide-topic="build"><i class="bi bi-easel2"></i><span>Database app</span></button>
                <button type="button" data-guide-topic="standalone"><i class="bi bi-window"></i><span>Standalone sites</span></button>
                <button type="button" data-guide-topic="components"><i class="bi bi-grid-1x2"></i><span>Components &amp; pages</span></button>
                <button type="button" data-guide-topic="actions"><i class="bi bi-ui-checks-grid"></i><span>Project actions</span></button>
                <button type="button" data-guide-topic="connections"><i class="bi bi-database-gear"></i><span>Connections</span></button>
                <button type="button" data-guide-topic="lifecycle"><i class="bi bi-box-arrow-in-down"></i><span>Copy, export &amp; import</span></button>
                <button type="button" data-guide-topic="templates"><i class="bi bi-layers"></i><span>Templates</span></button>
                <button type="button" data-guide-topic="history"><i class="bi bi-clock-history"></i><span>History &amp; Git</span></button>
                <button type="button" data-guide-topic="schema"><i class="bi bi-database-check"></i><span>Schema sync</span></button>
                <button type="button" data-guide-topic="script"><i class="bi bi-filetype-sql"></i><span>SQL script</span></button>
                <button type="button" data-guide-topic="ship"><i class="bi bi-rocket-takeoff"></i><span>Build &amp; deploy</span></button>
                <button type="button" data-guide-topic="safety"><i class="bi bi-shield-check"></i><span>Safety model</span></button>
            </nav>
            <div class="guide-content" id="projectsGuideContent">
                <section class="guide-panel active" data-guide-panel="start" data-guide-searchable="projects dashboard open create filter pin archive readiness workflow">
                    <div class="guide-hero"><span><i class="bi bi-rocket-takeoff"></i></span><div><div class="guide-eyebrow">Recommended workflow</div><h4>Connect → model → design → protect → synchronize</h4><p>Projects is the control center for every application. It stores editable RAD configuration separately from generated output and database contents.</p></div></div>
                    <div class="guide-steps"><article><b>1</b><strong>Create or import</strong><span>Choose a database or inspect a portable <code>.ppphp</code> package.</span></article><article><b>2</b><strong>Model and design</strong><span>Use Tables, Pages, Fields, Designer, Events, and Security.</span></article><article><b>3</b><strong>Checkpoint</strong><span>Capture a recovery point before substantial changes.</span></article><article><b>4</b><strong>Build and verify</strong><span>Generate the PHP application and test the final runtime.</span></article></div>
                    <div class="guide-tip"><i class="bi bi-lightbulb"></i><span><strong>Portfolio controls:</strong> search by name, slug, database, or description; filter health/database; switch grid/list view; pin frequent projects; archive inactive work without deleting it.</span></div>
                </section>
                <section class="guide-panel" data-guide-panel="types" data-guide-searchable="project type kind choose path database backend standalone site database-free no database landing page marketing site static crud login versus vs compare which one difference decide start blank">
                    <div class="guide-hero"><span><i class="bi bi-signpost-split"></i></span><div><div class="guide-eyebrow">Two ways to build</div><h4>Pick the project type that fits what you're making</h4><p><?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?> builds both data-driven applications and database-free websites from the same visual designer. You choose the type when you create a project — here's how they differ.</p></div></div>
                    <div class="guide-paths">
                        <article class="guide-path is-db">
                            <div class="guide-path-head"><span class="gp-ic"><i class="bi bi-database"></i></span><div><span class="gp-tag">Data-driven</span><h5>Database backend app</h5></div></div>
                            <ul>
                                <li>Point it at <b>MySQL, MariaDB, PostgreSQL, SQLite, SQL Server, Oracle, TiDB or CockroachDB</b>.</li>
                                <li>Auto-generated <b>CRUD</b> — searchable lists, add / edit / view, print, import &amp; export.</li>
                                <li>Built-in <b>login, roles, permissions, 2FA, row-level security</b> and audit.</li>
                                <li>Live <b>dashboards, charts, master–detail, lookups</b> and calendars.</li>
                            </ul>
                            <div class="gp-best"><b>Best for:</b> internal tools, admin panels, CRMs — anything backed by records.</div>
                        </article>
                        <article class="guide-path is-site">
                            <div class="guide-path-head"><span class="gp-ic"><i class="bi bi-window"></i></span><div><span class="gp-tag">Database-free</span><h5>Standalone site</h5></div></div>
                            <ul>
                                <li><b>No database, no login</b> — every page is a visual design surface.</li>
                                <li>Drag <b>28+ section components</b> or apply one of <b>17 starter layouts</b>.</li>
                                <li>Per-page <b>SEO</b>, automatic <b>sitemap.php + robots.txt</b>, a branded <b>404</b> and a <b>favicon</b>.</li>
                                <li>Ships as <b>plain PHP</b> you can upload to any host — no runtime setup.</li>
                            </ul>
                            <div class="gp-best"><b>Best for:</b> marketing sites, landing pages, portfolios, link-in-bio, docs.</div>
                        </article>
                    </div>
                    <div class="guide-tip"><i class="bi bi-stars"></i><span><strong>You can mix them.</strong> A database app can also carry beautiful marketing / landing pages — and those sections can read live data from your tables. See <b>Components &amp; pages</b>.</span></div>
                </section>
                <section class="guide-panel" data-guide-panel="build" data-guide-searchable="build create design tables query pages fields designer events style custom files capabilities generated app authentication two-factor 2fa permissions roles row-level security field encryption audit record locks session social login dashboard charts master detail lookup validation pdf import export themes dark mode multi-language nepali menu cards admin area maximum what you can build database app">
                    <div class="guide-hero"><span><i class="bi bi-easel2"></i></span><div><div class="guide-eyebrow">The design surface</div><h4>Design a complete, database-backed web app — visually</h4><p>Open a project to enter its workspace. Each area below adds capability, and <?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?> compiles them into a standalone PHP application you own and can host anywhere — no framework lock-in.</p></div></div>
                    <p class="guide-eyebrow">What you model &amp; design</p>
                    <div class="guide-card-grid">
                        <article><i class="bi bi-table"></i><strong>Tables</strong><span>Design the data model — create or alter tables, columns, keys, indexes and relationships, or track tables that already exist.</span></article>
                        <article><i class="bi bi-terminal"></i><strong>Query</strong><span>Write and preview SQL, build views, and shape exactly the data your pages read.</span></article>
                        <article><i class="bi bi-file-earmark"></i><strong>Pages</strong><span>Generate List, Add, Edit, View, Print, Import, Export, Dashboard and Report pages — plus a Cards view and per-record Save-as-PDF.</span></article>
                        <article><i class="bi bi-input-cursor-text"></i><strong>Fields</strong><span>Control every field: view / edit / filter controls, lookups, validation rules, labels &amp; placeholders, auto-values and formatting — extensible via field plugins.</span></article>
                        <article><i class="bi bi-palette"></i><strong>Designer</strong><span>A drag-and-drop visual designer — arrange forms and dashboards with real components: grids, cards, groups, clock, charts and cell grids.</span></article>
                        <article><i class="bi bi-lightning-charge"></i><strong>Events</strong><span>Attach business logic — before/after add-edit-delete, custom buttons and global events — in a code editor with IntelliSense.</span></article>
                        <article><i class="bi bi-brush"></i><strong>Style</strong><span>Data-driven themes (light/dark tokens), navbar layouts, and a visual Menu editor for the app's navigation and landing page.</span></article>
                        <article><i class="bi bi-folder2-open"></i><strong>Custom Files</strong><span>Bring your own PHP, JavaScript, HTML and assets — bundled straight into the generated app.</span></article>
                    </div>
                    <p class="guide-eyebrow">What the generated app can do</p>
                    <div class="guide-card-grid">
                        <article><i class="bi bi-shield-lock"></i><strong>Authentication</strong><span>Login, registration, email activation, password policy, lockout &amp; throttling, and social sign-in (Google, Microsoft, GitHub, LinkedIn).</span></article>
                        <article><i class="bi bi-phone"></i><strong>Two-factor auth</strong><span>TOTP authenticator + email OTP, backup codes and a locally-generated QR — baked into the login flow.</span></article>
                        <article><i class="bi bi-diagram-3"></i><strong>Permissions &amp; roles</strong><span>Users, groups and per-page / per-action permissions, plus an in-app Admin Area.</span></article>
                        <article><i class="bi bi-database-lock"></i><strong>Row-Level Security</strong><span>Owner-only or custom rules that filter reads, writes and exports per signed-in user.</span></article>
                        <article><i class="bi bi-key"></i><strong>Field encryption</strong><span>AES-256-GCM at rest for chosen columns, transparently decrypted where allowed.</span></article>
                        <article><i class="bi bi-clipboard-check"></i><strong>Audit &amp; record locks</strong><span>A full audit trail and record locking, each with in-app viewers.</span></article>
                        <article><i class="bi bi-hourglass-split"></i><strong>Session control</strong><span>Idle timeout, lifetime caps, concurrent-session limits and remote sign-out.</span></article>
                        <article><i class="bi bi-bar-chart"></i><strong>Dashboards</strong><span>Data-bound KPI tiles and SVG charts, plus calendar, kanban and activity widgets.</span></article>
                        <article><i class="bi bi-diagram-2"></i><strong>Master–detail</strong><span>FK-filtered child grids on view/edit, with prefilled add and view-all.</span></article>
                        <article><i class="bi bi-search"></i><strong>Lookups &amp; validation</strong><span>Foreign-key dropdowns and modular client + server validation.</span></article>
                        <article><i class="bi bi-translate"></i><strong>Multi-language</strong><span>Per-language labels rendered at runtime — including a Nepali BS date picker.</span></article>
                        <article><i class="bi bi-arrow-down-up"></i><strong>Import / Export</strong><span>CSV, Excel, Word, JSON and XML — a guided import wizard and one-click export.</span></article>
                    </div>
                    <div class="guide-tip"><i class="bi bi-rocket-takeoff"></i><span>When the design is ready, open <b>Build &amp; deploy</b> to generate the PHP application and ship it to a live server.</span></div>
                </section>
                <section class="guide-panel" data-guide-panel="standalone" data-guide-searchable="standalone site database-free no database landing page marketing website static page frame chromeless build ship seo sitemap robots 404 favicon dark mode scroll reveal deploy upload plain php how to create locked modules designer style output deploy custom files">
                    <div class="guide-hero"><span><i class="bi bi-window"></i></span><div><div class="guide-eyebrow">Database-free websites</div><h4>Standalone sites — design, build and ship, no database required</h4><p>A standalone project has no data layer and no login. Every page is a canvas you design visually, and the build produces a self-contained PHP site you can upload anywhere.</p></div></div>
                    <div class="guide-steps">
                        <article><b>1</b><strong>Create</strong><span>New project → choose “No database (standalone site).”</span></article>
                        <article><b>2</b><strong>Design</strong><span>Add pages and drag in section components, or apply a starter layout.</span></article>
                        <article><b>3</b><strong>Frame it</strong><span>Toggle Page frame for a chromeless landing page, or keep the app shell.</span></article>
                        <article><b>4</b><strong>Build &amp; deploy</strong><span>One-click build → plain PHP; upload with the Deploy client.</span></article>
                    </div>
                    <p class="guide-eyebrow">Shipped with every standalone build</p>
                    <div class="guide-card-grid">
                        <article><i class="bi bi-layout-text-window-reverse"></i><strong>Page frame</strong><span>Per-page chromeless mode for true landing pages — or keep the shell for an in-app page.</span></article>
                        <article><i class="bi bi-share"></i><strong>SEO &amp; sharing</strong><span>Meta description, Open Graph / Twitter cards, canonical URL and automatic JSON-LD, per page.</span></article>
                        <article><i class="bi bi-diagram-3"></i><strong>Sitemap &amp; robots</strong><span>A dynamic <code>sitemap.php</code> and <code>robots.txt</code> generated on build, honouring “hide from search”.</span></article>
                        <article><i class="bi bi-signpost-2"></i><strong>Custom 404</strong><span>A branded, on-theme “page not found” with a proper 404 status, served automatically.</span></article>
                        <article><i class="bi bi-star"></i><strong>Favicon</strong><span>Point to a URL <em>or</em> an uploaded Custom File (e.g. <code>/custom/favicon.png</code>); falls back to your logo.</span></article>
                        <article><i class="bi bi-moon-stars"></i><strong>Dark mode &amp; motion</strong><span>A per-page dark toggle and tasteful scroll-reveal animation, theme-aware out of the box.</span></article>
                    </div>
                    <div class="guide-tip"><i class="bi bi-lightbulb"></i><span>In a standalone project the database-only console modules (Tables, Query, Pages, Fields, Security, Events, Notifications) are locked — you work in <b>Designer, Style, Custom Files, Output</b> and <b>Deploy</b>.</span></div>
                </section>
                <section class="guide-panel" data-guide-panel="components" data-guide-searchable="components sections custom pages starter layouts templates hero feature grid split bento pricing comparison testimonials faq logo cloud stats counter post grid cta newsletter contact navbar footer gallery carousel countdown announcement marquee live data binding table count sum average where sql variables view page marketing drag drop apply a layout replace append shell">
                    <div class="guide-hero"><span><i class="bi bi-grid-1x2"></i></span><div><div class="guide-eyebrow">The design toolkit</div><h4>Section components, custom pages &amp; starter layouts</h4><p>The same building blocks power standalone sites and marketing pages inside database apps. Drag them in, or start from a full-page layout and make it your own.</p></div></div>
                    <p class="guide-eyebrow">28+ section components</p>
                    <div class="guide-card-grid">
                        <article><i class="bi bi-rocket-takeoff"></i><strong>Hero &amp; CTA</strong><span>Headline heroes, call-to-action bands, announcement bars and newsletter / contact blocks.</span></article>
                        <article><i class="bi bi-grid-3x3-gap"></i><strong>Features</strong><span>Feature grids, feature-split, bento grids and checklists to explain what you offer.</span></article>
                        <article><i class="bi bi-tags"></i><strong>Pricing</strong><span>Pricing tables and comparison tables with tiers, badges and highlighted plans.</span></article>
                        <article><i class="bi bi-chat-quote"></i><strong>Social proof</strong><span>Testimonials, logo clouds, animated stat counters and FAQ accordions.</span></article>
                        <article><i class="bi bi-images"></i><strong>Media</strong><span>Galleries, carousels, video embeds, countdowns and marquees.</span></article>
                        <article><i class="bi bi-layout-wtf"></i><strong>Structure</strong><span>Navbar, footer, post grids, link lists, back-to-top and cookie-consent.</span></article>
                    </div>
                    <p class="guide-eyebrow">Custom pages</p>
                    <div class="guide-table">
                        <div><strong>In a database app</strong><span>Add a custom page under any table — it renders <b>inside the app shell</b> (navbar, sidebar, breadcrumb), is <b>auth-gated</b>, and gets an <b>automatic menu item</b>.</span></div>
                        <div><strong>In a standalone site</strong><span>Every page is a custom design surface. Turn on <b>Page frame</b> for a chromeless landing page, or leave it off to keep a header/footer shell.</span></div>
                    </div>
                    <p class="guide-eyebrow">Starter layouts</p>
                    <p class="guide-small">In the Pages panel choose <b>Apply a layout</b> and pick from <b>17 full-page blueprints</b> — SaaS, Agency, Portfolio, Event, Restaurant, Wedding, Link-in-bio, Coming-soon, Blog and more — then <b>Replace</b> the page or <b>Append</b> below your work. Applied to a database-app page, a layout keeps the app shell and drops in only its content sections (its own navbar/footer are removed so you never get two).</p>
                    <div class="guide-tip"><i class="bi bi-database-add"></i><span><strong>Live data on any section.</strong> Bind <b>Stats</b>, <b>Logo Cloud</b> and <b>Post Grid</b> to a table to show real counts and records — <code>count / sum / avg</code> with a WHERE filter (supports <code>:userid</code>, <code>:today</code>…), and post cards link to each record's view page. Binding is off until you set a table, so nothing changes unless you opt in.</span></div>
                </section>
                <section class="guide-panel" data-guide-panel="actions" data-guide-searchable="project actions menu open database connection settings rename slug icon duplicate save as template history version control checkpoint schema structure generate sql script export package ppphp pin archive restore">
                    <h4>Project actions — the ⋯ menu</h4>
                    <p>Every project card has a <b>⋯</b> menu (plus quick buttons). Here is what each action does, and where to read more.</p>
                    <div class="guide-table">
                        <div><strong>Open project</strong><span>Enter the workspace to model tables, design pages, wire events and build — see <b>What you can build</b>.</span></div>
                        <div><strong>Database connection</strong><span>View or change the project's driver-aware connection profile. Tested before saving; saved secrets never return to the browser. See <b>Connections</b>.</span></div>
                        <div><strong>Project settings</strong><span>Rename the project and change its icon, description and (owner) slug.</span></div>
                        <div><strong>Duplicate / Save As</strong><span>Copy the editable configuration into a new project — share the connection, start on SQLite, or copy a SQLite database. See <b>Copy, export &amp; import</b>.</span></div>
                        <div><strong>Save as Template</strong><span>Save a credential-free starter you can reuse for new projects. See <b>Templates</b>.</span></div>
                        <div><strong>History &amp; Version Control</strong><span>Restorable checkpoints, a change comparison, and local Git. See <b>History &amp; Git</b>.</span></div>
                        <div><strong>Schema &amp; Structure</strong><span>Compare the project model against the live database and reconcile drift. See <b>Schema sync</b>.</span></div>
                        <div><strong>Generate SQL Script</strong><span>Export a portable <code>.sql</code> of structure and/or data for backup or relocation. See <b>SQL script</b>.</span></div>
                        <div><strong>Export package</strong><span>Create a versioned, checksummed <code>.ppphp</code> archive (secrets removed) to move or share a project. See <b>Copy, export &amp; import</b>.</span></div>
                        <div><strong>Pin project</strong><span>Keep frequent projects at the top for quick access.</span></div>
                        <div><strong>Archive project</strong><span>Hide inactive work without deleting it — restore it any time.</span></div>
                    </div>
                    <div class="guide-tip"><i class="bi bi-shield-check"></i><span>Every state-changing action needs a developer role and a security token, and destructive steps confirm first. See <b>Safety model</b>.</span></div>
                </section>
                <section class="guide-panel" data-guide-panel="connections" data-guide-searchable="mysql mariadb tidb postgres postgresql cockroachdb cockroach sqlite sql server oracle database ssl credentials connection test switch source distributed">
                    <h4>Database connections</h4><p>Each project owns a driver-aware profile for MySQL/MariaDB, TiDB, PostgreSQL, CockroachDB, SQLite, SQL Server, or Oracle where the matching PDO driver is available. TiDB rides the PDO_MYSQL driver (default port 4000) and CockroachDB rides PDO_PGSQL (default port 26257), so no extra extensions are needed beyond the ones you already have for MySQL and PostgreSQL.</p>
                    <div class="guide-card-grid"><article><i class="bi bi-plug"></i><strong>Test before save</strong><span>New and changed connections are tested server-side. Blank password fields preserve an already saved password.</span></article><article><i class="bi bi-key"></i><strong>Secrets stay server-side</strong><span>Saved passwords are never returned to browser JavaScript or included in project packages/templates.</span></article><article><i class="bi bi-arrow-left-right"></i><strong>Switch deliberately</strong><span>Changing the data source does not migrate or delete data. Synchronize structures after switching.</span></article></div>
                </section>
                <section class="guide-panel" data-guide-panel="lifecycle" data-guide-searchable="duplicate save as export import ppphp checksum manifest conflict sqlite custom files package">
                    <h4>Duplicate, export, and import</h4><div class="guide-table"><div><strong>Duplicate / Save As</strong><span>Copies editable configuration. Remote projects can share a connection or start with SQLite; SQLite projects can copy their local database.</span></div><div><strong>Export package</strong><span>Creates a versioned, checksummed <code>.ppphp</code> archive. Structured secrets and database credentials are removed.</span></div><div><strong>Guided import</strong><span>Validates paths, sizes, compression, manifest, and SHA-256 checksums before showing conflicts and connection choices.</span></div></div>
                    <div class="guide-warning"><i class="bi bi-exclamation-triangle"></i><span>Review literals embedded in Events or Custom Files before sharing. Active PHP/JavaScript/HTML/SVG requires explicit confirmation during import.</span></div>
                </section>
                <section class="guide-panel" data-guide-panel="templates" data-guide-searchable="template starter library category tag save reuse portable blueprint custom code">
                    <h4>Reusable templates</h4><p>Save a configured project as a credential-free starter, categorize and tag it, then create new projects repeatedly with a fresh database choice.</p>
                    <ol class="guide-list"><li>Open a project menu and choose <b>Save as Template</b>.</li><li>Describe its purpose, category, tags, and whether Custom Files belong in the starter.</li><li>Open <b>Templates</b> from the header, search or filter, and choose <b>Use template</b>.</li><li>For SQLite, optionally initialize missing tables from the portable schema blueprint. No records are copied.</li></ol>
                </section>
                <section class="guide-panel" data-guide-panel="history" data-guide-searchable="checkpoint restore compare version history git commit branch remote rollback recovery">
                    <h4>History and local Git</h4><div class="guide-card-grid"><article><i class="bi bi-camera"></i><strong>Checkpoints</strong><span>Immutable recovery packages contain editable JSON and Custom Files—not database credentials or data.</span></article><article><i class="bi bi-file-diff"></i><strong>Compare</strong><span>See added, changed, and removed configuration/custom files before restoring.</span></article><article><i class="bi bi-git"></i><strong>Local Git</strong><span>Initialize, inspect status, configure identity/remote, and commit. Network push/pull is never automatic.</span></article></div><div class="guide-tip"><i class="bi bi-shield-plus"></i><span>Restore automatically creates a “Before restore” checkpoint and preserves the live database profile and SQLite/database directory.</span></div>
                </section>
                <section class="guide-panel" data-guide-panel="schema" data-guide-searchable="schema structure compare drift import rebuild missing table field database only project only conflict system needs refresh definition missing checkpoint sync capture">
                    <h4>Schema and structure synchronization</h4>
                    <p>Open <b>Schema &amp; structure</b> from a project's menu to compare the project's tracked model against the <em>live</em> database. It is preview-first — nothing changes until you choose an action, and every apply writes a safety checkpoint first.</p>
                    <div class="guide-table">
                        <div><strong>Database only</strong><span>Live tables/views the project does not track yet. Select them and choose <b>Import selected</b> to bring them into the model — the database itself is never changed. Protected system tables are excluded.</span></div>
                        <div><strong>Project only</strong><span>Tables the project tracks that are absent from the database. Ones with a portable blueprint can be built with <b>Create selected</b>; existing database objects are never altered.</span></div>
                        <div><strong>Field drift</strong><span>Tracked tables whose columns differ from the live table — added, removed, or modified. Expand a row to preview the exact field changes before acting.</span></div>
                        <div><strong>Needs refresh</strong><span>Shown as <b>“Definition missing.”</b> The table is tracked and exists live, but the project has not captured its column definition yet — normal right after importing a table or switching data source. It is not an error.</span></div>
                    </div>
                    <p><b>Rebuild project structures</b> re-reads every tracked table's definition from the live database. This single action clears <b>both</b> Field drift and Needs refresh, and it only adds or updates definitions — it removes nothing unless you ask it to.</p>
                    <div class="guide-tip"><i class="bi bi-lightbulb"></i><span>Seeing tables marked <b>Definition missing</b>? That's expected for freshly-tracked tables — click <b>Rebuild project structures</b> once and the four counters return to zero (<i>“Tracked project structures match the live database.”</i>).</span></div>
                    <p class="guide-small">Tick <b>Remove project-only objects</b> only when you also want their canvas positions, view metadata, and affected relationships removed. A safety checkpoint is created before every action, so any change is reversible from <b>History</b>.</p>
                </section>
                <section class="guide-panel" data-guide-panel="script" data-guide-searchable="sql script generate export dump backup mysqldump structure data insert create table drop relocate migrate move server download portable restore rows foreign key transaction">
                    <h4>Generate a SQL script (portable backup)</h4>
                    <p>Open <b>Generate SQL Script</b> from a project's menu to produce a single <code>.sql</code> file that recreates the database's structure and re-seeds its data — ideal for <b>moving to another server</b>, keeping a <b>plain-text backup</b>, or seeding a staging copy. The export is strictly read-only; your database is never modified.</p>
                    <div class="guide-table">
                        <div><strong>What to export</strong><span><b>Project tables only</b> covers the tables this project tracks; <b>All database tables</b> dumps every table in the connected database.</span></div>
                        <div><strong>Contents</strong><span><b>Structure only</b> (CREATE statements), <b>Data only</b> (INSERTs), or <b>Structure and data</b>. Cap the rows per table, or set <code>0</code> for all rows.</span></div>
                        <div><strong>Objects</strong><span>Everything in the scope is included by default — untick to export just specific tables. Row counts and view/system badges help you choose.</span></div>
                    </div>
                    <div class="guide-card-grid">
                        <article><i class="bi bi-trash3"></i><strong>DROP before CREATE</strong><span>Adds <code>DROP TABLE IF EXISTS</code> so the script re-imports cleanly onto an existing database (or use <code>CREATE … IF NOT EXISTS</code> to keep existing tables).</span></article>
                        <article><i class="bi bi-shield-slash"></i><strong>Foreign-key checks off</strong><span>Loads tables in any order without constraint errors on MySQL, then restored at the end of the file.</span></article>
                        <article><i class="bi bi-box-seam"></i><strong>Transaction &amp; multi-row</strong><span>An all-or-nothing data load, with batched multi-row INSERTs for a smaller, faster file.</span></article>
                    </div>
                    <div class="guide-tip"><i class="bi bi-terminal"></i><span>To restore: create an empty database on the target server and run the file — e.g. <code>mysql -u user -p newdb &lt; project-YYYYmmdd.sql</code> — or import it in phpMyAdmin / Adminer.</span></div>
                    <p class="guide-small">Structure uses each engine's own authoritative DDL where available (MySQL/MariaDB via <code>SHOW CREATE</code>, SQLite via its schema); other engines fall back to a portable <code>CREATE</code> that may simplify secondary indexes. Very large data exports are bounded by the per-table row limit.</p>
                </section>
                <section class="guide-panel" data-guide-panel="ship" data-guide-searchable="build deploy ship output settings finished generate php application ftp ftps sftp upload server hosting one-click package download preview publish demo relocate">
                    <h4>Build &amp; deploy — from design to a live app</h4>
                    <p>When the design is ready, <?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?> generates a standalone PHP application from your project — your data, database contents and secrets stay yours — and helps you get it onto a server.</p>
                    <div class="guide-card-grid">
                        <article><i class="bi bi-box-arrow-right"></i><strong>Output</strong><span>Build &amp; output settings: environment presets, what to include, and a one-click <b>Build</b> that exports events, theme and every option.</span></article>
                        <article><i class="bi bi-check-circle"></i><strong>Finished</strong><span>The Build &amp; Deploy screen — download the app, preview it, publish a demo, and see real build info.</span></article>
                        <article><i class="bi bi-cloud-arrow-up"></i><strong>Deploy</strong><span>A built-in FTP / FTPS / SFTP client to upload the generated app straight to a live server.</span></article>
                    </div>
                    <div class="guide-steps">
                        <article><b>1</b><strong>Build</strong><span>Generate the PHP app from Output (or Finished).</span></article>
                        <article><b>2</b><strong>Verify</strong><span>Preview and test the real runtime before shipping.</span></article>
                        <article><b>3</b><strong>Deploy</strong><span>Upload with the Deploy client, or download the package and host it yourself.</span></article>
                    </div>
                    <div class="guide-tip"><i class="bi bi-arrow-repeat"></i><span>Keep a plain-text safety net with <b>Generate SQL Script</b>, and move an entire project between machines with <b>Export package</b>.</span></div>
                </section>
                <section class="guide-panel" data-guide-panel="safety" data-guide-searchable="safety security rollback atomic credentials zip traversal archive bomb csrf system table delete">
                    <h4>Safety model</h4><div class="guide-safety-grid"><div><i class="bi bi-shield-lock"></i><strong>Authorization &amp; CSRF</strong><span>All state-changing project operations require an authenticated developer role and security token.</span></div><div><i class="bi bi-file-lock"></i><strong>Protected packages</strong><span>Imports reject path traversal, symlinks, duplicate paths, suspicious compression, oversized expansion, and checksum mismatch.</span></div><div><i class="bi bi-arrow-counterclockwise"></i><strong>Atomic/rollback behavior</strong><span>Imports, duplication, restores, and missing-table creation clean up or roll back when an operation fails.</span></div><div><i class="bi bi-database-lock"></i><strong>Database isolation</strong><span>Deleting project files and deleting a connected database are separate confirmations. Restore never replaces data.</span></div></div>
                </section>
                <div class="guide-no-results" id="projectsGuideNoResults"><i class="bi bi-search"></i><strong>No matching guide topic</strong><span>Try “checkpoint”, “schema”, “template”, or “connection”.</span></div>
            </div>
        </div></div>
        <div class="modal-footer px-4 py-3"><span class="me-auto guide-footer"><i class="bi bi-keyboard"></i> Press <kbd>/</kbd> to search this guide.</span><button class="btn btn-primary" type="button" data-bs-dismiss="modal">Got it</button></div>
    </div></div>
</div>
