<div class="section-card">
    <div class="section-title">🏷️ Label Editor</div>
    <div class="d-flex align-items-center gap-3 mb-3">
        <label class="form-label small mb-0">Language:
            <i class="bi bi-info-circle misc-hint" data-tt="Choose which language you are editing. Labels are stored separately per language for multi-language apps."></i>
        </label>
        <select class="form-select form-select-sm" id="labelsLangSelect" style="width:auto;">
            <option value="">— select language —</option>
            <!-- populated by JS from project languages -->
        </select>
        <button class="btn btn-sm btn-outline-secondary" id="btnCopyLabels" data-tt="Copy every label from another language as a starting point for the one selected above."><i class="bi bi-copy me-1"></i> Copy from...</button>
    </div>

    <!-- Sub‑navigation -->
    <ul class="nav nav-pills small mb-3" id="labelsSubTabs" role="tablist">
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#subPageTitles" type="button" data-tt="Rename the heading shown at the top of each generated page (the List, Add, Edit… page of each table).">Page Titles</button></li>
        <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#subTableLabels" type="button" data-tt="The friendly name each table shows across the app (menus, headings) — e.g. show “Clients” instead of the raw table name “customers”.">Table Labels</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#subFieldLabels" type="button" data-tt="The friendly name each column shows on forms and lists — e.g. show “Full name” instead of “cust_name”.">Field Labels</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#subPlaceholders" type="button" data-tt="The faint hint text shown inside empty input boxes on add/edit forms.">Placeholders</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#subTooltips" type="button" data-tt="The small help text shown when a user hovers a field on the generated app’s forms.">Tooltips</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#subAppStrings" type="button" data-tt="Translate the app's built-in interface text — navigation, buttons, dashboard, notifications, the account &amp; admin menus, etc. Leave blank to keep the English default.">App Strings</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#subMenuLabels" type="button" data-tt="Translate the sidebar / top-nav menu item labels (Dashboard, your tables, custom links).">Menu</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#subCustomLabels" type="button" data-tt="Your own reusable label keys (e.g. button captions or messages) that you can reference anywhere in the app.">Custom Labels</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#subLogo" type="button" data-tt="The logo shown in the generated app’s header — an HTML <img> tag or plain text.">Project Logo</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#subCookie" type="button" data-tt="The wording of the cookie-consent banner (turn the banner on in Project → GDPR Cookie Consent).">Cookie Consent</button></li>
    </ul>

    <!-- Sub‑tab panes -->
    <div class="tab-content" id="labelsSubContent">

        <!-- Page Titles -->
        <div class="tab-pane fade" id="subPageTitles">
            <div class="row g-2 mb-2">
                <div class="col-md-6">
                    <input type="text" class="form-control form-control-sm" id="filterTableName" placeholder="🔍 Filter table..." data-tt="Type to narrow the list below to matching tables.">
                </div>
                <div class="col-md-6">
                    <select class="form-select form-select-sm" id="filterPageType" data-tt="Show only rows for a specific page type (List, Add, Edit, …).">
                        <option value="">All page types</option>
                        <option value="list">List</option>
                        <option value="add">Add</option>
                        <option value="edit">Edit</option>
                        <option value="view">View</option>
                        <option value="print">Print</option>
                        <option value="export">Export</option>
                        <option value="import">Import</option>
                        <option value="cards">Cards</option>
                    </select>
                </div>
            </div>
            <div id="pageTitlesGrid" class="table-responsive small">
                <!-- dynamically filled -->
            </div>
        </div>

        <!-- Table Labels -->
        <div class="tab-pane fade show active" id="subTableLabels">
            <div class="row g-2 mb-2">
                <div class="col-md-12">
                    <input type="text" class="form-control form-control-sm" id="filterTableLabels" placeholder="🔍 Filter table..." data-tt="Type to narrow the list below to matching tables.">
                </div>
            </div>
            <div id="tableLabelsGrid" class="table-responsive small">
                <!-- dynamically filled -->
            </div>
        </div>

        <!-- Field Labels -->
        <div class="tab-pane fade" id="subFieldLabels">
            <div class="row g-2 mb-2">
                <div class="col-md-12">
                    <input type="text" class="form-control form-control-sm" id="filterFieldLabels" placeholder="🔍 Filter table or field..." data-tt="Type to narrow the list below to matching tables or fields.">
                </div>
            </div>
            <div id="fieldLabelsGrid" class="table-responsive small">
                <!-- dynamically filled -->
            </div>
        </div>

        <!-- Placeholders -->
        <div class="tab-pane fade" id="subPlaceholders">
            <div class="row g-2 mb-2">
                <div class="col-md-12">
                    <input type="text" class="form-control form-control-sm" id="filterPlaceholders" placeholder="🔍 Filter table or field..." data-tt="Type to narrow the list below to matching tables or fields.">
                </div>
            </div>
            <div id="placeholdersGrid" class="table-responsive small">
                <!-- dynamically filled -->
            </div>
        </div>


        <!-- App Strings (UI chrome) -->
        <div class="tab-pane fade" id="subAppStrings">
            <div class="row g-2 mb-2">
                <div class="col-md-12">
                    <input type="text" class="form-control form-control-sm" id="filterAppStrings" placeholder="🔍 Filter interface text..." data-tt="Type to narrow the list to matching interface strings.">
                </div>
            </div>
            <div id="appStringsGrid" class="table-responsive small">
                <!-- dynamically filled from the UI-strings catalogue -->
            </div>
        </div>

        <!-- Menu labels -->
        <div class="tab-pane fade" id="subMenuLabels">
            <div class="row g-2 mb-2">
                <div class="col-md-12">
                    <input type="text" class="form-control form-control-sm" id="filterMenuLabels" placeholder="🔍 Filter menu item..." data-tt="Type to narrow the list to matching menu items.">
                </div>
            </div>
            <div id="menuLabelsGrid" class="table-responsive small">
                <!-- dynamically filled from the app menu -->
            </div>
        </div>

        <!-- Tooltips -->
        <div class="tab-pane fade" id="subTooltips">
            <div class="row g-2 mb-2">
                <div class="col-md-12">
                    <input type="text" class="form-control form-control-sm" id="filterTooltips" placeholder="🔍 Filter table or field..." data-tt="Type to narrow the list below to matching tables or fields.">
                </div>
            </div>
            <div id="tooltipsGrid" class="table-responsive small">
                <!-- dynamically filled -->
            </div>
        </div>


        <!-- Custom Labels -->
        <div class="tab-pane fade" id="subCustomLabels">
            <div id="customLabelsEditor" class="small">
                <div class="mb-2">
                    <label class="form-label small mb-1">Key <i class="bi bi-info-circle misc-hint" data-tt="A short id you will reference in the app, e.g. “save” or “welcome_msg”. No spaces."></i></label>
                    <input type="text" class="form-control form-control-sm mb-2" id="customLabelKey" placeholder="e.g., save">
                    <label class="form-label small mb-1">Value <i class="bi bi-info-circle misc-hint" data-tt="The text this key displays in the app. May contain HTML."></i></label>
                    <textarea class="form-control form-control-sm" id="customLabelValue" rows="2" placeholder="Label text"></textarea>
                    <button class="btn btn-sm btn-outline-primary mt-2" id="btnSaveCustomLabel" data-tt="Save this custom label for the selected language."><i class="bi bi-check-lg"></i> Save</button>
                </div>
                <hr class="my-2">
                <div id="customLabelsList"></div>
            </div>
        </div>

        <!-- Project Logo -->
        <div class="tab-pane fade" id="subLogo">
            <div class="small">
                <label class="form-label small mb-1">Project Logo (HTML or text) <i class="bi bi-info-circle misc-hint" data-tt="Shown in the generated app’s header. Enter an HTML <img> tag pointing to your logo, or plain text."></i></label>
                <textarea class="form-control form-control-sm" id="logoText" rows="4" placeholder="<img src='logo.png' alt='Logo'>"></textarea>
                <button class="btn btn-sm btn-outline-primary mt-2" id="btnSaveLogo" data-tt="Save the header logo for the selected language."><i class="bi bi-check-lg"></i> Save</button>
            </div>
        </div>

        <!-- Cokkie Consen Banner Text -->
        <div class="tab-pane fade" id="subCookie">
            <div class="small">
                <label class="form-label small mb-1">Cookie Consent Banner Text <i class="bi bi-info-circle misc-hint" data-tt="The message shown in the cookie-consent banner. Turn the banner on in Project → GDPR Cookie Consent."></i></label>
                <textarea class="form-control form-control-sm" id="cookieText" rows="4" placeholder="This site uses cookies..."></textarea>
                <button class="btn btn-sm btn-outline-primary mt-2" id="btnSaveCookie" data-tt="Save the cookie-consent text for the selected language."><i class="bi bi-check-lg"></i> Save</button>
            </div>
        </div>

    </div>
</div>