<aside class="ppd-panel ppd-left" id="ppdLeftPanel">
    <header class="ppd-panel-head">
        <div><strong>Designer</strong><small>Workspace</small></div>
        <button type="button" class="ppd-icon-btn" id="ppdHideLeft" aria-label="Hide left panel" title="Hide panel">
            <i class="bi bi-chevron-double-left"></i>
        </button>
    </header>

    <nav class="ppd-tabs" aria-label="Designer sections">
        <button type="button" class="active" data-ppd-tab="pages" data-ppd-tip="Pages — your table pages (List, Add, Edit, View…), custom pages you build, plus the common pages and default templates.">
            <i class="bi bi-window-stack"></i><span>Pages</span></button>
        <button type="button" data-ppd-tab="components" data-ppd-tip="Components — drag ready-made building blocks (cards, charts, grids, buttons, media…) onto the canvas.">
            <i class="bi bi-boxes"></i><span>Components</span></button>
        <?php if (empty($standalone)): ?>
        <button type="button" data-ppd-tab="fields" data-ppd-tip="Fields — drag the current table's columns onto the page as inputs or read-only display fields.">
            <i class="bi bi-input-cursor-text"></i><span>Fields</span></button>
        <?php endif; ?>
    </nav>

    <div class="ppd-panel-body">
        <section class="ppd-tab-section active" data-ppd-section="pages">
            <div class="ppd-section">
                <button type="button" class="ppd-section-title" data-ppd-toggle="custompages" aria-expanded="true">
                    <span><i class="bi bi-file-earmark-richtext"></i> Custom Pages</span><em id="ppdCustomCount"></em><i class="bi bi-chevron-right"></i>
                </button>
                <div class="ppd-section-body open" data-ppd-panel="custompages">
                    <div class="ppd-list" id="ppdCustomList"></div>
                </div>
            </div>

            <?php if (empty($standalone)): ?>
            <div class="ppd-section">
                <button type="button" class="ppd-section-title" data-ppd-toggle="tables" aria-expanded="true">
                    <span><i class="bi bi-table"></i> Tables</span><em><?= count($tables) ?></em><i class="bi bi-chevron-right"></i>
                </button>
                <div class="ppd-section-body open" data-ppd-panel="tables">
                    <label class="ppd-search"><i class="bi bi-search"></i><input type="search" id="ppdTableSearch" placeholder="Search tables..."></label>
                    <div class="ppd-list ppd-list--compact" id="ppdTableList"></div>
                    <div class="ppd-muted" id="ppdTableEmpty" hidden>No tables match.</div>
                </div>
            </div>
            <?php endif; ?>
        </section>

        <section class="ppd-tab-section" data-ppd-section="components">
            <label class="ppd-search"><i class="bi bi-search"></i><input type="search" id="ppdCompSearch" placeholder="Search components..."></label>
            <div id="ppdCompList"></div>
        </section>

        <?php if (empty($standalone)): ?>
        <section class="ppd-tab-section" data-ppd-section="fields">
            <div class="ppd-cat-label">Current table fields</div>
            <div class="ppd-list" id="ppdFieldList"><div class="ppd-muted">Select a table to view fields.</div></div>
        </section>
        <?php endif; ?>
    </div>

    <!-- Compact footer: system page-types kept out of the way until needed.
         Each chip toggles a popover that floats above the footer. Only shown on
         the Pages tab (toggled by leftTab in panels.js). -->
    <footer class="ppd-left-foot" id="ppdLeftFoot">
        <button type="button" class="ppd-foot-chip" data-foot-pop="common" aria-expanded="false"
                data-ppd-tip="Common Pages — shared screens like Login, Register, Menu, Dashboard, Calendar and Admin Area. Click to browse and edit them.">
            <i class="bi bi-window-stack"></i><span class="ppd-foot-lbl">Common</span><em class="ppd-foot-count" id="ppdCommonCount"></em><span class="ppd-foot-now" data-foot-now="common"></span>
        </button>
        <button type="button" class="ppd-foot-chip" data-foot-pop="templates" aria-expanded="false"
                data-ppd-tip="Default Templates — the core designs used for List, Add, Edit, View, Print, PDF, Cards, Import and Export by any table that has no page design of its own.">
            <i class="bi bi-easel2"></i><span class="ppd-foot-lbl">Templates</span><em class="ppd-foot-count">9</em><span class="ppd-foot-now" data-foot-now="templates"></span>
        </button>

        <div class="ppd-foot-pop" data-foot-panel="common" hidden>
            <div class="ppd-foot-pop-head">
                <button type="button" class="ppd-foot-pop-back" data-foot-back hidden aria-label="Back to Common Pages"><i class="bi bi-chevron-left"></i></button>
                <i class="bi bi-window-stack ppd-foot-pop-hicon"></i>
                <span class="ppd-foot-pop-title" id="ppdCommonPopTitle">Common Pages</span>
                <button type="button" class="ppd-foot-pop-x" data-foot-close aria-label="Close">&times;</button>
            </div>
            <div class="ppd-foot-pop-body">
                <div class="ppd-list" id="ppdCommonList"></div>
                <div class="ppd-login-template-picker" id="ppdPageTemplatePicker" hidden>
                    <div class="ppd-tpl-head"><i class="bi bi-palette"></i> <span id="ppdPageTemplateTitle">Page template</span></div>
                    <div id="ppdPageTemplateList"></div>
                    <small id="ppdPageTemplateHint"></small>
                </div>
            </div>
        </div>

        <div class="ppd-foot-pop" data-foot-panel="templates" hidden>
            <div class="ppd-foot-pop-head"><i class="bi bi-easel2"></i> Default Templates <button type="button" class="ppd-foot-pop-x" data-foot-close aria-label="Close">&times;</button></div>
            <div class="ppd-foot-pop-body">
                <div class="ppd-list">
                    <button type="button" class="ppd-list-item" data-template="list"><i class="bi bi-layout-text-window-reverse"></i><span>List</span><em>all</em></button>
                    <button type="button" class="ppd-list-item" data-template="add"><i class="bi bi-plus-square"></i><span>Add</span><em>all</em></button>
                    <button type="button" class="ppd-list-item" data-template="edit"><i class="bi bi-pencil-square"></i><span>Edit</span><em>all</em></button>
                    <button type="button" class="ppd-list-item" data-template="view"><i class="bi bi-eye"></i><span>View</span><em>all</em></button>
                    <button type="button" class="ppd-list-item" data-template="print"><i class="bi bi-printer"></i><span>Print</span><em>all</em></button>
                    <button type="button" class="ppd-list-item" data-template="pdf"><i class="bi bi-file-earmark-pdf"></i><span>PDF</span><em>all</em></button>
                    <button type="button" class="ppd-list-item" data-template="cards"><i class="bi bi-grid-3x3-gap-fill"></i><span>Cards</span><em>all</em></button>
                    <button type="button" class="ppd-list-item" data-template="import"><i class="bi bi-box-arrow-in-down"></i><span>Import</span><em>all</em></button>
                    <button type="button" class="ppd-list-item" data-template="export"><i class="bi bi-box-arrow-up"></i><span>Export</span><em>all</em></button>
                </div>
                <small class="ppd-section-note">Defaults apply to every table that has no page design of its own.</small>
            </div>
        </div>
    </footer>
</aside>
