<div class="modal fade project-settings-modal" id="projectSettingsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <form id="projectSettingsForm" novalidate>
                <?= \PpPhp\Core\Security::CSRF()->HiddenField() ?>
                <input type="hidden" name="slug" id="settingsProjectSlug">
                <input type="hidden" name="color" id="settingsProjectColor" value="#4f46e5">
                <input type="hidden" name="icon" id="settingsProjectIcon" value="folder2-open">

                <div class="modal-header project-settings-header">
                    <div class="d-flex align-items-center gap-3 min-w-0">
                        <span class="project-settings-mark" id="settingsProjectMark"><i class="bi bi-folder2-open"></i></span>
                        <div class="min-w-0">
                            <div class="project-settings-kicker">Project settings</div>
                            <h5 class="modal-title text-truncate" id="settingsProjectTitle">Project</h5>
                        </div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body p-0">
                    <div class="project-settings-layout">
                        <nav class="project-settings-nav" aria-label="Project settings sections">
                            <button type="button" class="active" data-settings-tab="general"><i class="bi bi-sliders"></i><span>General</span></button>
                            <button type="button" data-settings-tab="database"><i class="bi bi-database-gear"></i><span>Database</span></button>
                            <button type="button" data-settings-tab="management"><i class="bi bi-archive"></i><span>Management</span></button>
                        </nav>

                        <div class="project-settings-panels">
                            <section class="project-settings-panel active" data-settings-panel="general">
                                <div class="settings-section-heading">
                                    <div><span>Identity</span><h6>Name and describe this project</h6></div>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-7">
                                        <label class="form-label" for="settingsProjectName">Project name</label>
                                        <input class="form-control" id="settingsProjectName" name="name" maxlength="100" required>
                                    </div>
                                    <div class="col-md-5">
                                        <?php $canRenameSlug = \PpPhp\Core\Security::IsOwner(); ?>
                                        <label class="form-label" for="settingsProjectSlugReadonly">Project slug
                                            <?php if ($canRenameSlug): ?><span class="badge bg-warning text-dark ms-1" style="font-size:.62rem;vertical-align:middle;"><i class="bi bi-shield-lock"></i> owner</span><?php endif; ?>
                                        </label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-link-45deg"></i></span>
                                            <input class="form-control" id="settingsProjectSlugReadonly"
                                                   <?= $canRenameSlug ? 'name="new_slug" pattern="[a-z0-9]+(?:-[a-z0-9]+)*" autocomplete="off" spellcheck="false"' : 'readonly' ?>>
                                        </div>
                                        <div class="form-text">
                                            <?php if ($canRenameSlug): ?>
                                                Renaming changes this project’s URL and moves its files. Lowercase letters, numbers and hyphens only.
                                            <?php else: ?>
                                                The slug remains stable so project links and files do not break.
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label" for="settingsProjectDescription">Description</label>
                                        <textarea class="form-control" id="settingsProjectDescription" name="description" rows="3" maxlength="1000" placeholder="What does this application help people do?"></textarea>
                                        <div class="d-flex justify-content-between form-text"><span>Shown in the Projects hub and Workspace.</span><span id="settingsDescriptionCount">0 / 1000</span></div>
                                    </div>
                                </div>

                                <div class="settings-divider"></div>
                                <div class="settings-section-heading">
                                    <div><span>Appearance</span><h6>Make the project easy to recognize</h6></div>
                                </div>
                                <div class="settings-picker-row">
                                    <div>
                                        <label class="form-label d-block">Accent color</label>
                                        <div class="project-color-picker" id="projectColorPicker">
                                            <?php foreach ($projectColors as $color): ?>
                                                <button type="button" data-project-color="<?= htmlspecialchars($color) ?>" style="--choice-color:<?= htmlspecialchars($color) ?>" aria-label="Use <?= htmlspecialchars($color) ?>"></button>
                                            <?php endforeach; ?>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1">
                                        <label class="form-label d-block">Project icon</label>
                                        <div class="project-icon-picker" id="projectIconPicker">
                                            <?php foreach ($projectIcons as $icon): ?>
                                                <button type="button" data-project-icon-choice="<?= htmlspecialchars($icon) ?>" aria-label="Use <?= htmlspecialchars($icon) ?> icon"><i class="bi bi-<?= htmlspecialchars($icon) ?>"></i></button>
                                            <?php endforeach; ?>
                                        </div>
                                    </div>
                                </div>
                            </section>

                            <section class="project-settings-panel" data-settings-panel="database">
                                <div class="settings-feature-card database">
                                    <span class="feature-icon"><i class="bi bi-database-gear"></i></span>
                                    <div>
                                        <span class="settings-card-label">Current connection</span>
                                        <h6 id="settingsDatabaseLabel">Database</h6>
                                        <p>Test credentials, switch database engines, update SSL and schema options, or inspect the current target.</p>
                                    </div>
                                    <button type="button" class="btn btn-primary" id="settingsOpenDatabase" data-edit-database><i class="bi bi-sliders me-1"></i> Manage connection</button>
                                </div>
                                <div class="settings-callout"><i class="bi bi-shield-check"></i><span>Saved passwords are never returned to the browser. Switching sources requires confirmation and a successful connection test.</span></div>
                            </section>

                            <section class="project-settings-panel" data-settings-panel="management">
                                <div class="settings-feature-card archive">
                                    <span class="feature-icon"><i class="bi bi-archive"></i></span>
                                    <div><span class="settings-card-label">Project lifecycle</span><h6 id="settingsArchiveTitle">Archive project</h6><p id="settingsArchiveCopy">Hide this project from Active while preserving its files, settings, and database.</p></div>
                                    <button type="button" class="btn btn-outline-secondary" id="settingsArchiveButton"><i class="bi bi-archive me-1"></i><span>Archive</span></button>
                                </div>

                                <div class="settings-danger-zone">
                                    <div><span>Danger zone</span><h6>Delete this project permanently</h6><p>Project design files will be removed. Deleting the connected database is always a separate, explicit choice.</p></div>
                                    <button type="button" class="btn btn-outline-danger" id="settingsDeleteButton"><i class="bi bi-trash3 me-1"></i> Delete project</button>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>

                <div class="modal-footer project-settings-footer">
                    <span class="settings-save-status me-auto" id="projectSettingsStatus"><i class="bi bi-check-circle"></i> Changes are saved explicitly</span>
                    <button type="button" class="btn btn-light border" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="saveProjectSettings"><i class="bi bi-check2-circle me-1"></i> Save settings</button>
                </div>
            </form>
        </div>
    </div>
</div>
