<div class="section-card">
    <div class="section-title">🌐 Project Settings</div>
    <div class="row g-2">
        <div class="col-md-6">
            <label class="form-label small mb-1">Languages</label>
            <div class="d-flex align-items-center gap-2">
                <span id="projLanguagesDisplay" class="small text-muted">English</span>
                <button class="btn btn-sm btn-outline-info" id="btnManageLanguages" type="button">
                    <i class="bi bi-translate me-1"></i> Multiple Languages
                </button>
            </div>
            <!-- Auto-shown & auto-checked when 2+ languages exist; lets the owner
                 hide the navbar language selector even with multiple languages. -->
            <div class="form-check small mt-2" id="langSelectorWrap" style="display:none">
                <input class="form-check-input" type="checkbox" id="projShowLangSelector" checked>
                <label class="form-check-label" for="projShowLangSelector">Show language selector in the app navbar</label>
            </div>
            <!-- Phase 2: opt-in DB-backed translations + in-app editor. Auto-suggested
                 at 2+ languages. Lets an admin translate & manage languages live in
                 the generated app (Admin Area → Translations) with no rebuild. -->
            <div class="form-check small mt-2" id="liveTransWrap" style="display:none">
                <input class="form-check-input" type="checkbox" id="projLiveTranslations">
                <label class="form-check-label" for="projLiveTranslations">
                    Live translation editing <span class="text-muted">— edit labels &amp; add languages inside the running app (no rebuild)</span>
                    <i class="bi bi-info-circle misc-hint" data-tt="Ships a small translations table + an Admin Area → Translations editor into the generated app. Admins can translate any interface string and add/enable languages in production; changes take effect instantly. Baked labels remain the fallback."></i>
                </label>
            </div>
        </div>
        <div class="col-md-6">
            <label class="form-label small mb-1">Regional Format</label>
            <select class="form-select form-select-sm" id="projRegional">
                <option value="">Select country</option>
                <option value="AF">Afghanistan</option>
                <option value="AL">Albania</option>
                <option value="DZ">Algeria</option>
                <option value="AR">Argentina</option>
                <option value="AM">Armenia</option>
                <option value="AU">Australia</option>
                <option value="AT">Austria</option>
                <option value="AZ">Azerbaijan</option>
                <option value="BH">Bahrain</option>
                <option value="BD">Bangladesh</option>
                <option value="BY">Belarus</option>
                <option value="BE">Belgium</option>
                <option value="BO">Bolivia</option>
                <option value="BA">Bosnia and Herzegovina</option>
                <option value="BR">Brazil</option>
                <option value="BG">Bulgaria</option>
                <option value="KH">Cambodia</option>
                <option value="CM">Cameroon</option>
                <option value="CA">Canada</option>
                <option value="CL">Chile</option>
                <option value="CN">China</option>
                <option value="CO">Colombia</option>
                <option value="CR">Costa Rica</option>
                <option value="HR">Croatia</option>
                <option value="CY">Cyprus</option>
                <option value="CZ">Czech Republic</option>
                <option value="DK">Denmark</option>
                <option value="DO">Dominican Republic</option>
                <option value="EC">Ecuador</option>
                <option value="EG">Egypt</option>
                <option value="SV">El Salvador</option>
                <option value="EE">Estonia</option>
                <option value="ET">Ethiopia</option>
                <option value="FI">Finland</option>
                <option value="FR">France</option>
                <option value="GE">Georgia</option>
                <option value="DE">Germany</option>
                <option value="GH">Ghana</option>
                <option value="GR">Greece</option>
                <option value="GT">Guatemala</option>
                <option value="HK">Hong Kong</option>
                <option value="HU">Hungary</option>
                <option value="IS">Iceland</option>
                <option value="IN">India</option>
                <option value="ID">Indonesia</option>
                <option value="IE">Ireland</option>
                <option value="IL">Israel</option>
                <option value="IT">Italy</option>
                <option value="CI">Ivory Coast</option>
                <option value="JM">Jamaica</option>
                <option value="JP">Japan</option>
                <option value="JO">Jordan</option>
                <option value="KZ">Kazakhstan</option>
                <option value="KE">Kenya</option>
                <option value="KR">South Korea</option>
                <option value="KW">Kuwait</option>
                <option value="LV">Latvia</option>
                <option value="LB">Lebanon</option>
                <option value="LY">Libya</option>
                <option value="LI">Liechtenstein</option>
                <option value="LT">Lithuania</option>
                <option value="LU">Luxembourg</option>
                <option value="MO">Macao</option>
                <option value="MK">North Macedonia</option>
                <option value="MG">Madagascar</option>
                <option value="MY">Malaysia</option>
                <option value="MV">Maldives</option>
                <option value="MT">Malta</option>
                <option value="MU">Mauritius</option>
                <option value="MX">Mexico</option>
                <option value="MD">Moldova</option>
                <option value="MC">Monaco</option>
                <option value="MN">Mongolia</option>
                <option value="ME">Montenegro</option>
                <option value="MA">Morocco</option>
                <option value="MM">Myanmar</option>
                <option value="NP">Nepal</option>
                <option value="NL">Netherlands</option>
                <option value="NZ">New Zealand</option>
                <option value="NI">Nicaragua</option>
                <option value="NG">Nigeria</option>
                <option value="NO">Norway</option>
                <option value="OM">Oman</option>
                <option value="PK">Pakistan</option>
                <option value="PS">Palestine</option>
                <option value="PA">Panama</option>
                <option value="PY">Paraguay</option>
                <option value="PE">Peru</option>
                <option value="PH">Philippines</option>
                <option value="PL">Poland</option>
                <option value="PT">Portugal</option>
                <option value="PR">Puerto Rico</option>
                <option value="QA">Qatar</option>
                <option value="RO">Romania</option>
                <option value="RU">Russia</option>
                <option value="SA">Saudi Arabia</option>
                <option value="SN">Senegal</option>
                <option value="RS">Serbia</option>
                <option value="SG">Singapore</option>
                <option value="SK">Slovakia</option>
                <option value="SI">Slovenia</option>
                <option value="ZA">South Africa</option>
                <option value="ES">Spain</option>
                <option value="LK">Sri Lanka</option>
                <option value="SE">Sweden</option>
                <option value="CH">Switzerland</option>
                <option value="TW">Taiwan</option>
                <option value="TZ">Tanzania</option>
                <option value="TH">Thailand</option>
                <option value="TN">Tunisia</option>
                <option value="TR">Turkey</option>
                <option value="UG">Uganda</option>
                <option value="UA">Ukraine</option>
                <option value="AE">United Arab Emirates</option>
                <option value="GB">United Kingdom</option>
                <option value="US">United States</option>
                <option value="UY">Uruguay</option>
                <option value="UZ">Uzbekistan</option>
                <option value="VE">Venezuela</option>
                <option value="VN">Vietnam</option>
                <option value="ZM">Zambia</option>
                <option value="ZW">Zimbabwe</option>
            </select>
        </div>

        <!-- Landing Page Row -->
        <div class="col-12">
            <label class="form-label small mb-1">Landing Page</label>
            <div class="row g-2">
                <div class="col-md-6">
                    <select class="form-select form-select-sm" id="projLandingTarget">
                        <option value="dashboard">Dashboard 🖥️</option>
                        <option value="custom">Custom URL 🔗</option>
                        <!-- Table options will be added by JS -->
                    </select>
                </div>
                <div class="col-md-6" id="landingPageDynamicContainer">
                    <select class="form-select form-select-sm" id="projLandingPageType" disabled>
                        <option value="list">List Page</option>
                        <option value="add">Add Page</option>
                        <option value="edit">Edit Page</option>
                        <option value="view">View Page</option>
                        <option value="print">Print Page</option>
                        <option value="export">Export Page</option>
                        <option value="import">Import Page</option>
                        <option value="cards">Cards Page</option>
                    </select>
                    <input type="text" class="form-control form-control-sm" id="projLandingCustomUrl" placeholder="https://... or /internal/path" style="display: none;">
                </div>
            </div>
        </div>

        <!-- Map Provider and API Key (on same row) -->
        <div class="col-md-4">
            <label class="form-label small mb-1">Map Provider</label>
            <select class="form-select form-select-sm" id="projMapProvider">
                <option value="google">Google Maps</option>
                <option value="leaflet">Leaflet (OpenStreetMap)</option>
                <option value="none">None</option>
            </select>
        </div>
        <div class="col-8">
            <label class="form-label small mb-1">Map API Key</label>
            <input type="text" class="form-control form-control-sm" id="projMapKey" placeholder="Enter API key">
        </div>

        <div class="col-md-6">
            <label class="form-label small mb-1">Error Reporting</label>
            <select class="form-select form-select-sm" id="projErrorReporting">
                <option value="detailed">Detailed</option>
                <option value="generic">Generic message</option>
                <option value="none">Suppress errors</option>
            </select>
        </div>
        <div class="col-md-6">
            <label class="form-label small mb-1">Custom Error Message</label>
            <input type="text" class="form-control form-control-sm" id="projErrorMsg" placeholder="Something went wrong...">
        </div>
        <div class="col-12">
            <h6 class="small mt-2 mb-2">Accessibility</h6>
            <div class="form-check form-check-inline small">
                <input class="form-check-input" type="checkbox" id="projDarkMode">
                <label class="form-check-label" for="projDarkMode">Dark Mode</label>
            </div>
            <div class="form-check form-check-inline small">
                <input class="form-check-input" type="checkbox" id="projGDPR">
                <label class="form-check-label" for="projGDPR">GDPR Cookie Consent Banner</label>
            </div>
            <div class="form-check form-check-inline small">
                <input class="form-check-input" type="checkbox" id="proj508">
                <label class="form-check-label" for="proj508">Section 508 Compliance</label>
            </div>
        </div>
    </div>
</div>